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

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:$(value), y:${value}}

在代码沙盒中打开下面的代码片段

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 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 示例可以使用，控制台.log onRefresh 回调中的图表变量以找到正确的位置(，如果您在像堆栈闪电战这样的地方设置 mvp，我/某人可以更新这个答案。

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

Answer 3

chart是未定义的，因为它从未在 React 中定义过。

下面是一个 React 的例子：

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