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

时间:2013-05-29 02:45:58

标签: javascript highcharts highstock

Here (see this jsfiddle)你可以看到二维十字准线正在捕捉到最接近它的数据点。如何使十字准线和工具提示对应于图表上的当前鼠标位置?

tooltip: {
  crosshairs: [true, true]
}

3 个答案:

答案 0 :(得分:10)

jsFiddle Solution

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

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

这应该足以让你前进。

答案 1 :(得分:2)

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

http://api.highcharts.com/highcharts#plotOptions.series.events.mouseOver http://api.highcharts.com/highcharts#plotOptions.series.events.mouseOut

http://api.highcharts.com/highcharts#Renderer

答案 2 :(得分:1)

你可以尝试一下 Set axis crosshair for mouse move

Example

$('#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'
    }]        
});