Javascript HighCharts更改数据onChange而不是添加新数据

Question

我正在使用HighCharts，我目前正在使用addSeries，它只是添加新数据，但我需要替换现有数据并在更改选择框时添加新数据。

以下是代码：

JS：

var chart;

$(function () {

    dat1 = [

        {
            "chall": [
                {
                    "id": "8062",
                    "name": "name 1",
                    "desc": "desc 1",
                    "vfield": 250,
                    "cfield": 100
                },
                {
                    "id": "8061",
                    "name": "name 2",
                    "desc": "desc 2",
                    "vfield": 120,
                    "cfield": 110

                },
                {
                    "id": "8060",
                    "name": "name 3",
                    "desc": "desc 3",
                    "vfield": 76,
                    "cfield": 90

                }
            ]
        }

    ];


    dat2 = [

        {
            "chall": [
                {
                    "id": "8062",
                    "name": "name 4",
                    "desc": "desc 4",
                    "vfield": 250,
                    "cfield": 100
                },
                {
                    "id": "8061",
                    "name": "name 5",
                    "desc": "desc 5",
                    "vfield": 120,
                    "cfield": 110

                },
                {
                    "id": "8060",
                    "name": "name 6",
                    "desc": "desc 6",
                    "vfield": 76,
                    "cfield": 90

                }
            ]
        }

    ];

    var mainData = dat1;
    var cList=[];
    var vList=[];
    var comList=[];

    for (var i = 0; i < mainData[0].chall.length; i++) {

        var obj = mainData[0].chall[i];

        var chlst = obj.name + " [" + obj.id + "]";
        var vl = obj.vfield;
        var cl = obj.cfield;

        cList.push(chlst);
        vList.push(vl);
        comList.push(cl);

    }


    $('#container').highcharts({

        chart: {
            type: 'column'
        },

        title: {
            text: 'Title Here'
        },

        xAxis: {
            categories: cList
        },

        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Left Title'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            },
        },

        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                        this.series.name + ': ' + this.y + '<br/>' +
                        'Total: ' + this.point.stackTotal;
            }
        },

        plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function () {
                            alert('');
                        },
                    },

                },
            },
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black'
                    }
                }
            }
        },

        series: [{
            name: 'V List',
            data: vList

        }, {
            name: 'C List',
            data: comList
        }]
    });

    $('#myselectoptions').change(function() {

        var chart = $('#container').highcharts();

        chart.addSeries({
            data: dat2
        });

    });


});

HTML

<div class="form-group">
    <br><label for="sel">Select:</label>
    <select class="form-control" id="myselectoptions">
        <option value="1">Dat1</option>
        <option value="2">Dat2</option>

    </select>
</div>

<div id="container" style="height: 400px"></div>

更改选择时，如何从一个数据切换到另一个数据？

Answer 1

chart.series[0].setData(dat2);

http://api.highcharts.com/highcharts/Series.setData