highcharts - 1 つのホバー イベントから 2 つの独立したグラフにツール ヒントと十字線を表示しますか?

Question

良い一日、

2 つのグラフを含むレポートを作成しようとしています。各グラフは、同じタイムスケール (UNIX タイムスタンプ) で異なるメトリックを示しています。目的は、どちらにカーソルを合わせても、両方のグラフにツールチップと十字線を表示することです。

私の頭の中では、チャート A のツールチップ ホバー イベントから xAxis タイムスタンプ (時間) を取得したいと考えています。次に、チャート B の関連するシリーズを取得し、ツールチップの更新イベントをトリガーします。

現状では、ハイチャートはポイントのみを受け入れるようです。

両方のチャートに mouseOver/Out イベントを追加しました。これは hoverPoints を取得します

    plotOptions: {
        series: {
            point: {
                events: {
                    mouseOver: function () {
                        $el.trigger('tooltip-open', {"$sourceEl": $el[0], "point": this});
                    },
                    mouseOut: function () {
                        $el.trigger('tooltip-close', {"$sourceEl": $el[0], "point": this});
                    }
                }
            }
        }
    }

// $el は highcharts コンテナーです // ..そして tool-tip-XXXXX はカスタム jQuery イベントです。

私の一時的な回避策は次のとおりです。 $el.bind('tooltip-open', function (e, data) { var $el = $(this);

    if (data.$sourceEl.id == $el.id) {
        return;
    }

    var chart = $el.highcharts();

    var points = $(chart.series).map(function () {
        return this.points
    }).get();

    var pointsForTimestamp = $.grep(points, function (p) {
        return p.x == data.point.x;
    });

    $(pointsForTimestamp).each(function () {
        this.setState('hover');
    });

    chart.tooltip.refresh(pointsForTimestamp);
});

$el.bind('tooltip-close', function (e, data) {
    var $el = $(this);

    if (data.$sourceEl.id == this.id) {
        return;
    }

    var chart = $el.highcharts();

    chart.tooltip.hide();
});

var linkGraphs = 関数 ($elA, $elB) {

function isEventHandled(data){

    data.count = data.count || 0;
    if(data.count > 0){
        return true
    }else{
        data.count++;
        return false;
    }
}

function bindToOpen($elA, $elB) {

    $elA.bind('tooltip-open', function (e, data) {

        if(!isEventHandled(data)){
            $elB.trigger('tooltip-open', data);
        }

    });
}

function bindToClose($elA, $elB) {

    $elA.bind('tooltip-close', function (e, data) {
        if(!isEventHandled(data)){
            $elB.trigger('tooltip-close', data);
        }
    });

}

bindToOpen($elA, $elB);
bindToOpen($elB, $elA);

bindToClose($elA, $elB);
bindToClose($elB, $elA);

};