javascript - 检查是否在 highcharts 中选择了所有图例项？

Question

我有一个显示/隐藏按钮，它根据按钮文本显示和隐藏图表。如果用户单击“隐藏”按钮，图表将被隐藏。“显示”将显示图表。但是，如果用户单击“隐藏”并逐一手动单击所有图例项，则文本“显示”保持不变。如果手动选择了所有图例，我需要将其更改为“隐藏”，如果用户手动取消选择所有图例，我还需要将其更改为“显示”。我该如何检查？这是我到 jsfiddle 的链接:https://jsfiddle.net/ytykG/12/

$(function () {
var chart;
$(document).ready(function () {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + '°C';
            }
        },
        legend: {
            //enabled:false,
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            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]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    }, function (chart) {

        $('#btn').click(function () {
            for (i = 0; i < chart.series.length; i++) {
                if ($(this).text() === 'Hide') {
                    chart.series[i].hide();
                } else {
                    chart.series[i].show();
                }
            }
            var changeText = ($(this).text() == 'Hide') ? 'Show' : 'Hide';
            $(this).text(changeText);

        });
    });
});
});

HTML:

<script src="http://code.highcharts.com/highcharts.js"></script>
  <div id="container" style="height: 400px"></div>

Answer 1

我添加了以下代码，在您点击图例项时运行。

plotOptions: {
    line: {
        events: {
            legendItemClick: function (e) {
                var c = e.currentTarget.visible ? 0 : 1;
                for(i = 0; i < chart.series.length; i++) {
                    if (chart.series[i] != e.currentTarget && chart.series[i].visible) {
                        c++;
                    }
                    if (chart.series.length == c) {
                        $('#btn').text('Hide');
                    } else if (c == 0) {
                        $('#btn').text('Show'); 
                    }
                }
            }
        }
 },

这是 fiddle .

想法是计算可见系列的数量，并将其与系列总数进行比较。如果可见系列的数量与总数相同，则显示所有系列，因此按钮变为“隐藏”。如果不可见，则按钮变为“显示”

请注意，legendItemClick 在它隐藏/显示系列 之前运行。所以我使用 e.currentTarget 获取被点击的系列，然后检查它是否可见以补偿计数。如果是可见的，那么这个函数运行完之后，就不再是可见的了。