3

再会，

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

在我的脑海中，我想从图表 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 容器 // ..and 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);

};

4

0 回答 0