Highcharts：尝试更新系列

Erkan Yilmaz 发表于 Dev

尔坎·伊尔马兹

我正在尝试通过单击按钮更新Highchart系列。由于未知原因，该系列无法更新。有谁可以帮助我吗？

这是一个jsfiddle链接：http : //jsfiddle.net/cSx5c/1/

请参阅下面的代码：

 chart: new Highcharts.Chart({
    chart: {
        renderTo:'container',
        type: 'bar',
        backgroundColor: 'transparent',
        height:200
    },
    tooltip: {
        positioner: function () {
            return {x:0,y:0}
        },
        formatter: function() {
            return '<b>' + this.series.name + '</b>: <b>' + this.y + ' uur</b>';},
        shadow: false,
        borderWidth: 0,
        backgroundColor: 'rgba(0,0,0,0.1)'
    },
    credits: {
        enabled: false
    },
    title: {
        text: 'Shift Overview'
    },
    xAxis: {
        lineWidth: 0,
        minorGridLineWidth: 0,
        lineColor: 'transparent',
        minorTickLength: 0,
        tickLength: 0,
        labels: {
            enabled: false
        },
        height: 50
    },
    yAxis: {
        categories: ['7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
        tickmarkPlacement: 'on',
        height: 50
    },
    legend: {
        reversed: false
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{"name": "Production", "data": [3.5], "color":"green"}, {"name": "Changeover", "data": [1.5], "color":"lightblue"}, {"name": "Technical Failure", "data": [5], "color":"red"}, {"name": "Production", "data": [2], "color":"green"}]
});

这是添加新系列按钮的脚本：

$('#button').click(function() {
    var chart = $('#container').highcharts();
    var new_serie = [{"name": "Production", "data": [3.5], "color":"green"}, {"name": "Changeover","data": [3.5], "color":"lightblue"}, {"name": "Technical Failure", "data": [5], "color":"red"}];
    //alert(new_serie);
    chart.series[0].update({series: new_serie}, true);
});

the_dude

.update（）方法仅更新现有系列的选项。要更新，我认为您需要删除现有系列，然后一次添加一个新系列。一种替代方法是删除图表并使用新数据重新创建它。我显示第一个更新如下：

$('#button').click(function () {
        var chart = $('#container').highcharts();
        var new_serie = [{
            "name": "Production",
                "data": [3.5],
                "color": "green"
        }, {
            "name": "Changeover",
                "data": [3.5],
                "color": "lightblue"
        }, {
            "name": "Technical Failure",
                "data": [5],
                "color": "red"
        }];
        //alert(new_serie); // returns objects
        for (var i = chart.series.length-1; i>=0; i--) {
            chart.series[i].remove();
        }
        for (var y = new_serie.length-1; y >= 0; y--) {
            chart.addSeries(new_serie[y]);
        }
    });