高图-在鼠标位置绘制十字准线/工具提示，而不是捕捉到数据点

Highcharts - Draw Crosshairs / Tooltip on Mouse Position Instead of Snapping to Data Point

本文关键字：工具提示 数据 位置 鼠标 绘制 十字 高图      更新时间：2023-09-26

在这里(参见这个jsfiddle)，您可以看到二维十字准星正在捕捉到最接近它的数据点。如何使十字准星和工具提示与图表上的当前鼠标位置相对应?

tooltip: {
  crosshairs: [true, true]
}

jsFiddle Solution

我最终绑定了自己的mousemove事件，以便在十字准星的图形中获得不断变化的鼠标位置。对于工具提示，我只使用:

tooltip: {
            shared: true,
            followPointer: true
        },

这应该足够让你继续下去了。

不幸的是，十字准星只能以这种方式工作，但您可以通过mouseOver和mouseOut事件准备自己的解决方案，并通过渲染器添加绘制线。

http://api.highcharts.com/highcharts plotOptions.series.events.mouseOverhttp://api.highcharts.com/highcharts plotOptions.series.events.mouseOut

http://api.highcharts.com/highcharts渲染器

你可以试试设置鼠标移动轴准星

例子
$('#container').highcharts({
    xAxis: {
        crosshair: {
            snap: false
        }
    },
    yAxis: {
        crosshair: {
            snap: false
        }
    },
    series: [{
        data: [6, 4, 2,4],
        name: 'First'
    }, {
        data: [7, 3, 2],
        name: 'Second'
    }, {
        data: [9, 4, 8],
        name: 'asdf'
    }]        
});
相关文章：