使用 chart.js 隐藏图表中图例中的第一个标签答案

【问题标题】：Hide first label in legend in a Chart using chart.js使用 chart.js 隐藏图表中图例中的第一个标签
【发布时间】：2017-11-02 17:07:31
【问题描述】：

我创建了一个堆积条形图，我必须隐藏第一个数据集的标签及其图例中的框，即“总线”，无论如何要隐藏第一个或任何数据集的标签。我已阅读文档，选项中有一个过滤器，但它不起作用。
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>

【问题讨论】：

标签： javascript charts chart.js2

【解决方案1】：

使用选项下的过滤方法。

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

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

在您的情况下，第一个索引返回 false，其余索引返回 true。

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,
                }
            }]
        }
    }
});

<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>

【讨论】：