Highcharts/Highstock動態添加/刪除多個系列

Question

我是一個Java/PHP程序員，無法掌握JavaScript，因此我需要一個應該很簡單的東西。

以圖表這裏：http://www.highcharts.com/stock/demo/compare

這顯示了3個系列，這是所有預定義。我有與我自己的數據相當的設置。

我實際上擁有的是150系列的數據，我希望用戶能夠選擇在沒有頁面刷新的情況下顯示哪些數據。我知道我需要以某種方式使用Chart.addSeries（），並且我已經看了演示，該演示從點擊按鈕添加了一系列：http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/members/chart-addseries/

問題是，此按鈕在Web中都是硬編碼頁和JS：

<button id="button">Add series</button> 

<script> 
$('#button').click(function() { 
    var chart = $('#container').highcharts(); 
    chart.addSeries({ 
     name: 'ADBE', 
     data: ADBE 
    }); 
    $(this).attr('disabled', true); 
}); 
</script> 

我不喜歡150個按鈕，但我當然不希望每個按鈕的獨特功能。有人可以重寫一個我可以拆解的簡短例子嗎？我的JS確實太簡陋了。

也許複選框會很好，但真的任何一種切換都可以。系列可以從圖表中刪除（除了點擊圖例）？

任何人都可以提供一些關於將150系列列表綁定到圖表本身的一些提示嗎？

每個系列必須通過JSON單獨加載。

或者，我應該只加載所有150系列並禁用它們149，允許用戶通過圖例本身切換？

Answer 1

我給你做了一個使用複選框的解決方案。目標複選框是類「選擇」的複選框。 「foreach」函數遍歷所有複選框。名稱成爲當前選擇的「值」，並且由於您沒有爲數據提供任何上下文，因此當前正在手動輸入數據。你可以玩它，讓它爲你工作。

$('#button').click(function() { 
    var buttons = $('.choice'); 
    var chart = $('#container').highcharts(); 

    buttons.each(function(){ 
     var choice = this.value; 

     chart.addSeries({ 
      name: choice, 
      data: ADBE 
     }); 
    }); 
});