Question

美好的一天，

我们正在尝试开发一个包含两个图表的报告。每个图表显示相同时间刻度（unix时间戳）的不同指标。目的是展示工具提示＆amp;两个图表上的十字线，无论您将鼠标悬停在哪一侧。

在我脑海中，我想从图表A上的工具提示悬停事件中获取xAxis时间戳（时间）。然后，我将获取图表B上的相关系列并触发工具提示刷新事件。

就目前而言，看起来highcharts只接受积分。

我在两个图表中添加了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 = function（$ 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);

};

显示工具提示＆amp;单个悬停事件的两个独立图表上的十字准线？

0 个答案: