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

我有一个显示/隐藏按钮，它根据按钮文本显示和隐藏图表。如果用户单击“隐藏”按钮，图表将隐藏。“显示”将显示图表。但是，如果用户单击“隐藏”并逐个手动单击所有图例项，则文本“显示”保持不变。如果手动选择所有图例，我需要将其更改为“隐藏”，如果用户手动取消选择所有图例，则需要将其更改为“显示”。 我怎么检查这个？ 以下是我到JSFIDLE的链接：

$（函数（）{
var图；
$（文档）.ready（函数（）{
图表=新的高点图表。图表({
图表：{
renderTo:'容器'，
键入：“行”，
marginRight:130，
marginBottom:25
},
标题：{
文字：“月平均气温”，
x:-20/中心
},
副标题:{
文字：“来源：WorldClimate.com”，
x:-20
},
xAxis：{
类别：[‘一月’、‘二月’、‘三月’、‘四月’、‘五月’、‘六月’，
‘七月’、‘八月’、‘九月’、‘十月’、‘十一月’、‘十二月’]
},
亚克斯：{
标题：{
文字：“温度（°C）”
},
绘图线：[{
值：0，
宽度：1，
颜色：'#808080'
}]
},
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
“+this.x+”：“+this.y+”°C”；
}
},
图例：{
//启用：false，
布局：“垂直”，
对齐：“右”，
垂直排列：“顶部”，
x:-10，
y:100，
边框宽度：0
},
系列：[{
名称:"东京",，
数据：[7.0,6.9,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9,9.6]
}, {
名称：'纽约'，
数据：[-0.2,0.8,5.7,11.3,17.0,22.0,24.8,24.1,20.1,14.1,8.6,2.5]
}, {
名称：“柏林”，
数据：[-0.9,0.6,3.5,8.4,13.5,17.0,18.6,17.9,14.3,9.0,3.9,1.0]
}, {
名称：“伦敦”，
数据：[3.9,4.2,5.7,8.5,11.9,15.2,17.0,16.6,14.2,10.3,6.6,4.8]
}]
}，功能（图表）{
$（'#btn'）。单击（函数（）{
对于（i=0；i

HTML:

---

我添加了以下代码，当您单击图例项时，会运行这些代码

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'); 
                    }
                }
            }
        }
 },

plotOptions：{
行：{
活动：{
legendItemClick:函数（e）{
var c=e.currentTarget.visible？0:1；
对于（i=0；i

这是你的电话号码

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

---

请注意，

legendItemClick

在隐藏/显示序列之前运行。因此，我使用

e.currentTarget

获取被单击的序列，然后检查它是否可见以补偿计数。如果它可见，则此函数完成运行后，它将不再可见。

您可以告诉我们e

this

而不是

e.currentTarget

。非常感谢。我还有一个问题。有没有办法将该按钮放在图例项下，或者将其显示/隐藏为图例项？在“伦敦”下在本例中，没有加载您提供的jsfiddle，因为您需要在

http

中添加“s”，以便导入

highcharts

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

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'); 
                    }
                }
            }
        }
 },