ChartJS-滚动20分钟视图

Question

下面的代码，

有没有一种方法可以通过滚动的20分钟视图获得"实时"？在启用此功能的选项中似乎找不到任何内容。

ChartJS 2.9.4版

import 'chartjs-plugin-zoom';
import { Line } from 'react-chartjs-2';
import 'chartjs-plugin-streaming';
export default () => {
const data = {
datasets: [
{
label: 'MWC',
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.5)',
steppedLine: true,
lineTension: 0,
borderDash: [8, 4],
data: new Array(1000).fill(null).map((_, i) => {
return {
x: new Date(new Date().setTime(new Date().getTime() + (i + 1) * 1000)),
y: random(500, 1000),
};
}), // REPLACE THIS WITH REALTIME FEED
},
],
};
const options = {
scales: {
xAxes: [
{
type: 'realtime',
time: {
unit: 'minute',
displayFormats: {
quarter: 'h:mm a',
},
},
realtime: {
onRefresh: function(chart: any) {
// eslint-disable-next-line functional/immutable-data
},
delay: 2000,
},
},
],
},
zoom: {
enabled: true,
mode: 'x',
rangeMin: {
x: null,
},
threshold: 10,
rangeMax: {
x: null,
},
},
};
return (
<div>
<Line data={data} options={options} />
</div>
);
};

Answer 1

duration属性将帮助您将视图限制在特定的时间限制内。它接受以毫秒为单位的时间，对于20分钟的视图，您可以如下配置它。

有关更多详细信息，请查看插件配置

realtime: {
onRefresh: function(chart: any) {
// eslint-disable-next-line functional/immutable-data
},
delay: 2000,
duration: 1200000,
},