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分钟的视图，您可以像下面这样配置它。

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

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