javascript - react-chartjs-2 的问题

Question

我对 react-chartjs-2 和 chartjs-plugin-streaming 有疑问，我的目标是用流创建一个实时图表，但它最终出错了，我不太清楚为什么。无论如何，我的导入是这样的:

import { Chart, Bubble } from 'react-chartjs-2';
import ChartStream from 'chartjs-plugin-streaming';

然后正下方是这部分:

Chart.pluginService.register(ChartStream);

然后在组件渲染中有这部分

<Bubble
    data={{
        labels: ['demo'],
        datasets: [{
            backgroundColor: 'rgba(75,192,192,1)',
            data: []
        }]
    }}
    options={{
    plugins: {
        streaming: {
            onRefresh: function(chart) {
                chart.data.datasets[0].data.push({
                    x: Date.now(),
                    y: Math.random() * 100,
                    r: 5
                });
            },
            delay: 500,
            refresh: 1000,
            frameRate: 30,
            duration: 3600000 // 3600000 = 1hour
        }
    },
    scales: {
        xAxes: [{
            type: 'realtime',
            id: 'x-axis-0'
        }]
    }
}}
/>

在导航时发生的第一个错误是:

Uncaught TypeError: Cannot set property 'options' of undefined at core.controller.js:51 at Array.forEach () at n (core.controller.js:50) at e.update (core.controller.js:340) at e.construct (core.controller.js:121) at new e (core.js:7) at t.renderChart (index.js:228) at t.componentDidMount (index.js:53) at e.notifyAll (CallbackQueue.js:76) at r.close (ReactReconcileTransaction.js:80) because in core.controller.js of chartjs is this part:

function updateConfig(chart) {
        var newOptions = chart.options;

        // Update Scale(s) with options
        if (newOptions.scale) {
            chart.scale.options = newOptions.scale;
        } else if (newOptions.scales) {
            newOptions.scales.xAxes.concat(newOptions.scales.yAxes).forEach(function(scaleOptions) {
                chart.scales[scaleOptions.id].options = scaleOptions;
            });
        }

        // Tooltip
        chart.tooltip._options = newOptions.tooltips;
    }

失败的部分是:

chart.scales[scaleOptions.id].options = scaleOptions;

是我之前设置的这些选项导致的，调试时chart.scales中没有x-axis-0，只有y-axis-0

scales: {
    xAxes: [{
        type: 'realtime',
        id: 'x-axis-0'
    }]
}

有人知道如何解决这个问题吗？

Answer 1

问题似乎是在构造图表实例时，“实时”比例尚未注册，chart.scales['x-axis-0'] 未定义 。请确保在构建图表之前导入 chartjs-plugin-streaming。

顺便说一句，您不需要显式地将插件对象注册到pluginService。这是通过 import 'chartjs-plugin-streaming' 完成的。试试这个工作示例:

import React from 'react';
import ReactDOM from 'react-dom';
import { Bubble } from 'react-chartjs-2';
import 'chartjs-plugin-streaming';

ReactDOM.render(
    <Bubble
        data={{
            datasets: [{
                label: 'demo',
                backgroundColor: 'rgba(75,192,192,1)',
                data: []
            }]
        }}
        options={{
            plugins: {
                streaming: {
                    onRefresh: function(chart) {
                        chart.data.datasets[0].data.push({
                            x: Date.now(),
                            y: Math.random() * 100,
                            r: 5
                        });
                    },
                    delay: 500,
                    refresh: 1000,
                    frameRate: 30,
                    duration: 3600000 // 3600000 = 1hour
                }
            },
            scales: {
                xAxes: [{
                    type: 'realtime'
                }]
            }
        }}
    />
, document.getElementById('root'));