时间戳

首页 > 解决方案 > react-chartjs-2 的问题

javascript - react-chartjs-2 的问题

问题描述

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

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

未捕获的类型错误：无法在 e.update (core.controller.js:340) 处的 n (core.controller.js:50) 处的 Array.forEach () 处的 core.controller.js:51 处设置未定义的属性“选项” 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) 在 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'
    }]
}

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

标签： javascriptchart.js

解决方案

问题似乎是在构建图表实例时，“实时”比例尚未注册，chart.scales['x-axis-0']而是 left 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'));

推荐阅读