Highcharts / Highstock动态添加/删除多个系列

Question

I'm a Java/PHP programmer with an unreasonable inability to grasp Javascript, so I need a hand with something that should be simple.

Take the chart here: 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.

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/

The thing is, this button is hard coded in both the web page and the 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.

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?

Each series must be loaded individually via JSON.

Or, should I just load all 150 series and disable 149 of them, allowing the user to toggle via the legend itself?

Answer 1

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.

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

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

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