javascript Highcharts/Highstock 动态添加/删除多个系列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16481925/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highcharts/Highstock dynamically add/remove multiple series
提问by Chelmet
I'm a Java/PHP programmer with an unreasonable inability to grasp Javascript, so I need a hand with something that should be simple.
我是一名 Java/PHP 程序员，完全无法掌握 Javascript，所以我需要一些应该很简单的东西。
Take the chart here: http://www.highcharts.com/stock/demo/compare
在此处获取图表：http: //www.highcharts.com/stock/demo/compare
This shows 3 series, which are all predefined. I have the equivalent set up with my own data.
这显示了 3 个系列，它们都是预定义的。我使用自己的数据进行了等效设置。
What I actually have is 150 series of data, and I want the user to be able to choose which to display without a page refresh. I know I need to use Chart.addSeries() in some way, and I've looked at the demo which adds a series from a button click: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/members/chart-addseries/
我实际拥有的是 150 个系列的数据，我希望用户能够在不刷新页面的情况下选择要显示的数据。我知道我需要以某种方式使用 Chart.addSeries()，并且我查看了通过单击按钮添加系列的演示：http: //jsfiddle.net/gh/get/jquery/1.7.2/ highslide-software/highcharts.com/tree/master/samples/stock/members/chart-addseries/
The thing is, this button is hard coded in both the web page and the JS:
问题是，这个按钮在网页和 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>
I don't fancy 150 buttons, but I certainly don't want a unique function per button. Can someone rewrite a short example that I could cannibalise? My JS really is too rudimentary.
我不喜欢 150 个按钮，但我当然不希望每个按钮都有一个独特的功能。有人可以重写一个我可以蚕食的简短示例吗？我的JS真的太初级了。
Maybe check-boxes would be fine, but really any kind of toggle would work. Can series be removed from the chart (other than clicking on the legend)?
也许复选框会很好，但实际上任何类型的切换都可以工作。可以从图表中删除系列吗（点击图例除外）？
Can anyone provide some tips on tying the list of 150 series to the chart itself?
任何人都可以提供一些将 150 系列列表与图表本身联系起来的提示吗？
Each series must be loaded individually via JSON.
每个系列必须通过 JSON 单独加载。
Or, should I just load all 150 series and disable 149 of them, allowing the user to toggle via the legend itself?
或者，我是否应该只加载所有 150 个系列并禁用其中的 149 个，从而允许用户通过图例本身进行切换？
回答by
I made you a solution using check-boxes. The targeted checkboxes are the ones with class "choice". The "foreach" function goes through all the checkboxes. The name becomes the "value" of the current choice, and since you didn't provide any context for the data the data is currently being fed manually. You can play with it and make it work for you.
我使用复选框为您提供了解决方案。目标复选框是具有“选择”类的复选框。“foreach”函数遍历所有复选框。该名称成为当前选择的“值”，并且由于您没有为数据提供任何上下文，因此当前正在手动输入数据。你可以玩它，让它为你工作。
$('#button').click(function() {
var buttons = $('.choice');
var chart = $('#container').highcharts();
buttons.each(function(){
var choice = this.value;
chart.addSeries({
name: choice,
data: ADBE
});
});
});
