React chartsJS流式传输实时数据

基础概念

React ChartsJS 是一个基于 React 的图表库，它封装了 Chart.js，使得在 React 应用中使用图表变得更加简单。Chart.js 是一个轻量级的 JavaScript 图表库，支持多种图表类型，并且易于集成到任何 Web 应用中。

流式传输实时数据 指的是数据以连续的方式实时传输到前端应用，通常用于需要实时更新的场景，如股票行情、实时监控等。

类型

折线图：适合展示随时间变化的趋势。
柱状图：适合对比不同类别的数据。
饼图：适合展示各部分占总体的比例。

应用场景

金融分析：实时股票价格、交易量等。
物联网监控：设备状态、传感器读数等。
网站分析：实时访问量、用户行为等。

实现流式传输实时数据的步骤

设置后端服务：使用 WebSocket 或 Server-Sent Events (SSE) 来推送实时数据。
前端集成：在 React 应用中使用 ChartsJS 来展示数据，并通过 WebSocket 或 SSE 接收数据更新。

示例代码

后端（Node.js + WebSocket）

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

setInterval(() => {
  const data = { time: new Date(), value: Math.random() * 100 };
  wss.clients.forEach(client => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(JSON.stringify(data));
    }
  });
}, 1000);

前端（React + ChartsJS）

import React, { useEffect, useRef } from 'react';
import { Line } from 'react-chartjs-2';

const RealTimeChart = () => {
  const chartRef = useRef(null);
  const [data, setData] = React.useState({
    labels: [],
    datasets: [
      {
        label: 'Real-time Data',
        data: [],
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1
      }
    ]
  });

  useEffect(() => {
    const ws = new WebSocket('ws://localhost:8080');

    ws.onmessage = (event) => {
      const newData = JSON.parse(event.data);
      setData(prevData => ({
        labels: [...prevData.labels, newData.time],
        datasets: [{
          ...prevData.datasets[0],
          data: [...prevData.datasets[0].data, newData.value]
        }]
      }));
    };

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

  return (
    <Line ref={chartRef} data={data} options={{ responsive: true }} />
  );
};

export default RealTimeChart;