高图表一次显示/隐藏或关闭所有系列

Question

See my screenshot. How do I make a button/link which show/hide or toggle off all series at once?

So when I click the button it toggles off the 3 series (Mannen, Vrouwen, Totaal) at once.

I think I have to do something in the Highcharts legendItemClick function?

Update:

I added below code to my existing JS file, but I don't get any result?

_showHideSeries: function (chart) {

        $button = $('#button');

        $button.click(function() {
            var series = chart.series[0];
            if (series.visible) {
                $(chart.series).each(function(){
                    //this.hide();
                    this.setVisible(false, false);
                });
                chart.redraw();
                $button.html('Show series');
            } else {
                $(chart.series).each(function(){
                    //this.show();
                    this.setVisible(true, false);
                });
                chart.redraw();
                $button.html('Hide series');
            }
        });


      },

Answer 1

You can loop through your series, and use the series.hide() and `series.show() functions:

    $(document).on('click', '#hide-all', function() {
        $.each(chart.series, function(i, ser) {
            ser.hide();
        });
    });

Fiddle:

• http://jsfiddle.net/jlbriggs/cb3csxh7/

Reference:

• http://api.highcharts.com/highcharts/Series.hide
• http://api.highcharts.com/highcharts/Series.show

Answer 2

Better use- (works much faster)

$(chart.series).each(function(){
    //this.hide();
    this.setVisible(false, false);
});
chart.redraw();

Thanks to this genius-

How can i hide all the Series in highcharts at a time