使用 react 和 chartjs 绘制流式实时数据

Question

I want to stream data in real-time with this plugin . But currently, my chart displays the same dataset and remains static. Even though I am following the react example of this website Below is the code I used:

 import React from 'react'; import {Line} from 'react-chartjs-2'; import 'chartjs-plugin-streaming'; var createReactClass = require('create-react-class'); const data = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'Price', fill: false, lineTension: 0.1, backgroundColor: 'rgba(75,192,192,0.4)', borderColor: 'rgba(75,192,192,1)', borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0.0, borderJoinStyle: 'miter', pointBorderColor: 'rgba(75,192,192,1)', pointBackgroundColor: '#fff', pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: 'rgba(75,192,192,1)', pointHoverBorderColor: 'rgba(220,220,220,1)', pointHoverBorderWidth: 2, pointRadius: 1, pointHitRadius: 10, data: [65, 59, 80, 81, 56, 55, 40] } ] }; export default createReactClass({ displayName: 'LineExample', render() { return ( <div> <Line data={data} options={{ scales: { xAxes: [{ realtime: { onRefresh: function(chart) { data.dataset.data.push({ x: Date.now(), y: Math.random() }); }, delay: 2000 } }] } }} /> </div> ); } });

What could be the problem? Thanks!

Answer 1

without a snippet to play with I'd guess that the problem is here

onRefresh: function(chart) {
  data.dataset.data.push({
    x: Date.now(),
    y: Math.random()
  });
}

you've pushed the new data to the initial dataset, but at a guess you'll need to push it to the chart itself. looking at the example at:

https://nagix.github.io/chartjs-plugin-streaming/samples/bar-horizontal.html

seems like you should be passing the data directly to the chart

chart.config.data.datasets.forEach(function(dataset) {
  dataset.data.push({
    x: Date.now(),
    y: randomScalingFactor()
  });
});

or maybe, (again I'm just guessing where the new data might go without a mvp example to play with, console.log out the chart variable in the onRefresh callback to find the right location), If you setup a mvp on somewhere like stackblitz I/someone can update this answer.

onRefresh: function(chart) {
  chart.dataset.data.push({
    x: Date.now(),
    y: Math.random()
  });
}

Answer 2

The data format you provided is wrong, you are trying to

data.dataset.data.push but the data you provided only have X value. you need to reformat it, the data should have the format like this: {x:$(value), y:${value}}

Open the code snippet below in CodeSandbox

import React from "react";
import { Line } from "react-chartjs-2";
import "chartjs-plugin-streaming";
var createReactClass = require("create-react-class");

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
        }
      }
    ]
  }
};

export default createReactClass({
  displayName: "LineExample",
  render() {
    return (
      <div>
        <Line data={data} options={options} />
      </div>
    );
  }
});

Answer 3

chart is undefined because it was never defined in React.

Here is an example with React:

onRefresh: function(chart) {
   chart.dataset.data.push({
   x: Date.now(),
   y: Math.random()
  });
}