如何使用 React 制作流图？

Question

目前，我正在尝试为我的网站使用 chart.js 流式传输。然而，我试图通过搜索来做到这一点，但 data 没有改变，下面是我试图为此做的。

这是我的代码：

import "chartjs-plugin-streaming";
import React from "react";
import { Bar } from "react-chartjs-2";
import styled from "styled-components";

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

  const options = {
    scales: {
      xAxes: [
        {
          type: "realtime",
          realtime: {
            onRefresh: function () {
              data.datasets[0].data.push({
                x: Date.now(),
                y: Math.random() * 100,
              });
            },
            delay: 2000,
          },
        },
      ],
    },
  };

  console.log(options);
  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;
`;

Answer 1

您需要像这样更新您在 onRefresh 函数中获得的参数中的数据：

realtime: {
  onRefresh: function(chart) {
    chart.data.datasets[0].data.push({
      x: Date.now(),
      y: Math.random() * 100,
    });
  },
  delay: 2000,
},

如何使用 React 制作流图？

How can I make streaming chart with react?

reactjs

chart.js