时间戳

首页 > 解决方案 > 如何在多个 HighStocks 图表之间连接/同步 xAxis 十字准线

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

问题描述

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

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

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

问题是两个图表中的 xAxis 十字准线没有同步，它们在每个图表中单独工作。怎么可能呢？

/* thanks */

标签： javascripthighcharts

解决方案

如果图表不在一列中，则问题出在鼠标事件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/

推荐阅读