檢查所有圖例項目是否在高圖中選擇？

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來得到被點擊的系列，然後檢查它是否可見或不能補償計數。如果它是可見的，那麼在該功能完成運行後，它將不再可見。