ChartJS:删除特定标签

Question

i具有以下堆叠组图表。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    <script>
        var barChartData = {
        labels: ['January', 'March', 'June', 'September', 'December'],
        datasets: [{
                label: 'Apple',
                borderColor: 'rgba(255, 50, 50,1)',
                backgroundColor: 'rgba(255, 50, 50,0.5)',
                stack: 'Stack 0',
                data: [3,6,4,8,2]
        }, {
                label: 'Orange',
                borderColor: 'rgba(255, 160, 242,1)',
                backgroundColor: 'rgba(255, 160, 242,0.5)',
                stack: 'Stack 0',
                data: [2,1,3,0,1]
        }, {
                label: 'Pear',
                borderColor: 'rgba(79, 158, 255,1)',
                backgroundColor: 'rgba(79, 158, 255,0.5)',
                stack: 'Stack 0',
                data: [3,4,1,5,2]
        }, {
                label: 'Apple',
                borderColor: 'rgba(255, 50, 50,1)',
                backgroundColor: 'rgba(255, 50, 50,0.5)',
                stack: 'Stack 1',
                data: [7,16,10,8,5]
        },{
                label: 'Mango',
                borderColor: 'rgba(100, 244, 97,1)',
                backgroundColor: 'rgba(100, 244, 97,0.5)',
                stack: 'Stack 1',
                data: [4,9,12,5,7]
        }, {
                label: 'Banana',
                borderColor: 'rgba(255, 252, 91,1)',
                backgroundColor: 'rgba(255, 252, 91,0.5)',
                stack: 'Stack 1',
                data: [3,6,13,14,5]
        }, {
                label: 'Orange',
                borderColor: 'rgba(255, 160, 242,1)',
                backgroundColor: 'rgba(255, 160, 242,0.5)',
                stack: 'Stack 1',
                data: [7,12,3,0,2]
        }, {
                label: 'Cherry',
                borderColor: 'rgba(255, 132, 38,1)',
                backgroundColor: 'rgba(255, 132, 38,0.5)',
                stack: 'Stack 1',
                data: [8,4,7,11,6]
        }, {
                label: 'Pear',
                borderColor: 'rgba(79, 158, 255,1)',
                backgroundColor: 'rgba(79, 158, 255,0.5)',
                stack: 'Stack 1',
                data: [8,14,9,12,16]
        }]
      };
      var ctx = document.getElementById("myChart");
      var myChart = new Chart(ctx, {
        type: 'bar',
        data: barChartData,
        options: {
                legend: {
                        display:true,   
                },
                tooltips: {
                        mode: 'x',
                        intersect: false
                },
                responsive: true,
                scales: {
                        xAxes: [{
                                stacked: true,
                        }],
                        yAxes: [{
                                stacked: true
                        }]
                }
        }
      });
    </script>

我想做两件事：

1(删除冗余苹果，橙色和梨标签2(突出显示/变暗图表中各个堆栈上的边框，并带有这些单个堆栈的颜色。就像传奇的方式。

任何帮助将不胜感激。我的图像的图像

Answer 1

您可以将自定义逻辑添加到传奇选项中：

options: {
   legend: {
      display: true,
          labels: {
              generateLabels: function (chart) { ...

您可以在此处访问标签，自定义其颜色，文本，可以对它们进行分组等。因此，在这种情况下，您必须先通过其文本对标签进行分组，例如

const labelTexts = []
const newLabels = []
labels = Chart.defaults.global.legend.labels.generateLabels(chart);
// group labels
labels.map((label) => {
    if (labelTexts.indexOf(label.text) === -1) {
        labelTexts.push(label.text)
    }
})
labelTexts.map((text) => {
    labels.map((label) => {
        if (label.text === text) {
            newLabels.push(label)
        }
    })
})

然后您可以删除冗余标签，例如：

for (var i = 0; i < newLabels.length - 2; i++) {
    if (newLabels[i].text !== newLabels[i + 1].text) {
        newLabels2.push(newLabels[i])
    }
}

在此处检查一个工作示例