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'
        }]
    }
}}
/>

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

未捕获的类型错误：无法在 core.controller.js:51 在 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) 因为在 Chartjs 的 core.controller.js 中是这部分：

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']被保留undefined。请确保在构建图表之前导入 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'));