React.js使用Chart.js时图表无法加载实时数据问题求助

你的图表显示异常是以下几个问题叠加导致的：

• 实时流功能依赖chartjs-plugin-streaming插件，该插件要求x轴type必须显式设置为realtime，你当前设置为time，写在x轴配置里的realtime配置块完全不会被插件解析，实时滚动、自动刷新逻辑都不会触发。
• 时间类型轴（包含time/realtime两种）必须搭配对应时间适配器才能正常解析时间戳，缺少适配器会导致数据点x坐标解析失败，所有点堆叠在轴起始位置，和你截图里的异常表现一致。
• 配置语法和你使用的Chart.js版本不匹配：如果是v3及以上版本，轴配置的key是x/y，轴标签配置字段是title；如果是v2版本，xAxes/yAxes必须是数组格式，你当前的写法会导致轴配置整体失效。
• 你代码中引用了onRefresh回调但没有实现逻辑，这个回调是实时流插件用来追加新数据的入口，缺失时不会有新数据写入数据集。
• 实时流插件、时间适配器都需要手动注册到Chart.js实例后才能生效，未注册时相关配置不会被识别。

1. 先安装缺失的依赖包

npm install chartjs-plugin-streaming chartjs-adapter-date-fns date-fns

2. 替换原有代码为以下可运行版本（适配Chart.js v3+，也是目前主流版本）

import { Chart, registerables } from 'chart.js';
import 'chartjs-adapter-date-fns';
import { StreamingPlugin } from 'chartjs-plugin-streaming';
import { Line } from 'react-chartjs-2';
// 保留你原有的颜色依赖引入
// import chartColors from '你的chartColors路径';
// import color from 'chartjs-color';

// 注册Chart.js内置模块和实时流插件
Chart.register(...registerables, StreamingPlugin);

// 实现刷新回调，每次刷新时给两个数据集追加带当前时间戳的随机值
const onRefresh = (chart) => {
  const currentTime = Date.now();
  chart.data.datasets[0].data.push({ x: currentTime, y: Math.random() * 100 });
  chart.data.datasets[1].data.push({ x: currentTime, y: Math.random() * 100 });
};

const config = {
  type: 'line',
  data: {
    datasets: [{
      label: 'Dataset 1 (linear interpolation)',
      backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
      borderColor: chartColors.red,
      fill: false,
      lineTension: 0,
      borderDash: [8, 4],
      data: []
    }, {
      label: 'Dataset 2 (cubic interpolation)',
      backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
      borderColor: chartColors.blue,
      fill: false,
      cubicInterpolationMode: 'monotone',
      data: []
    }]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Data labels plugin sample'
      }
    },
    scales: {
      x: {
        type: 'realtime',
        realtime: {
          duration: 20000,
          refresh: 1000,
          delay: 2000,
          onRefresh: onRefresh
        }
      },
      y: {
        type: 'linear',
        display: true,
        title: {
          display: true,
          text: 'value'
        }
      }
    }
  }
};

function Streaming() {
  return (
    <div className="chart">
      <Line {...config} />
    </div>
  );
}

export default Streaming

如果你使用的是Chart.js 2.x版本，只需对应调整配置语法：将scales下的x/y改回数组格式的xAxes/yAxes，轴标签字段改回scaleLabel，插件注册改用Chart.plugins.register(StreamingPlugin)即可，核心要求不变：x轴type必须设为realtime、正确安装注册时间适配器、实现onRefresh回调追加数据。

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