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/

问题是，这个按钮在网页和 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
        });
    });
});