大家好,
希望这是一个简单的过程。我已经设置了一个带有 onclick 事件的图例,但是当我将鼠标悬停在标签上时,我希望鼠标光标变为“指针”(参见上面的图表截图)。目前很难判断标签是链接,因为当我将鼠标悬停在它们上面时鼠标光标不会改变。
另外,我如何在图例和图表之间添加一些边距/填充(图例下方的空间)。
非常感谢!
最佳答案
您可以使用 legend onHover config option 的组合来实现所需的行为。 (将指针样式更改为 pointer
)和 custom tooltips config option (将指针样式改回 default
)。
这是一个演示有效解决方案的示例配置。我不确定你是否使用 jQuery,所以我决定不使用它。随意更改。
options: {
legend: {
position: 'top',
labels: {
fontColor: 'rgb(255, 99, 132)'
},
onHover: function(event, legendItem) {
document.getElementById("canvas").style.cursor = 'pointer';
}
},
tooltips: {
custom: function(tooltip) {
if (!tooltip.opacity) {
document.getElementById("canvas").style.cursor = 'default';
return;
}
}
}
}
关于css - Chart.JS - 极地区域 - 图例悬停样式和边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42486591/