Chart.js 4实时更新图表X轴滚动功能实现求助

一、修复X轴滚动（适配Bootstrap布局） #

你之前的双层div滚动方案失效，大概率是Bootstrap的默认布局样式（如容器内边距、overflow规则）干扰了自定义CSS。可以简化结构并调整样式：

修改后的HTML（结合Bootstrap） #

<div class="container my-4">
  <!-- 外层容器负责滚动 -->
  <div class="chart-scroll-wrapper">
    <canvas id="updating-chart"></canvas>
  </div>
</div>

对应CSS（避免与Bootstrap冲突） #

.chart-scroll-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  /* 添加内边距避免滚动条遮挡图表 */
  padding-bottom: 10px;
}

.chart-scroll-wrapper canvas {
  /* 设置图表最小宽度，确保内容超出容器时触发滚动 */
  min-width: 1200px;
  height: 500px;
}

二、限制数据量，避免图表过载 #

即使滚动正常，无限添加数据会导致性能下降，建议只保留最近的N个数据点：

修改addData函数 #

function addData(chart, label, data) {
  // 添加新数据
  chart.data.labels.push(label);
  chart.data.datasets.forEach((dataset) => {
    dataset.data.push(data);
  });

  // 保留最近100条数据（可根据需求调整数量）
  const maxDataCount = 100;
  if (chart.data.labels.length > maxDataCount) {
    // 删除最早的一条数据
    chart.data.labels.shift();
    chart.data.datasets.forEach((dataset) => {
      dataset.data.shift();
    });
  }

  chart.update();
}

三、优化异步更新逻辑，避免请求堆积 #

原setInterval可能导致后端请求堆积（如果响应慢于500ms），换成setTimeout确保上一次请求完成后再更新：

重构更新逻辑 #

async function updateChartLoop() {
  try {
    const result = await pick_numb();
    addData(myLiveChart, label_index++, result);
  } catch (err) {
    console.error("数据更新失败:", err);
  } finally {
    // 完成后等待500ms再发起下一次更新
    setTimeout(updateChartLoop, 500);
  }
}

// 启动实时更新
updateChartLoop();

额外提示 #

• 如果使用Chart.js 3.x+版本，可以尝试启用内置的scales.x.ticks.maxRotation和scales.x.ticks.minRotation优化X轴标签显示，避免标签重叠；
• 若需要查看历史数据，可配合按钮实现“加载更多”功能，而非一次性加载所有数据。

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