ChartJS - 滚动二十分钟视图

Question

下面的代码，

有没有办法让 'realtime' 滚动显示 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 分钟的视图，您可以像下面这样配置它。

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

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

ChartJS - 滚动二十分钟视图

ChartJS - rolling twenty minute view

javascript

chart.js

react-chartjs-2