使StockCharts中的工具提示与HighCharts中的相同

Make the tooltip in StockCharts behave the same as in HighCharts

本文关键字:HighCharts 工具提示 StockCharts      更新时间:2023-09-26

如何使StockChart工具提示的行为与HighCharts相同?

如果您看一下,在Stock Chart中,光标移动到鼠标位置,在"Chart"实例中,工具提示会锁定到最近的点。

小提琴来了:

http://jsfiddle.net/gn393/

$(function () {
    var chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container1'
        },
        tooltip: {
            positioner: function (w,h,p) {
                return { x: p.plotX + chart.plotLeft, y: p.plotY + chart.plotTop };
            }
        },
        series: [{type:"area",
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }, {
            data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]        
        }]
    });
});
$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container2'
        },
        tooltip: {
            positioner: function (w,h,p) {
                return { x: p.plotX + chart.plotLeft, y: p.plotY + chart.plotTop };
            }
        },
        series: [{type:"area",
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }, {
            data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]        
        }]
    });
});

我需要工具提示捕捉到StockChart上最近的点。

这就是Highcharts中共享工具提示的工作原理。您需要禁用它(shared: false),以获得所需的结果,请查看:http://jsfiddle.net/gn393/1/