高图：更改图例符号运行时

Question

Having a 'scatter' chart with custom marker/icon:

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

http://jsfiddle.net/sy6nb7fk

Is there any way to replace legend icon when data series is deselected?

ie use 'sun_disabled.png'

Answer 1

You will have to do a update call to change the marker on certain events.

You could do this in plotOptions.series.events.legendItemClick if the series is shown/hidden using the legend item only. For example ( 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)' 
                    } 
                });
            }
        }
    }
}

If the series may be shown/hidden using hide() and show() function calls you could do the same using Series.events.hide and Series.events.show . For example ( 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]
}]