Highcharts - 显示工具提示时更改图表的不透明度

时间:2016-07-04 14:18:47

标签: highcharts

显示工具提示时,是否可以更改图表中所有数据点的不透明度,但当前显示标签的数据点除外?

即。在默认柱形图中,当鼠标在列上移动时,该列将突出显示一点。对于同一事件,我希望所有其他列的不透明度变为50%。

由于

1 个答案:

答案 0 :(得分:1)

如果是图表,可以使用point mouseOver和mouseOut事件回调函数。在此活动中,您可以更新特定点的颜色。 http://api.highcharts.com/highcharts#plotOptions.area.point.events.mouseOver http://api.highcharts.com/highcharts#plotOptions.area.point.events.mouseOut

如果您使用rgba颜色,则可以设置不透明度。

  point: {
    events: {
      mouseOver: function() {
        Highcharts.each(this.series.data, function(p, i) {
          p.update({
            color: 'rgba(50,120,60,0.5)'
          }, false)
        });
        this.update({
          color: 'rgba(50,120,60,1)'
        });
      },
      mouseOut: function() {
        Highcharts.each(this.series.data, function(p, i) {
          p.update({
            color: 'rgba(50,120,60,1)'
          }, false)
        });
        this.series.chart.redraw();
      },
    }
  }

在这里你可以看到一个如何工作的例子: http://jsfiddle.net/4q10q8r1/

亲切的问候。