我使用Highchart和React在页面上显示数据的代码
var chart_nps_amigo = {
title: { text: '% Alunos x total de horas de acesso' },
chart: { height: 200, type: 'column' },
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
title: { text: 'Número de alunos' }
},
tooltip: {
pointFormat: 'Porcentagem: <b>{point.y:.1f} alunos</b>'
},
series: [{
name: 'Alunos',
data: [
['Nunca acessou', 24.2],
['Até 4h', 10.8],
['Até 8h', 22.5],
['Até 12h', 11],
['Até 16h', 9.3],
['Mais de 16h', 4.8]
],
dataLabels: {
enabled: true,
align: 'center',
format: '{point.y:.1f}', // one decimal
y: 10,
style: {
fontSize: '11px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
}
我可以使用下面的代码在页面中显示图表
<HighchartsReact
highcharts={Highcharts}
options={chart_nps_amigo}
allowChartUpdate={true}
/>
使用下面的代码,我能够更新图表
chart_nps_amigo.series[0].data.push( ['32h v1', 55] );
但是我想使用Redux和Redux-Saga用来自Web服务器的值更新图表。
为了模拟这一点,我使用以下代码创建了一个timer事件来更新图表:
const timer = setTimeout(() => {
chart_nps_amigo.series[0].data.push( ['32h v2', 24.8] );
console.log('This will run after 10 second!')
}, 10000);
但10秒钟后,日志代码显示在浏览器控制台中,但图表没有更新。
我该怎么做呢?
2条答案
按热度按时间7eumitmz1#
您应该将配置保持在组件状态并在那里更新数据,就像在这里所做的那样:https://github.com/highcharts/highcharts-react#optimal-way-to-update
bfrts1fy2#
我现在找到了一个解决方案。基于@ SebastianWdzel的答案
我之前描述数据的方式是,它是javascript中的数组,但它不是有效的json对象。
但是,由于我使用redux和redux-saga从Web服务器恢复了这个值,因此我需要一种方法来添加一个有效的Json对象。
当我查看Highcharts文档时,我发现了另一种使用有效Json对象显示序列数据的方法
现在,我将从Web服务器获取的值仅附加到图表的系列数据部分
现在起作用了。