Как подключить / синхронизировать перекрестие xAxis между несколькими графиками HighStocks

Question

Мне нужно динамически синхронизировать перекрестие xAxis на нескольких графиках HighStocks.

Пример http://jsfiddle.net/BlackLabel/hh90ps4c/28/ демонстрирует, как синхронизировать элементы управления на одном графике. Я клонировал демо в эту http://jsfiddle.net/jakobvinther/ayf5gst2/ ... и заменил один график таблицей с двумя графиками. Код JavaScript был почти просто дублирован для второго графика.

Из коробки хорошо масштабируются ползунки масштабирования, панорамирования и ползунка rangeSelector на двух графиках (я не изменял никакого кода для достижения этой цели).

Проблема в том, что перекрестие 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/