使用chart.js在图表中的图例中隐藏第一个标签 [英] Hide first label in legend in a Chart using chart.js

问题描述

我创建了一个堆积的条形图，我必须隐藏第一个数据集的标签和图例中的框"Total Line"，总之还是要隐藏第一个数据集或任何数据集的标签.我已经阅读了文档，选项中有一个过滤器，但是没有用.
隐藏此标签
这是图表的html和js

I have created a stacked bar chart and i have to hide first dataset's label and its box in legend which is "Total Line", Is there anyway to hide first or any dataset's label. i have read the documentation there is a filter in options but it didn't work.
Hiding This label
Here is the html and js for chart

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>

推荐答案

在选项下使用filter方法.

Use the filter method under options.

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

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

在您的情况下，对于第一个索引，返回false；对于其余索引，返回true.

In your case return false for the first index and true for the rest.

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>

这篇关于使用chart.js在图表中的图例中隐藏第一个标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！