作者:红骑兵 | 来源:互联网 | 2022-11-25 12:05
我想设置在ChartJs悬停效果编程我希望看到这两种效应hoverBorderWidth
,和hoverBorderColor
。我知道如何激活一些工具提示,但无法应用悬停效果。例如,如果我有图表和外部某些链接,则可以触发mouseover
链接事件。我想在ChartJs中产生悬停效果,我该怎么做?
感谢您的回答。
1> timclutton..:
Chart.js侦听mousemove
事件并检查数据点是否在x / y坐标处。如果是这样,它将触发该点的“悬停”行为。
我从Chart.js工具提示测试代码中借用了以下代码,以演示如何访问正确的属性和触发事件。
let c = new Chart($('#chart'), {
type: 'doughnut',
data: {
labels: ['a', 'b', 'c', 'd'],
datasets: [{
data: [1, 2, 4, 8],
backgroundColor: ['red', 'blue', 'green', 'orange']
}]
},
options: {
maintainAspectRatio: false
}
});
$('#a').on('click', function() { t(0); });
$('#b').on('click', function() { t(1); });
$('#c').on('click', function() { t(2); });
$('#d').on('click', function() { t(3); });
function t(idx) {
var meta = c.getDatasetMeta(0),
rect = c.canvas.getBoundingClientRect(),
point = meta.data[idx].getCenterPoint(),
evt = new MouseEvent('mousemove', {
clientX: rect.left + point.x,
clientY: rect.top + point.y
}),
node = c.canvas;
node.dispatchEvent(evt);
}