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

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

数据可视化中经常需要动态更新数据，而且在用户访问进程期间，页面保留历史状态，本文记录项目中使用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.UpdateInterval;
  //时:分:秒数据格式
  let format1 = '%H:%M:%S';
  //时:分数据格式
  let format2 = '%H:%M';

  // X轴的起点为当天0点
  let startTime = new Date(n