Flask实时监控项目中uPlot图表数据点不显示问题排查

1. 时间戳格式必须是毫秒级 #

uPlot默认解析毫秒时间戳作为x轴数据，如果后端返回的是秒级时间戳，直接使用会导致数据被渲染到极早期时间点（1970年左右），肉眼完全看不到。必须把后端的时间戳乘以1000，示例：

// 错误：秒级时间戳
xData = rawData.map(item => item.time);
// 正确：转成毫秒
xData = rawData.map(item => item.time * 1000);

2. 数据结构必须严格匹配uPlot要求 #

uPlot只认二维数组：第一个元素是x轴全量数据，后续每个元素对应一个y轴系列。不要直接传递后端返回的对象数组，必须做格式转换，示例：

// 后端返回的原始数据（对象数组）
const raw = [{time: 1690000000, cpu: 30}, {time: 1690000010, cpu: 45}];
// 转换成uPlot需要的格式
const uData = [
  raw.map(i => i.time * 1000), // x轴数据
  raw.map(i => i.cpu)          // CPU使用率系列数据
];

3. 检查series配置的dataIdx是否对应正确 #

每个y系列的dataIdx必须和uData数组的索引一一对应，x轴的series不需要配置，示例：

const opts = {
  series: [
    {}, // x轴占位，无需配置
    {
      label: 'CPU使用率',
      dataIdx: 1 // 对应uData[1]，即CPU系列数据
    }
  ]
};

如果dataIdx写错，uPlot找不到对应的数据，自然不会渲染数据点。

4. 确认数据范围在图表可视区内 #

如果你的y值超出了配置的scale范围，会被渲染到画布外面。比如你设了scale.y.max = 100，但CPU使用率返回了110，数据点就会跑到画布上方看不到。可以临时把scale的min/max设为null，让uPlot自动适配：

const opts = {
  scales: {
    y: {
      min: null, // 自动计算最小值
      max: null  // 自动计算最大值
    }
  }
};

5. 实时更新必须用setData方法 #

如果是定时拉取数据更新图表，不要每次都重新创建uPlot实例，必须用plot.setData(newData)。而且新数据的结构要和初始数据完全一致，比如x轴的长度要和每个y系列的长度相同。

6. 确保uPlot的CSS正确引入 #

如果没引入uPlot的官方CSS，默认的点样式可能是透明或者和背景色一致，看起来像是没渲染。必须同时引入CSS和JS：

<link href="https://cdn.jsdelivr.net/npm/uplot@1.6.24/dist/uPlot.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/uplot@1.6.24/dist/uPlot.min.js"></script>

完整修正示例 #

假设你的Flask接口/api/metrics返回JSON数组，前端处理代码应该是这样：

async function loadData() {
  const res = await fetch('/api/metrics');
  const rawData = await res.json();
  
  // 转换为uPlot格式
  const plotData = [
    rawData.map(item => item.timestamp * 1000),
    rawData.map(item => item.cpu_usage),
    rawData.map(item => item.mem_usage)
  ];

  // 初始化uPlot（只执行一次）
  if (!window.plot) {
    const opts = {
      width: 800,
      height: 400,
      series: [
        {},
        {label: 'CPU', stroke: '#ff3333'},
        {label: '内存', stroke: '#3366ff'}
      ]
    };
    window.plot = new uPlot(opts, plotData, document.getElementById('chart'));
  } else {
    // 实时更新数据
    window.plot.setData(plotData);
  }
}

// 每2秒更新一次
setInterval(loadData, 2000);

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