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

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

未捕获的TypeError：无法设置属性＆＃39;选项＆＃39;未定义的在core.controller.js：51 在Array.forEach（）在n（core.controller.js：50）在e.update（core.controller.js：340）在e.construct（core.controller.js：121）在新e（core.js：7） at t.renderChart（index.js：228） at t.componentDidMount（index.js：53）在e.notifyAll（CallbackQueue.js：76）在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轴-0，只有y轴-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'));

react-chartjs-2的问题

1 个答案: