Chartjs：删除特定标签

Question

我有下面的堆叠组图。

<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) Highlight/Darken 只是图表中各个堆栈的边界以及这些单独堆栈的颜色。就像传说中的那样。

如有任何帮助，我们将不胜感激。 Image of my graph

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

检查一个工作示例here

Chartjs：删除特定标签

Chartjs : Remove specific labels

chart.js

chartjs-2.6.0