时间戳

首页 > 解决方案 > react-chartjs-2 在调整窗口大小之前不显示行

reactjs - react-chartjs-2 在调整窗口大小之前不显示行

问题描述

我在使用 react-chartjs-2 的 React 应用程序中遇到了这个奇怪的错误。在我调整窗口大小之前，图表数据无法正确显示。在 Firefox 和 Chrome 上测试，结果相同。数据在那里，但我不知道数据是在渲染之后加载的还是什么的。拜托，我是学生而不是专家，所以如果您知道我的问题的解决方案，请详细解释。谢谢！

我的错误的 Youtube 视频

import React, {Component} from 'react';
import {Line} from 'react-chartjs-2';

const options = {
    title: {
        display: true,
        text: "Chart Title"
    },
    scales: {
        yAxes: [
            {
                ticks: {
                    suggestedMin: 20,
                    suggestedMax: 50
                }
            }
        ]
    }
};

const legend = {
    display: true,
    position: "bottom",
    labels: {
        fontColor: "#323130",
        fontSize: 14
    }
};
class SensorChart extends Component {

    constructor(props) {
        super(props);
        this.chartReference = React.createRef()
        this.state = {
            data : {
                labels: props.labels,
                datasets: [
                    {
                        label: "Humidity",
                        borderColor: "rgb(9,0,192)",
                        data: props.humidity
                    },
                    {
                        label: "Temperature",
                        borderColor: "red",
                        data: props.temperature
                    }
                ]
            }
        }
    }

    componentDidMount() {
        console.log(this.state.data.datasets[0].data)
        console.log(this.state.data.datasets[1].data)
    }


    render() {
        return (
            <div>
                <h5>Line Example</h5>
                <Line ref={this.chartReference} data={this.state.data} legend={legend} options={options}/>
            </div>
        );
    }

}

export default SensorChart;

import React from 'react';
import Icon from '@mdi/react'
import {mdiThermometer, mdiWaterPercent, mdiCalendarRange} from '@mdi/js';
import './SensorData.css';
import SensorChart from "./SensorChart";

function SensorData() {


    const [humi, setHumi] = React.useState("");
    const [temp, setTemp] = React.useState("");
    const [date, setDate] = React.useState("");

    const [labels] = React.useState([]);
    const [humidity] = React.useState([]);
    const [temperature] = React.useState([]);


    function fetchData() {
        fetch('https://myAPIurl/datalist/100')
            .then(response => response.json())
            .then(responseData => {
                setDate(responseData[0].stringTime);
                setHumi(responseData[0].humidity);
                setTemp(responseData[0].temperature);

                for (let i = 0; i < 100; i++) {
                    labels.push(responseData[i].stringTime)
                    humidity.push(responseData[i].humidity)
                    temperature.push(responseData[i].temperature)
                }

            })
    }

    React.useEffect(() => {
        fetchData();
    }, []);


    return (
        <div className="App">
            <h1>Sensor data</h1>

            <h3><Icon path={mdiWaterPercent}/> Humidity: {humi}%</h3>
            <h3><Icon path={mdiThermometer}/>Temperature: {temp}°C</h3>
            <h3><Icon path={mdiCalendarRange}/>Time: {date}</h3>
            <div className="Chart">
                <SensorChart labels={labels} humidity={humidity} temperature={temperature}/>
            </div>
        </div>
    );
}

export default SensorData;

加载站点后的控制台日志 

 console.log(this.state.data.datasets[0].data)       

 console.log(this.state.data.datasets[1].data)

_chartjs: {…}, push: ƒ, pop: ƒ, shift: ƒ, splice: ƒ, …]0: 371: 372: 353: 354: 355: 366: 387: 388: 409: 4110: 4711: 4312: 4013: 3714: 3615: 3516: 3717: 3618: 3619: 3620: 3621: 3622: 3623: 3624: 3625: 3626: 3627: 3628: 3629: 3630: 3631: 3632: 3633: 3634: 3635: 3736: 3737: 3738: 3739: 3840: 3841: 3842: 3843: 3844: 3845: 3846: 3947: 3948: 3949: 4050: 4151: 4152: 4153: 4154: 4255: 4356: 4357: 4458: 4459: 4360: 3961: 4062: 3963: 3864: 3765: 3666: 3667: 3768: 3769: 3770: 3771: 3672: 3673: 3574: 3575: 3676: 3577: 3678: 3679: 3580: 3681: 3782: 3783: 3784: 3885: 3886: 3887: 3888: 3789: 3890: 3891: 3792: 3793: 3794: 3795: 3796: 3797: 3798: 3799: 37length: 100_chartjs: {listeners: Array(1)}push: ƒ ()pop: ƒ ()shift: ƒ ()splice: ƒ ()unshift: ƒ ()__proto__: Array(0)
SensorChart.js:61 [_chartjs: {…}, push: ƒ, pop: ƒ, shift: ƒ, splice: ƒ, …]0: 24.31: 24.32: 24.33: 24.24: 24.15: 23.86: 22.87: 22.98: 23.59: 2410: 24.811: 24.812: 24.713: 24.514: 24.515: 24.516: 24.617: 24.518: 24.519: 24.520: 24.421: 24.422: 24.423: 24.424: 24.525: 24.426: 24.427: 24.428: 24.429: 24.430: 24.431: 24.432: 24.433: 24.434: 24.335: 24.436: 24.437: 24.538: 24.539: 24.540: 24.541: 24.442: 24.543: 24.544: 24.545: 24.546: 24.547: 24.448: 24.349: 24.450: 24.451: 24.452: 24.453: 24.554: 24.555: 24.556: 24.557: 24.558: 24.559: 24.560: 24.561: 24.562: 24.563: 24.564: 24.565: 24.566: 24.567: 24.468: 24.469: 24.470: 24.471: 24.472: 24.373: 24.374: 24.375: 24.376: 24.377: 24.378: 24.379: 24.380: 24.381: 24.482: 24.483: 24.384: 24.385: 24.386: 24.387: 24.388: 24.389: 24.490: 24.291: 24.392: 24.293: 24.294: 24.295: 24.296: 24.197: 24.198: 24.299: 24.1length: 100_chartjs: {listeners: Array(1)}push: ƒ ()pop: ƒ ()shift: ƒ ()splice: ƒ ()unshift: ƒ ()__proto__: Array(0)

标签： reactjs

解决方案

对于仍然在这里结束的每个人来说，这似乎是自 2017 年左右以来在他们的 GitHub Repo ( #90 )上积极跟踪的问题。尽管该问题目前已关闭（2021 年 4 月 1 日），但对于很多用户来说显然仍然是一个问题，因为它最近在 GitHub 本身以及 Stack Overflow 上都收到了评论。

之前列出的解决方案：

重绘：

显然redraw，在组件调用中包含 propReact-ChartJS-2应该会强制重绘数据：

return (
    <Line data={chartData} options={options} title="My Chart" ref={chartRef} redraw />
)

可悲的是，这对我没有任何帮助......

useEffect()：

通过将图表实际数据绑定到一个useState()钩子中，每次更改数据时都会触发组件重新加载，如果计划正确，还可以包括初始数据加载。

const [chartData, setChartData] = useState(null);

// Data Fetch
useEffect(() => {
//...Async fetch my data from source and update state
});

// Attempt at triggering update whenever datasets change:
useEffect(() => {
    if (chartData !== null) {
      chartRef.current.chartInstance.update({
        preservation: true,
      });
    }
  }, [chartData]);

// Nested component to trigger rerender of only the graph for performance
const Graph = () => {
    return (
      <>
        {chartData ? (
          <Line data={chartData} options={options} title="My Chart" ref={chartRef} redraw />
        ) : null}
      </>
    );
  };

return (
    <Graph />
)

可悲的是（再次），这也没有做任何事情......

结论：

这似乎是如何ChartJS移植到 React 的错误，这意味着这似乎是实际React-ChartJS-2包的问题。

TL;博士

React-ChartJS-2它是GitHub ( #90 )上的一个已知问题。常规方法目前不起作用。请继续关注那里的更新。

推荐阅读