如何在单击图例时高亮显示chart.js的堆叠条形图中的条形图

Question

我有一个堆叠条形图，我想在单击该颜色的图例时高亮显示条形图。比方说，如果我点击一个颜色为"绿色"的图例，我想用绿色突出显示所有的条形图，可以通过将边框颜色设置为不同的颜色和宽度来实现。

有人能帮我做到这一点吗？

Answer 1

您可以通过此代码获得点击的图例。然后您可以选择相同的图例。我在SO的帮助下创建了类似的东西。

var canvas = document.getElementById('yourChartDiv'); 
var myChart = new Chart(canvas, chartData);

canvas.onclick = function(evt) {
var activePoint = myChart.getElementAtEvent(evt)[0];
var data = activePoint._chart.data;
var datasetIndex = activePoint._datasetIndex;
var lagend = data.datasets[datasetIndex].label; 
//var value = data.datasets[datasetIndex].data[activePoint._index];
};
console.log(legend); // here is the legend
//Now select the bars with same legend.

希望你至少能得到一条线索。