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）删除多余的Apple，Orange和Pear标签 2）使用各个堆栈的颜色突出显示/变暗图表中各个堆栈的边框。就像传说一样。

非常感谢任何帮助。 Image of my graph

Answer 1

您可以为图例选项添加自定义逻辑，例如：

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

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

this

检查工作示例here

Chartjs：删除特定标签

1 个答案: