Highcharts - 如何突出顯示線圖的特定部分？

Question

有誰知道我們是否可以在Highcharts中實現這樣的目標？ 我們希望當用戶將鼠標懸停在圖表上時，某個矩形區域會突出顯示。

有沒有人有過類似的事情可以幫助我們呢？

謝謝。

Answer 1

我沒有嘗試這樣做，但你可以嘗試這樣的事情來獲得期望的結果：

tooltip: { 
     formatter: function() { 
      //resetting state 
      for(i=0;i<this.series.data.length;i++){ 
       this.series.data[i].setState(); 
      } 
      var index=this.series.data.indexOf(this.point) 
      //setting state on the current,previous,next point 
      this.series.data[index].setState('hover'); 
      this.series.data[index-1].setState('hover'); 
      this.series.data[index+1].setState('hover'); 
      return "your tooltip"; 
     } 
    } 

Answer 2

您可以使用renderer呈現鼠標懸停任何形狀和隱藏在鼠標離開。定位渲染的形狀需要一些計算/編碼，但它給你完全的自由。

從發佈的圖片中，您也可以使用更簡單的方法，而不是最優雅的方法，但它在獲取結果中速度很快。創建一個隱藏的系列，指定將定義區域的點並在事件上顯示/隱藏它。

series: [{ 
    data: [5, 10, 15, 10, 5], 
    color: 'rgba(0,0,200, 0.2)', 
    states: { 
    hover: { 
     enabled: false 
    } 
    } 
}, { 
    id: 'h1', 
    data: [ 
    [1, 10], { 
     x: 2, 
     y: 15, 
     marker: { 
     enabled: true, 
     fillColor: 'black', 
     symbol: 'circle' 
     } 
    }, 
    [3, 10] 
    ], 
    marker: { 
    enabled: false 
    }, 
    linkedTo: 's1', 
    visible: false, 
    enableMouseTracking: false 
    }], 

例如：http://jsfiddle.net/9L4e328j/