无法更新高图表的数据

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',&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;chart.addSeries(stacks1[0],&nbsp;false); &nbsp;&nbsp;&nbsp;&nbsp;chart.addSeries(stacks1[1],&nbsp;false); &nbsp;&nbsp;&nbsp;&nbsp;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 = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; linkedTo: 'yo',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name:'yo',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: [106.4, 129.2, 144.0, 29.9, 71.5],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stack: 1,&nbsp; &nbsp; &nbsp; &nbsp; }let stacks12 = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; linkedTo:'yo0',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name:'yo0',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: [148.5, 216.4, 30, 176.0, 135.6],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stack: 1,&nbsp; &nbsp; &nbsp; &nbsp; }let stacks2 = [{&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 'yo',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name:'yo',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: [29.9, 71.5, 106.4, 129.2, 144.0],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stack: 2&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id:'yo0',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name:'yo0',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: [30, 176.0, 135.6, 148.5, 216.4],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stack: 2&nbsp; &nbsp; &nbsp; &nbsp; }]Highcharts.chart('container', {&nbsp; &nbsp; chart: {&nbsp; &nbsp; &nbsp; &nbsp; type: 'column'&nbsp; &nbsp; },&nbsp; &nbsp; xAxis: {&nbsp; &nbsp; &nbsp; &nbsp; categories: ['One', 'Two', 'Three', 'Four', 'Five']&nbsp; &nbsp; },&nbsp; &nbsp; plotOptions: {&nbsp; &nbsp; &nbsp; &nbsp; column: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stacking: 'normal'&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; 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>