Question

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

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

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

所以我想我需要一个事件，当工具提示显示/隐藏时，我找到this并尝试tooltipRefresh事件，但我找不到确切的指数工具提示显示。我试过了：

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

这是否可以在正确的事件发生时获得索引？

Answer 1

你可以使用像tootip一样的Label，在Lable上显示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();

希望它会对你有所帮助。

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

1 个答案: