我正在将chart.js用于一个Web项目,并且工作正常。但是,我确实有一个问题。我正在尝试将具有n个数据点的折线图连接到n个html div的列表。当用户将鼠标悬停在数据点2上时,div 2将突出显示,并调用一个函数。那行得通。但是,当用户取消悬停数据点2时,div 2应该将其样式改回默认样式。
我的问题是:如何检测数据点上的mouseout事件?
这就是我定义将数据点悬停时会发生什么的方式。
myChart = new Chart(ctx, {
type: 'line',
data: chartData,
options: {
title: {
...
},
tooltips: {
enabled: true,
custom: function(tooltip) {
if (!tooltip) {
return;
}
if(tooltip.dataPoints != null) {
// here, the function that highlights the respective div is called, and it works fine
}
}
}
}
});
有没有需要悬停的东西?我发现有一个全局事件-> mousout选项,但是我不知道如何使用它,而且我还认为它引用了整个图表。
谢谢!
最佳答案
不知道这是否对您有帮助,但是堆积条形图也有类似的问题。我想在条形图的顶部显示值,但是我发现如果工具提示处于打开状态,则这些值会写在工具提示的顶部,这两个值都不可读。我决定只在不显示工具提示时才显示这些值(如果工具提示打开则不显示)。
事实证明,我可以使用工具提示的不透明度设置来确定工具提示是否正在显示。这非常简单,但这是我想出的:
options: {
tooltips: {
custom: function( tooltip ) {
if( tooltip.opacity > 0 ) {
console.log( "Tooltip is showing" );
} else {
console.log( "Tooltip is hidden" );
}
return;
}
}
}
解决了这个问题之后,我便可以保存一个全局变量,可以在其他地方测试该变量以查看工具提示是否正在显示。
关于javascript - 如何检测何时在Chart.js中关闭工具提示?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43589773/