在Plotly.js中,plotly_beforehover
是在鼠标悬停在数据点上之前触发的回调事件。它的主要作用是在鼠标悬停事件发生前做一些准备工作。
plotly_beforehover
事件是与图表对象绑定的,可以通过调用on
方法来绑定事件处理程序。下面是一个示例代码:
// 定义trace
var trace = {
x: [1, 2, 3, 4],
y: [10, 20, 30, 40],
mode: 'markers',
type: 'scatter'
};
// 定义data数组
var data = [trace];
// 定义layout布局
var layout = {
title: 'My Plot',
hovermode: 'closest'
};
// 定义config配置
var config = {
responsive: true
};
// 绘制图表
Plotly.newPlot('myDiv', data, layout, config);
// 绑定plotly_beforehover事件
var myPlot = document.getElementById('myDiv');
myPlot.on('plotly_beforehover', function(data){
// 在数据点上显示 additional info
var textArray = [];
for (var i = 0; i < data.points.length; i++) {
textArray.push('Additional info');
}
return textArray;
});
在上面的示例代码中,我们定义了一个Scatter图,然后定义了一个plotly_beforehover
事件处理程序,在该处理程序中为每个数据点返回了一个Additional info
字符串。最后,我们使用Plotly.newPlot()
方法绘制图表,并使用on()
方法将处理程序绑定到图表上。
当鼠标悬停在数据点上时,plotly_beforehover
事件处理程序将被触发,返回的textArray
数组将被用于显示在数据点上的附加信息。