捕捉并显示折线图的工具提示，而不仅仅是点

Question

我有一个简单的折线图。使用默认设置，我会收到与数据系列中的点相对应的工具提示。

有没有办法显示与图表的线条对齐的当前图形坐标的工具提示，而不仅仅是数据系列中的点？

Answer 1

是的，您可以通过覆盖工具提示行为在 Highcharts 中实现此目的。默认情况下，工具提示会捕捉到系列中的数据点。但是，您可以通过根据鼠标位置在数据点之间动态插值来显示捕捉到线的当前图形坐标的工具提示。为此，您可以将 mousemove 侦听器添加到图表容器，并根据其位置计算图表上的鼠标坐标并将其输入到工具提示中。

const tooltipX = chart.xAxis[0].toPixels(xValue);
const tooltipY = chart.yAxis[0].toPixels(yValue, true);

chart.tooltip.label.attr({
    text: `X: ${Highcharts.numberFormat(xValue, 2)}<br>Y: ${Highcharts.numberFormat(yValue, 2)}`,
    x: tooltipX + 10,
    y: tooltipY - 10
}).show();

演示：https://jsfiddle.net/BlackLabel/dfLam342/