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軟件/ highcharts.com /樹/主/樣品/股票/構件/圖表-addseries /

問題是，這個按鈕在網頁和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
        });
    });
});