Chart.js Chartjs：删除特定标签

我有下面的分组图

<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>

var barChartData={
标签：[“一月”、“三月”、“六月”、“九月”、“十二月”]，
数据集：[{
标签：“苹果”，
边框颜色：“rgba（255,50,50,1）”，
背景颜色：“rgba（255,50,50,0.5）”，
堆栈：“堆栈0”，
数据：[3,6,4,8,2]
}, {
标签：“橙色”，
边框颜色：“rgba（255160242,1）”，
背景颜色：“rgba（255160242,0.5）”，
堆栈：“堆栈0”，
数据：[2,1,3,0,1]
}, {
标签：'梨'，
边框颜色：“rgba（79158255,1）”，
背景颜色：“rgba（79158255,0.5）”，
堆栈：“堆栈0”，
数据：[3,4,1,5,2]
}, {
标签：“苹果”，
边框颜色：“rgba（255,50,50,1）”，
背景颜色：“rgba（255,50,50,0.5）”，
堆栈：“堆栈1”，
数据：[7,16,10,8,5]
},{
标签：“芒果”，
边框颜色：“rgba（10024497,1）”，
背景颜色：“rgba（10024497,0.5）”，
堆栈：“堆栈1”，
数据：[4,9,12,5,7]
}, {
标签：“香蕉”，
边框颜色：“rgba（2552591,1）”，
背景颜色：“rgba（255291,0.5）”，
堆栈：“堆栈1”，
数据：[3,6,13,14,5]
}, {
标签：“橙色”，
边框颜色：“rgba（255160242,1）”，
背景颜色：“rgba（255160242,0.5）”，
堆栈：“堆栈1”，
数据：[7,12,3,0,2]
}, {
标签：“樱桃”，
边框颜色：“rgba（25513238,1）”，
背景颜色：“rgba（25513238,0.5）”，
堆栈：“堆栈1”，
数据：[8,4,7,11,6]
}, {
标签：'梨'，
边框颜色：“rgba（79158255,1）”，
背景颜色：“rgba（79158255,0.5）”，
堆栈：“堆栈1”，
数据：[8,14,9,12,16]
}]
};
var ctx=document.getElementById（“myChart”）；
var myChart=新图表（ctx{
类型：'bar'，
数据：barChartData，
选项：{
图例：{
显示：对，
},
工具提示：{
模式：“x”，
交集：错
},
回答：是的，
比例：{
xAxes：[{
对,，
}],
雅克斯：[{
是的
}]
}
}
});

我想做两件事：

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

for（var i=0；i

---

检查一个工作示例

谢谢您的回复。这是有用的。有没有办法不显示多余的图例？@user6147975我已经修改了上面的代码和隐藏多余图例的codepen示例