Javascript HighCharts改变数据，而不是添加新的数据

Javascript HighCharts Changing Data onChange instead of adding new one

本文关键字：数据 添加 HighCharts 改变 Javascript      更新时间：2023-09-26

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

代码如下:

JS:

var图表;

$(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
        });
    });

});


<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>

当改变选择时，我如何从一个数据切换到另一个?

chart.series[0].setData(dat2);
http://api.highcharts.com/highcharts/Series.setData

相关文章：