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/