ChartJS 是一个流行的 JavaScript 图表库,用于创建各种类型的图表,包括条形图、折线图、饼图等。堆叠条形图是一种特殊的条形图,其中每个条形由多个数据集组成,这些数据集堆叠在一起以显示它们的总和。
将鼠标悬停在图例上时,是否可以突出显示堆叠条形图中的数据集?
ChartJS 默认情况下,当鼠标悬停在图例上时,会突出显示整个堆叠条形图的相关部分。如果你希望只突出显示特定的数据集,可以通过自定义事件处理来实现。
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: 'Dataset 1',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}, {
label: 'Dataset 2',
data: [4, 8, 12, 16, 20, 24],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
tooltips: {
mode: 'index',
intersect: false
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
x: {
stacked: true,
},
y: {
stacked: true,
}
}
}
});
// 自定义图例悬停事件
myChart.options.plugins.legend.onClick = function (event, legendItem) {
var datasetIndex = legendItem.datasetIndex;
myChart.setActiveElements([{ datasetIndex: datasetIndex }]);
myChart.update();
};
通过上述代码,你可以实现当鼠标悬停在图例上时,只突出显示特定的数据集。setActiveElements
方法用于设置活动元素,update
方法用于更新图表。
希望这个答案能帮助你解决问题!
领取专属 10元无门槛券
手把手带您无忧上云