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

Question

我有一个 show/hide 按钮，它根据按钮文本显示和隐藏图表。如果用户单击 'Hide' 按钮，图表将被隐藏。'Show' 显示图表。但是，如果用户单击 'Hide' 并逐一手动单击所有图例项，文本 'Show' 将保持不变。如果手动选择了所有图例，我需要将其更改为 'Hide'；如果用户手动取消选择所有图例，我还需要将其更改为 'show'。我该如何检查？这是我对 jsfiddle 的 link：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.

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

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

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

Check if all legend items are selected in highcharts?

javascript

jquery

highcharts