1

我有下面的堆叠组图。

<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) 使用这些单独堆栈的颜色突出/变暗图表中各个堆栈的边框。就像传说中的样子。

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

4

1 回答 1

2

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

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

在此处检查一个工作示例

于 2018-04-27T14:00:44.187 回答