无法更新 highcharts 的数据
Posted
技术标签:
【中文标题】无法更新 highcharts 的数据【英文标题】:Not able to update data for 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 个堆栈的堆积柱形图,第二个堆栈应在点击时形成
【问题讨论】:
【参考方案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 的数据的主要内容,如果未能解决你的问题,请参考以下文章