Plotly.js时间序列实时随机图表setInterval报错及实现方案咨询

原有代码主要存在以下问题：

• 调用Plotly.extendTraces仅追加y轴数据，未同步追加x轴时间数据，新增y值无对应时间坐标
• x轴为时间类型，但relayout设置视图范围时使用数值型的cnt变量，和时间轴单位不匹配，导致视图显示异常
• setInterval间隔设为1ms过于密集，容易引发浏览器性能问题和渲染卡顿
• HTML结构存在语法问题，#chart容器未闭合，会导致DOM解析异常
• 初始仅生成单个随机日期，无后续时序推进逻辑，不符合时间序列递增的基本要求

修复后的完整代码如下：

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<style>
#chart {
  width: 100%;
  height: 500px;
}
</style>
</head>
<body>
<div class="wrapper">
  <div id="chart"></div>
</div>
<script>
// 生成递增的随机时间点，每次在上一个时间基础上增加100~1000ms
let lastTime = new Date(1990, 0, 1).getTime();
function getNextTime() {
  lastTime += Math.floor(Math.random() * 900 + 100);
  return new Date(lastTime);
}

function getYData() {
  return Math.random();
}  

// 初始化图表
Plotly.newPlot('chart',[{
  y: [getYData()],
  x: [getNextTime()],
  type: 'scatter'
}], {
  xaxis: {
    title: '时间',
    type: 'date'
  },
  yaxis: {
    title: '随机值'
  }
});

let cnt = 0;
// 间隔设为1000ms即1秒更新一次，可按需调整
setInterval(function(){
  // 同步追加x和y数据
  Plotly.extendTraces('chart', {
    y: [[getYData()]],
    x: [[getNextTime()]]
  }, [0]);
  cnt++;
  
  // 保留最近20条数据，视图自动滚动
  if(cnt > 20) {
    Plotly.relayout('chart',{
      xaxis: {
        // 时间轴范围取最近20秒的时间区间
        range: [lastTime - 20 * 1000, lastTime]
      }
    });
  }
}, 1000);
</script>
</body>
</html>

• 用requestAnimationFrame替代setInterval：和浏览器渲染帧同步，避免setInterval的任务积压问题，适合高帧率的实时可视化场景，流畅度更高
• 固定步长时间序列：如果不需要随机时间间隔，每次给x轴追加固定步长的时间（如每次加1秒），逻辑更简单，时间轴均匀性更好，适合常规监控类时序可视化
• 引入专业模拟数据工具：使用Faker等数据模拟库生成符合业务特征的时序数据，支持自定义数据波动规律、异常点、时间间隔，更贴近真实业务测试场景
• 使用Plotly官方实时数据流封装：直接调用Plotly提供的实时更新工具函数，自动处理x轴范围滚动、数据截断、异常兼容等逻辑，减少手动编码的边界问题

内容的提问来源于stack exchange，提问作者Adi Tech