Highcharts - 如何突出显示折线图的特定部分？

Question

有人知道我们是否可以在Highcharts中实现这样的效果？ 我们希望当用户将鼠标悬停在图表上时，某个矩形区域会突出显示。

有没有人在此之前完成类似的事情可以帮助我们？

谢谢。

Answer 1

您可以使用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/

Answer 2

我没试过这个，但你可以尝试这样的东西来获得理想的结果：

 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";
        }
     }