我正在使用Chart JS来显示来自firebase firestore数据库的传感器读数。我遇到了这个奇怪的bug，我的图表最初没有绘制数据〉〉https://imgur.com/gallery/2AoVdo7，但在我点击颜色图例两次〉〉https://imgur.com/gallery/acdblsA或按下f12开发者工具后，绘图突然出现〉〉〉https://imgur.com/gallery/IMxEdZ3。这是bug还是我的代码有问题？
下面是我代码：

import {Getfs} from '../firestore';
import {Line} from 'react-chartjs-2';
import {useEffect} from "react";
import {Chart as ChartJS, Title, Tooltip, LineElement, Legend, CategoryScale, LinearScale, PointElement, } from 'chart.js';

ChartJS.register(
    Title,Tooltip, LineElement, Legend, CategoryScale, LinearScale, PointElement
)

export default function Graph (){
    var sen_readings;
    var c_label = [];
    var ph_data = [];
    var temp_data = [];
    var tur_data = [];
    var dis_data = [];
    useEffect(() => {
        sen_readings = Getfs();
        sen_readings.then(function(result){
            for (var i = 0; i < result.length; i++){
                c_label.push(result[i].time);
                ph_data.push(result[i].pH);
                temp_data.push(result[i].temperature);
                tur_data.push(result[i].turbidity);
                dis_data.push(result[i].disO);
            }
        })
    }, []);

    function makeCHART_PH(){
        const ph_chart = {
            labels: c_label,
            datasets:[{
                label:"pH Readings",
                data: ph_data,
                backgroundColor: 'blue',
            }]
        }
        return ph_chart;
    }

    function makeCHART_DISOLVE(){
        const diso_chart = {
            labels: c_label,
            datasets:[{
                label:"Dissolved Oxygen Readings",
                data: dis_data,
                backgroundColor: 'blue',
            }]
        }
        return diso_chart;
    }

    function makeCHART_TEMP(){
        const temp_chart = {
            labels: c_label,
            datasets:[{
                label:"Temperature Readings",
                data: temp_data,
                backgroundColor: 'blue',
            }]
        }
        return temp_chart;
    }

    function makeCHART_TURBID(){
        const tur_chart = {
            labels: c_label,
            datasets:[{
                label:"Turbidity Readings",
                data: tur_data,
                backgroundColor: 'blue',
            }]
        }
        return tur_chart;
    }

    return(
        <div>
            <form>
                <h3>Select Date Range:</h3>
                <div class="date1">
                    <input type="date" class = "d1"/>
                </div>
                <p>to</p>
                <div class="date2">
                    <input type="date" class = "d2"/>
                </div>
            </form>
            <div class="datasets">
                <h2>Data Table</h2>                
                    <table>
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Time</th>
                                <th>pH</th>
                                <th>Temperature (°C)</th>
                                <th>Dissolved Oxygen (mg/L)</th>
                                <th>Turbidity (JTU)</th>
                            </tr>
                        </thead>
                        <tbody id= "tbody1" ></tbody> 
                    </table>
                 <a href="#">Show All</a>
            </div>
            <div class="chartWrapper">
                <div class="chartAreaWrapper">
                    <Line data ={makeCHART_PH()} style = {{width: '100%', height: '500px' }}></Line>
                    <Line data ={makeCHART_TURBID()} style = {{width: '100%', height: '500px' }}></Line>
                    <Line data ={makeCHART_TEMP()} style = {{width: '100%', height: '500px' }}></Line>
                    <Line data ={makeCHART_DISOLVE()} style = {{width: '100%', height: '500px' }}></Line>
                </div>
            </div>
        </div>

    )
}