无法更新高位图表的数据

Question

我想在单击按钮时更新图表上的数据。我尝试使用addSeries和redraw。两者都没有使用最新信息来更新我的图表。

这里出了什么问题？

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图例。而且也不添加我的最新数据。

不应添加Series 3。由于linkedTo，我已添加到要添加的新堆栈中。所有堆叠的图表应由2个图例控制。

单击时，我只想向现有图表添加一组新数据。

为什么不发生？

我需要一个带有2个堆栈的堆积柱形图，单击时应形成第二个堆栈

Answer 1

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

您正在尝试添加stacks1，其中包含两组选项。如果分别添加两个系列，则可以使用。您还可以通过将第二个参数设置为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>

Answer 2

您需要两次使用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