Changing Highcharts data series type dynamically

问题:

I have Highcharts with multiple series and 'select' for each series. My aim is to change series type via 'select'.

$('#ChType').change(function () {
    var series = chart.series[0]
    var newType = $('#ChType').val();
    changeType(series, newType);
})

$('#ChType2').change(function () {
    var series = chart.series[1]
    var newType = $('#ChType2').val();
    changeType(series, newType);
})

function changeType(series, newType) {
    var dataArray = [],
        points = series.data;
    series.chart.addSeries({
        type: newType,
        name: series.name,
        color: series.color,
        data: series.options.data
    }, false);
    alert(series.name);
    series.remove();
}

I understand that every time the type gets changed, series will get removed from it's current position in an array and added to the end. Currently I'm able to change only the series that is in the position series[0].

How can I change any other series and not just the series[0]?

I did see the similar question here but couldn't quite get it to work.

My sample code in jsFiddle.

回答1:

You can use v3.0 highcharts included series.update() method, which allows to change type of chart, dynamically.

http://jsfiddle.net/8Sg8K/1

chart.series[0].update({
                type: "column"
            });

回答2:

Why didn't you include the loop that you linked to in the similar question?

 $('#ChType').change(function(){
     var series;

     for ( i = 0 ; i < chart.series.length ; i++ ) {
            if ( chart.series[i].name == 'MyData1' ) {
                series = chart.series[i];

            }                
        } 
                 //var series = chart.series[0]
                 var newType = series.type == $('#ChType').val() ? $('#ChType').val()

Put that in place for each type - http://jsfiddle.net/waBck/5/