ChartJS - 滚动二十分钟视图

问题描述

下面的代码，

有没有办法通过滚动的 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,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>
    );
};

解决方法

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

欲了解更多详情，请查看插件Configuration

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