在实时监控、IoT、金融行情等场景中，前端需要持续接收数据并动态更新图表。本文将通过一个完整示例，讲解如何在 React 中结合 WebSocket 实现实时数据可视化。

---

一、TL;DR（干货/结论）

在 React 中实现实时图表的核心思路：

1. 使用 WebSocket 获取实时数据

2. 使用 Highcharts 渲染图表

3. 通过 addPoint 或 setData 动态更新数据

适用于大多数实时数据展示场景。

二、实现思路

整体流程如下：

• WebSocket 持续推送数据

• React 组件接收数据

• Highcharts 更新图表

关键点在于：避免频繁重渲染，而是直接更新图表实例

三、安装依赖

npm install highcharts highcharts-react-official

四、最小可运行示例（核心代码）

import React, { useEffect, useRef } from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

export default function RealTimeChart() {
  const chartComponentRef = useRef(null);

  const options = {
    title: { text: "实时数据图表" },
    series: [{
      data: []
    }]
  };

  useEffect(() => {
    const ws = new WebSocket("wss://example.com/data");

    ws.onmessage = (event) => {
      const chart = chartComponentRef.current.chart;
      const value = JSON.parse(event.data).value;

      chart.series[0].addPoint(value, true, true);
    };

    return () => ws.close();
  }, []);

  return (
    <HighchartsReact
      highcharts={Highcharts}
      options={options}
      ref={chartComponentRef}
    />
  );
}

---

五、关键技术点解析

1. 使用 useRef 获取图表实例

const chart = chartComponentRef.current.chart;

👉 避免 React 重新渲染，提高性能

---

2. 使用 addPoint 实现实时更新

chart.series[0].addPoint(value, true, true);

参数说明：

• value：新增数据点

• true：立即重绘

• true：移除旧数据（保持固定长度）

---

3. WebSocket 数据接入

const ws = new WebSocket("wss://example.com/data");

适用于：

• 实时监控系统

• IoT设备数据

• 金融行情

---

六、进阶优化（高并发场景）

批量更新数据（提升性能）

chart.series[0].setData(newDataArray);

👉 适用于：

• 高频数据更新

• 大数据量场景

---

控制刷新频率（防止卡顿）

setInterval(() => {
  // 批量更新逻辑
}, 1000);

---

七、常见问题 FAQ

Q1：React 实时图表推荐用什么方案？

A：常见做法是 WebSocket + Highcharts，通过 addPoint 或 setData 实现动态更新，适合大多数实时可视化场景。

---

Q2：为什么不直接用 setState 更新？

A：频繁 setState 会导致组件重渲染，性能较差。直接操作图表实例更高效。

---

Q3：如何控制图表数据长度？

A：可以在 addPoint 中设置第三个参数为 true，实现自动移除旧数据。

---

八、适用场景

该方案适用于：

• 实时监控系统（服务器状态、设备数据）

• 金融行情（股票、交易数据）

• IoT数据可视化

---

总结

在 React 中实现实时数据图表，推荐使用：

👉 WebSocket + Highcharts + addPoint

优势在于：

• 实现简单

• 性能稳定

• 支持复杂交互

适合企业级实时数据展示需求。

---