我正在使用Highstocks默认打开数据分组。
处理“point - > events - > mouseOver”事件时, 我想找到悬停点的确切x-y位置。
我现在正在做的是:
// When data is grouped as daily/weekly
tooltip: {
useHTML: true,
hideDelay: 0,
snap: 0,
backgroundColor: 'rgba(255,255,255,1)',
formatter: function() {
let item;
// When zoomed out and data is grouped or graph grouped by day or week
if(this.series.hasGroupedData) {
// let xPos = this.series.xData[Math.round(this.point.clientX)];
// let yPos = this.series.yData[Math.round(this.point.plotY)];
// find the timestamp in the middle of the timestamp grouping
let maxClientX = Math.round(this.series.groupedData[this.series.groupedData.length - 1].clientX);
let point_position_percent = this.point.clientX / maxClientX;
let point_position_index = Math.round(point_position_percent * this.series.xData.length);
let xPos = this.series.xData[point_position_index];
item = _.find(this.series.options.data, {x:xPos});
}
// When zoomed in
else {
item = this.point;
}
let tooltipFormat = this.key+'<table><tr><td><span style="color:{series.color}">\u25CF</span></td><td>'+this.series.name+': </td>' + '<td><b>'+this.y+'</b></td></tr>' +
'<tr><td></td><td>Data 1: </td>' + '<td><b>'+item.data1+'</b></td></tr>' +
'<tr><td></td><td>Data 2: </td>' + '<td><b>'+item.data2+'</b></td></tr>' +
'<tr><td></td><td>Data 3: </td>' + '<td><b>'+item.data3+'</b></td></tr></table>';
return tooltipFormat;
}
}
只需在X轴上找到点的“百分比”,然后将此百分比转换为数据集中的等效索引即可。