График потоковой передачи данных в реальном времени с реакции и чарджис

Question

Я хочу передавать данные в режиме реального времени с помощью этого плагина . Но в настоящее время мой график отображает тот же набор данных и остается статичным. Даже при том, что я следую примеру реакции этого веб-сайта Ниже приведен код, который я использовал:

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

В чем может быть проблема? Спасибо!

Answer 1

Указан неверный формат данных, вы пытаетесь

data.dataset.data.push, но предоставленные вами данные имеют только значение X. вам нужно переформатировать его, данные должны иметь следующий формат:

{x: $ (значение), y: $ {значение}}

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

https://codesandbox.io/s/winter-breeze-zvywv

Answer 2

без фрагмента, чтобы играть с ним, я думаю, что проблема здесь

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

вы выдвинули новые данные в исходный набор данных, но, по предположению, вам нужно будет подтолкнуть егона саму диаграмму. если посмотреть на пример:

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

кажется, что вы должны передавать данные непосредственно на график

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

или, может быть, (сноваЯ просто догадываюсь, куда новые данные могут пойти без примера mvp, с которым нужно работать, console.log выводит переменную диаграммы в обратном вызове onRefresh, чтобы найти правильное местоположение), если вы настроите mvp где-нибудь, как stackblitz, я / кто-то можетобновить этот ответ.

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