javascript - Highcharts，当共享工具提示显示/隐藏时获取点索引

Question

我有一组具有相同类别的图表。

当用户将鼠标悬停在图表上并显示工具提示时，我需要将所有图表的相应点状态设置为悬停以帮助用户比较数据。

首先，我使用 mouseOver 和 mouseOut 事件，它几乎满足我的需求，但我使用共享工具提示，所以有时工具提示显示没有鼠标在该点上，所以该事件没有被解雇。

所以我想我需要一个当工具提示显示/隐藏时的事件，我发现 this并尝试 tooltipRefresh 事件，但我找不到工具提示显示的确切索引。我尝试过:

tooltipRefresh: function(e) {
    var index = this.hoverPoint.index; //No dependentable
}

有什么方法可以让我在正确的事件触发时刻获取索引吗？

Answer 1

您可以使用标签，就像提示一样，在标签上显示X、Y值。

我所做的是:

    1.click on one chart  === >  
    2.get X value  ===>  
    3.fire a Event (click event of chart)  === >  
    4.render Label on every other chart using X (get Y value in each chart by X)

创建图表时，我设置了一个点击事件

options.chart = $.extend(true, options.chart, {
                renderTo: 'hChart_' + chartIndex,
                type: 'spline',
                events: {
                    click: function (event) {
                        if($scope.label.length > 0){
                            $scope.clearAllLabels();
                        }else{
                            var charts = $scope.ui.charts;
                            $.each(charts, function (index, chart) {
                                //render Label to chart
                             });
                        }
                     }
                   }
                });

下面是在图表中添加标签。

var label = chart.renderer.label(
                    moment(xAxis).format('dddd, MMM DD, HH:mm:ss') + '<br>' + kpiName + ': <b>' + Highcharts.numberFormat(yAxis, 2) + kpiUnit + '</b>',
                    120,
                    40)
                .attr({
                    fill: Highcharts.getOptions().colors[0],
                    padding: 10,
                    r: 5,
                    zIndex: 8
                })
                .css({
                    lineHeight: '20%',
                    fontSize: '11px',
                    color: '#FFFFFF'
                })
                .add();

希望对您有帮助。