无法更新高图表的数据

Question

我想在按钮点击时更新图表上的数据。我已尝试使用 和 。两者都没有用最新信息更新我的图表。addSeriesredraw这是怎么回事？let stacks1 = [{            linkedTo: 'yo',                name:'yo',            data: [106.4, 129.2, 144.0, 29.9, 71.5],            stack: 1,        }, {            linkedTo:'yo0',                name:'yo0',            data: [148.5, 216.4, 30, 176.0, 135.6],            stack: 1,        }]let stacks2 = [{                        id: 'yo',                name:'yo',            data: [29.9, 71.5, 106.4, 129.2, 144.0],            stack: 2        }, {                id:'yo0',                name:'yo0',            data: [30, 176.0, 135.6, 148.5, 216.4],            stack: 2        }]Highcharts.chart('container', {    chart: {        type: 'column'    },    xAxis: {        categories: ['One', 'Two', 'Three', 'Four', 'Five']    },    plotOptions: {        column: {            stacking: 'normal'        }    },    series: stacks2});$('#btn').on('click', function(){$('#container').highcharts().addSeries(stacks1);$('#container').highcharts().redraw();});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://code.highcharts.com/highcharts.js"></script><div id="container" style="height: 400px"></div><button type="button" id='btn'>Click Me!</button>如您所见，它正在添加一个随机图例。也没有添加我的最新数据。Series 3它不应该添加 .由于我已添加到我正在添加的新堆栈中。所有堆叠图表应由 2 个图例控制。Series 3linkedTo单击时，我只想向现有图表添加一组新数据。为什么没有发生这种情况？我需要一个具有2个堆栈的堆叠柱形图，第二个堆栈应在单击时形成

Answer 1

您需要使用方法两次：addSeries

$('#btn').on('click', function() {
    chart.addSeries(stacks1[0], false);
    chart.addSeries(stacks1[1], false);

    chart.redraw();
});

---

现场演示：http://jsfiddle.net/BlackLabel/4aqn02s8/

API 参考：https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries

Answer 2

addSeries 期望单个系列的配置选项作为第一个参数 - https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries。

您正在尝试添加堆栈1，其中包含两组选项。如果分别添加两个系列，则有效。您还可以通过将第二个参数设置为 true 来使用 addSeries 命令重绘图表。请参阅下面的代码/代码段。

let stacks11 = {

            linkedTo: 'yo',

                name:'yo',

            data: [106.4, 129.2, 144.0, 29.9, 71.5],

            stack: 1,

        }

let stacks12 = {

            linkedTo:'yo0',

                name:'yo0',

            data: [148.5, 216.4, 30, 176.0, 135.6],

            stack: 1,

        }

let stacks2 = [{        

                id: 'yo',

                name:'yo',

            data: [29.9, 71.5, 106.4, 129.2, 144.0],

            stack: 2

        }, {

                id:'yo0',

                name:'yo0',

            data: [30, 176.0, 135.6, 148.5, 216.4],

            stack: 2

        }]

Highcharts.chart('container', {

    chart: {

        type: 'column'

    },

    xAxis: {

        categories: ['One', 'Two', 'Three', 'Four', 'Five']

    },

    plotOptions: {

        column: {

            stacking: 'normal'

        }

    },

    series: stacks2

});

$('#btn').on('click', function(){

$('#container').highcharts().addSeries(stacks11);

$('#container').highcharts().addSeries(stacks12,true);

//$('#container').highcharts().redraw();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>

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

<button type="button" id='btn'>Click Me!</button>