当您单击关闭系列时,Highcharts自定义图例SVG符号不会褪色

时间:2018-01-26 20:24:21

标签: javascript highcharts

使用自定义图例符号时,通过单击图例关闭系列会淡化图例文本,但不会淡化自定义符号。

与使用淡化的内置图例符号相比,这会产生不稳定性。

此处示例 - http://jsfiddle.net/hnc27nf2/

$(function() {
    $('#container').highcharts({
          series: [{
            data: [],
            id: 'main',
            marker: {
              symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
            }
          }, {
            linkedTo: 'main',
            data: [1, 3, -2, -4]
          }]
        });
    }); 

1 个答案:

答案 0 :(得分:0)

解决方案,关注@ Core972评论:

我们可以淡出元素但改变元素的不透明度:http://jsfiddle.net/BlackLabel/Lzgexfvo/

plotOptions: {
  series: {
    events: {
      legendItemClick: function() {
        if (this.legendSymbol) {
          if (this.visible) {
            this.legendSymbol.css({
              opacity: 0.4,
              filter: 'alpha(opacity=40)'
            });
          } else {
            this.legendSymbol.css({
              opacity: 1,
              filter: 'alpha(opacity=100)'
            });
          }
        }
      }
    }
  }
}