无法更新 highcharts 的数据

Posted

技术标签:

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

我想在点击按钮时更新图表上的数据。我尝试过使用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 图例。而且也没有添加我的最新数据。

不应添加Series 3。由于linkedTo 我已经添加到我正在添加的新堆栈中。所有堆积的图表都应该由2个图例控制。

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

为什么没有发生?

我需要一个包含 2 个堆栈的堆积柱形图,第二个堆栈应在点击时形成

【问题讨论】:

【参考方案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>

【讨论】:

以上是关于无法更新 highcharts 的数据的主要内容,如果未能解决你的问题,请参考以下文章

以编程方式更改 highcharts 中的图表标题

Highcharts-TypeError:无法读取null的'isResponsiveOptions'属性

highChart数据动态更新

更新Highcharts上的DataLabels位置

如何创建动态更新样条 Highcharts 图表?

思维的灵活性也很重要