javascript - Highcharts:更改图例符号运行时

Question

拥有带有自定义标记/图标的“散点”图表:

series: [{
     marker: {
         symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
    }
}]

http://jsfiddle.net/sy6nb7fk

当取消选择数据系列时，有什么方法可以替换图例图标吗？

即使用“sun_disabled.png”

Answer 1

您必须执行 update 调用才能更改某些事件的标记。

如果仅使用图例项显示/隐藏系列，则可以在 plotOptions.series.events.legendItemClick 中执行此操作。例如(JSFiddle):

plotOptions: {
    series: {
        events: {
            legendItemClick: function(event) {
                var imageName = (this.visible ? 'snow' : 'sun');

                this.update({ 
                    marker: { 
                        symbol: 'url(http://www.highcharts.com/demo/gfx/'+ imageName +'.png)' 
                    } 
                });
            }
        }
    }
}

如果可以使用 hide() 和 show() 函数调用显示/隐藏系列，您可以使用 Series.events.hide< 执行相同操作 和 Series.events.show。例如(JSFiddle):

series: [{
    events: {
        hide: function() {
            this.update({ 
                marker: { 
                    symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)' 
                } 
            });
        },
        show: function() {
           this.update({ 
                marker: { 
                    symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' 
                } 
            });
        }
    },
    marker: {
        symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
    },
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]