Highcharts，當共享工具提示顯示/隱藏時獲取點索引

Question

我有一組具有相同類別的圖表。

當用戶將鼠標懸停在圖表上並顯示工具提示時，我需要設置所有圖表的相應點狀態以懸停以幫助用戶比較數據。

首先我使用mouseOver和mouseOut事件，它幾乎滿足我的需求，但我使用共享工具提示，所以有時工具提示顯示沒有鼠標點，所以事件不會被解僱。

所以我想我需要一個事件，當工具提示顯示/隱藏，我發現this並嘗試tooltipRefresh事件，但我無法找到工具提示顯示在哪個點上的確切索引。我曾嘗試過：

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

難道我能在正確的事件觸發時刻獲得索引嗎？

Answer 1

你可以使用標籤，就像Tootip一樣，在標籤上顯示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(); 

希望它能幫助你。