javascript - 当您单击关闭系列时,Highcharts 自定义图例 SVG 符号不会消失

标签 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]
          }]
        });
    }); 

最佳答案

解决方案,遵循@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)'
            });
          }
        }
      }
    }
  }
}

关于javascript - 当您单击关闭系列时,Highcharts 自定义图例 SVG 符号不会消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48469019/

相关文章:

javascript - 使用 JQuery 添加几个 DIV

javascript - 在 SVG 中创建可变渐变

javascript - 使用 'rows' 模块中的 Highcharts 'data' 属性

Highcharts 进度条形图

javascript - Highcharts 单击列(不是栏)

javascript - 如何在vue-panzoom中实现zoomIn和zoomout

javascript - jQuery 中的 event.srcElement.value 等效项

javascript - 只显示 div 的第一个子元素

javascript - Highcharts 部分渲染

javascript - 如何使用highchart绘制下面的图表?