使用chart.js

时间:2017-11-02 17:07:31

标签: javascript charts chart.js2

我创建了一个堆积条形图,我必须在图例中隐藏第一个数据集的标签及其框,即#34; Total Line",无论如何都要隐藏第一个或任何数据集&#39 ; s标签。我已经阅读了文档中有一个选项过滤器,但它没有工作 Hiding This label
这是图表的html和js



var ctx = document.getElementById("girth-measure-chart");
var totalLine = [115, 118, 88, 93, 103, 118, 125]
var total = [112, 115, 85, 90, 100, 115, 122]
var arms = [46, 55, 41, 41, 47, 54, 57]
var neck = [17, 20, 15, 15, 17, 20, 21]
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
        datasets: [{
                type: 'line',
                label: 'Total Line',
                data: totalLine,
                fill: false,
                borderColor: ["#ff7899"],
                legend: false,
                pointBackgroundColor: "#ff151f",
                pointRadius: 8,
                pointHoverRadius: 8,
                pointHoverBackgroundColor: "#990e14",
                pointHoverBorderColor: "#6754d3"

            }, {
                type: 'bar',
                label: 'Neck',
                data: neck,
                backgroundColor: "#e99449",
                hoverBackgroundColor: "#d36d14"
            }, {
                type: 'bar',
                label: 'Arms',
                data: arms,
                backgroundColor: "#49bae9",
                hoverBackgroundColor: "#0789bf"
            }, {
                type: 'bar',
                label: 'Total',
                data: total,
                backgroundColor: "#6754d3",
                hoverBackgroundColor: "#260cbd"
            }

        ]
    },
    options: {

        legend: {
            display: true,
            labels: {
                display: true,
                boxWidth: 12,


            }
        },
        responsive: true,
        scales: {
            xAxes: [{
                stacked: true,
                gridLines: {
                    display: false
                },
                barThickness: 25,
                ticks: {
                    display: true,
                    fontFamily: "Montserrat",
                    fontColor: "#2c405a",
                    fontSize: 12
                }
            }],
            yAxes: [{
                gridLines: {
                    display: false
                },
                ticks: {
                    display: false,
                    stepSize: 10,
                    min: 0,
                    max: 150,
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
<div class="chart-container">
    <div class="girth-measure-chart-inner" style="width: 100%;">
        <canvas id="girth-measure-chart" height=""></canvas>
    </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

在选项下使用过滤方法。

options: {
  legend: {
    labels: {
      filter: function(legendItem, chartData) {

        // return true or false based on legendItem's datasetIndex (legendItem.datasetIndex)
      }
    }
  }
}

在你的情况下,对于第一个索引返回false,对其余索引返回true。

&#13;
&#13;
var ctx = document.getElementById("girth-measure-chart");
var totalLine = [115, 118, 88, 93, 103, 118, 125]
var total = [112, 115, 85, 90, 100, 115, 122]
var arms = [46, 55, 41, 41, 47, 54, 57]
var neck = [17, 20, 15, 15, 17, 20, 21]
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
        datasets: [{
                type: 'line',
                label: 'Total Line',
                data: totalLine,
                fill: false,
                borderColor: ["#ff7899"],
                legend: false,
                pointBackgroundColor: "#ff151f",
                pointRadius: 8,
                pointHoverRadius: 8,
                pointHoverBackgroundColor: "#990e14",
                pointHoverBorderColor: "#6754d3"

            }, {
                type: 'bar',
                label: 'Neck',
                data: neck,
                backgroundColor: "#e99449",
                hoverBackgroundColor: "#d36d14"
            }, {
                type: 'bar',
                label: 'Arms',
                data: arms,
                backgroundColor: "#49bae9",
                hoverBackgroundColor: "#0789bf"
            }, {
                type: 'bar',
                label: 'Total',
                data: total,
                backgroundColor: "#6754d3",
                hoverBackgroundColor: "#260cbd"
            }

        ]
    },
    options: {
        legend: {
           labels: {
               filter: function(legendItem, chartData) {
                if (legendItem.datasetIndex === 0) {
                  return false;
                }
               return true;
               }
            }
        },
        responsive: true,
        scales: {
            xAxes: [{
                stacked: true,
                gridLines: {
                    display: false
                },
                barThickness: 25,
                ticks: {
                    display: true,
                    fontFamily: "Montserrat",
                    fontColor: "#2c405a",
                    fontSize: 12
                }
            }],
            yAxes: [{
                gridLines: {
                    display: false
                },
                ticks: {
                    display: false,
                    stepSize: 10,
                    min: 0,
                    max: 150,
                }
            }]
        }
    }
});
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
<div class="chart-container">
    <div class="girth-measure-chart-inner" style="width: 100%;">
        <canvas id="girth-measure-chart" height=""></canvas>
    </div>
</div>
&#13;
&#13;
&#13;

相关问题