javascript - Highcharts - 图表任何部分的鼠标悬停事件

Question

this 的文档鼠标悬停事件准确描述了我在 High Charts 中尝试做的事情——“当鼠标进入图表时”触发事件。但是，如果您查看文档中给出的 fiddle 示例，even 只会在您将鼠标悬停在特定点上而不是通常在图形上时触发。这似乎需要在一般图形鼠标悬停时触发事件对于图表库来说是一个非常普遍的用例，但我似乎无法使用任何可用的不同事件来获得这种行为。我也不能使用 jQuery 悬停，因为我需要与鼠标位置对应的相关 x 标签。有谁知道我如何触发这种行为的事件？

就其值(value)而言，这与 high charts 论坛上提出的问题相同 here , 无人回答

Answer 1

我不确定我是否完全理解，但我认为您希望能够悬停在绘图中的任何位置并确定悬停的 x、y 坐标？

如果是这样，您可以在 Highcharts 事件处理之外执行此操作:

$('#container').mousemove(function(e){ //mouseover on container div   
    var chart = Highcharts.charts[0];
    var xaxis = chart.xAxis[0];
    var yaxis = chart.yAxis[0];
    xaxis.removePlotLine('plot-line-x');
    yaxis.removePlotLine('plot-line-y');
    var x = xaxis.toValue(e.offsetX, false); // find X coor where mouse is
    var y = yaxis.toValue(e.offsetY, false); // find y coor where mouse is
    xaxis.addPlotLine({
        value: x,
        color: 'red',
        width: 2,
        id: 'plot-line-x'
    });
    yaxis.addPlotLine({
        value: y,
        color: 'red',
        width: 2,
        id: 'plot-line-y'
    });
});

演示 here .