Highcharts+Fetch实现动态更新数据,并在页面重载时重绘历史数据

本文介绍了如何使用Highcharts在数据可视化中实现实时动态更新数据的示例,包括多条竖曲线的绘制,通过API获取数据并在用户切换页面时保持历史状态。然而,频繁的网络请求是一个挑战。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

数据可视化中经常需要动态更新数据,而且在用户访问进程期间,页面保留历史状态,本文记录项目中使用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
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值