javascript - 如何在多个 HighStocks 图表之间连接/同步 xAxis 十字线

Question

我需要跨多个 HighStocks 图表动态同步 xAxis 十字准线。

示例http://jsfiddle.net/BlackLabel/hh90ps4c/28/演示如何同步一个图表内的控件。我将演示克隆到此 http://jsfiddle.net/jakobvinther/ayf5gst2/ ...并用带有两个图表的表格替换了单个图表。第二个图表的 JavaScript 代码几乎是重复的。

开箱即用，两个图表中的缩放、平移和 rangeSelector slider 都很好地同步(我没有更改任何代码来实现这一点)。

问题是两个图表中的 xAxis 十字准线不同步，它们在每个图表中单独工作。怎么才能做到这一点？

/* thanks */

Answer 1

如果图表不在一列中，则问题出在鼠标事件 x 坐标上。您可以引用该列中的第一个图表来获取您需要的坐标:

$('#container1').bind('mousemove touchmove touchstart', function(e) {
    var chart,
        point,
        i,
        event;

    for (i = 0; i < Highcharts.charts.length; i = i + 1) {
        chart = Highcharts.charts[i];
        // Find coordinates within the chart
        event = Highcharts.charts[0].pointer.normalize(e);
        // Get the hovered point
        point = chart.series[0].searchPoint(event, true);

        if (point) {
            point.highlight(e);
        }
    }
});

现场演示:http://jsfiddle.net/BlackLabel/8krwuof9/