数据可视化中经常需要动态更新数据,而且在用户访问进程期间,页面保留历史状态,本文记录项目中使用Highcharts实时绘制数据的实现, 重绘历史数据部分待优化。
适用场景:一个坐标系多条竖曲线,动态从api获取更新的数据并加到曲线上,用户web浏览器在切换页面并回到曲线所在页面时重载所有历史数据,达成保持历史状态的目的。
优点:实现动态更新,不占用客户端浏览器存储
缺点:网络请求频繁
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<div id="ChartContainer" class="chart"></div>
.chart {
height: 300px;
width: auto;
}
Highcharts.setOptions({
global: {
useUTC: false //关闭UTC
},
//图例中两条曲线分别使用的颜色
colors: [
'#78CEFE',
'#556FF6'
]
});
// 在配置文件中定义数据更新间隔
let updateInterval = globalConfig.Up