如何在React中实现streaming流式图表？chart.js实现时数据不更新如何解决

问题原因 #

你遇到的data不更新问题主要由以下几点导致：

• Chart.js v3及以上版本不再默认注册所有模块和第三方插件，你没有手动注册chartjs-plugin-streaming插件，导致流式功能不生效
• 你使用的x轴xAxes数组配置是Chart.js v2的语法，v3+版本已经改为scales.x对象写法，旧写法无法识别
• 你直接修改组件内部普通常量data，React不会触发组件重渲染，图表也感知不到数据变更

修正后可运行代码 #

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import "chartjs-plugin-streaming";
import React from "react";
import { Bar } from "react-chartjs-2";
import styled from "styled-components";

// 注册Chart核心模块和流式插件
ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
  require('chartjs-plugin-streaming').default
);

const Home = () => {
  const data = {
    datasets: [
      {
        label: "Dataset 1",
        borderColor: "rgb(255, 99, 132)",
        backgroundColor: "rgba(255, 99, 132, 0.5)",
        data: [],
      },
    ],
  };

  const options = {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      // 适配v3+版本的x轴配置写法
      x: {
        type: "realtime",
        realtime: {
          // 直接操作回调传入的chart实例，无需修改外部变量
          onRefresh: function (chart) {
            chart.data.datasets[0].data.push({
              x: Date.now(),
              y: Math.random() * 100,
            });
            // 手动触发图表更新
            chart.update('quiet');
          },
          delay: 2000,
          // 可选配置：保留最近20秒的数据，避免内存占用过高
          duration: 20000
        },
      },
      y: {
        beginAtZero: true,
        max: 100
      }
    },
  };

  return (
    <Main>
      <Bar data={data} options={options} />
    </Main>
  );
};

export default Home;
const Main = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20vw;
  margin-top: 15vh;
  width: 70vw;
  height: 70vh;
`;

核心修改说明 #

• 新增了模块和插件注册逻辑，确保流式插件可以正常被Chart.js识别
• 调整了x轴配置语法，适配当前主流的Chart.js v3/v4版本
• onRefresh回调直接操作传入的chart实例数据，调用chart.update手动触发更新，不需要依赖React状态重渲染，性能更高
• 新增了y轴范围配置和x轴数据保留时长配置，优化显示效果和性能

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