javascript - 在 Highcharts 中显示所有图例项的按钮

Question

感谢this helpful post ，我能够重新格式化图例，以便单击图例项目仅显示该项目，而不是隐藏它并显示所有其他项目。

一旦用户点击图例项目，我希望用户能够点击按钮并再次看到所有图例项目。

这是 fiddle :http://jsfiddle.net/scheltense/qb13g51u/1/

还有代码:

$(function () {
$('#container').highcharts({
     credits: {
         position: {
            align: 'right',
            x: -10,
            y: -1
        },
         text: 'Source: Federal Emergency Management Agency',
         href: 'http://www.FEMA.gov'
    },
    chart: {
        type: 'area'
    },
        title: {
        text: 'Federal Disaster Declarations: 2001-2013',
        align: 'left',
        x: 25,
        y: 5
    },
    subtitle: {
        text: 'The Federal Emergency Management Agency (FEMA) uses these categories to classify federal disasters delcarations.',
        align: 'left',
        x: 25,
        y: 30
    },
    legend: {
        backgroundColor: '#F5F3F2',
        layout: 'vertical',
        symbolHeight: 8,
        symbolWidth: 10,
        align: 'left',
        verticalAlign: 'top',
        floating: true,
        x: 62,
        y: 72,
        padding: 3,
        itemMarginTop: 3,
        itemMarginBottom: 3,
        itemStyle: {
            lineHeight: '8px',
            color: '#000000',
            fontWeight: 'normal'
        },
        reversed: true
        },
    xAxis: {
        categories: ['2001', '\'02', '\'03', '\'04', '\'05', '\'06', '\'07', '\'08', '\'09', '\'10', '\'11', '\'12', '\'13', '\'14*'],
        tickmarkPlacement: 'on',
        title: {
            enabled: true
        }
    },
    yAxis: {
        title: {
            text: 'Declarations'
        },
        max: 100,
        labels: {
            formatter: function () {
                return this.value;
            }
        }
    },
    tooltip: {
        shared: false,
        valueSuffix: ''
    },
    plotOptions: {
        area: {
           events: 
        {
            legendItemClick: function(event) 
            {
                var seriesIndex = this.index;
                var series = this.chart.series;

                for (var i = 0; i < series.length; i++)
                {
                    if (series[i].index != seriesIndex)
                    {
                        series[i].hide();
                    } 
                    else
                    {
                        series[i].show();    
                    }
                }
                return false;
            }
        },

            stacking: 'normal',
            lineColor: '#E5E2E0',
            lineWidth: 0,
            marker: {
                enabled: false
            }
        }
    },
    series: [{
        name: 'Other',
        color: '#9fcad3',
        data: [6, 5, 2, 3, 0, 4, 1, 1, 1, 1, 8, 4, 6, 0],
        marker: {
            symbol: 'circle'
        }
    }, {
        name: 'Hurricane',
        color: '#bb6b85',  
        data: [0, 4, 8, 14, 11, 0, 0, 8, 1, 1, 14, 15, 2, 0],
        marker: {
            symbol: 'circle'
        }
    }, {
        name: 'Severe Winter Weather',
        color: '#bba16b', 
        data: [4, 5, 6, 1, 2, 1, 5, 5, 5, 12, 5, 0, 3, 11],
        marker: {
            symbol: 'circle'
        }
    }, {
        name: 'Flood',
        color: '#6b85bb',
        data: [5, 4, 0, 1, 2, 2, 1, 3, 3, 7, 19, 3, 15, 2],
        marker: {
            symbol: 'circle'
        }
    }, {
        name: 'Severe Storm and Tornado',
        color: '#6bbba1',
        data: [27, 25, 35, 42, 30, 45, 56, 56, 48, 55, 50, 25, 36, 15],
        marker: {
            symbol: 'circle'
        }
    }]

        }, function (chart) {

    var point = chart.series[0].data[8],
        text = chart.renderer.text(
            '*through Aug. 5, 2014',
            point.plotX + chart.plotLeft - 280,
            point.plotY + chart.plotTop + 316
        ).attr({
            zIndex: 5
        })
    .css({
            color: '#909090',
            fontSize: '10px'
        })
    .add(),
        box = text.getBBox();                    
});
});

这是仅显示已单击的图例项的代码部分:

    plotOptions: {
    area: {
       events: 
    {
        legendItemClick: function(event) 
        {
            var seriesIndex = this.index;
            var series = this.chart.series;

            for (var i = 0; i < series.length; i++)
            {
                if (series[i].index != seriesIndex)
                {
                    series[i].hide();
                } 
                else
                {
                    series[i].show();    
                }
            }
            return false;
        }
    },

这是我的第一个 JavaScript 项目，所以如果问题不清楚，我深表歉意，感谢您提供的任何帮助。

非常感谢。

Answer 1

系列对象有一个 show() 函数(http://api.highcharts.com/highcharts#Series.show)。

假设您的按钮的 id 为 showall:

$('#showall').on('click', function() {
    var series =  $('#container').highcharts().series;
    for(i=0;i<series.length;i++) {
        if (!series[i].visible) series[i].show();
    }
});

http://jsfiddle.net/qb13g51u/2/