无法更新 highcharts 的数据答案

【问题标题】：Not able to update data for highcharts无法更新 highcharts 的数据
【发布时间】：2020-09-26 22:27:42
【问题描述】：

我想在点击按钮时更新图表上的数据。我尝试过使用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 个堆栈的堆积柱形图，第二个堆栈应在点击时形成

【问题讨论】：

标签： javascript jquery json charts highcharts

【解决方案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

【讨论】：

【解决方案2】：

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

您正在尝试添加包含两组选项的 stacks1。如果您分别添加两个系列，它可以工作。您还可以通过将第二个参数设置为 true 来使用 addSeries 命令重绘图表。请参阅下面的代码/sn-p。

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>

【讨论】：