我引用了here。按照她的步骤，我可以执行我的BarChart。但是当我试图将其更改为LineChart时，出现了一些错误。
error 1error 2
折线图代码：

import React, { useState, useEffect } from 'react'
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend,} from 'chart.js'
import  {Line} from "react-chartjs-2"
// Radar, Doughnut, Polar, Pie
import axios from 'axios';

ChartJS.register(
    CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend
);

function LineChart() {
    const [chartData, setChartData] = useState({datasets: [],});
    const Chart = () => {
        let Cost = [];
        let No = [];

        axios.get("http://localhost:3001/api/TranscationRecord/Cost")
        .then(res => {
            console.log(res);
            for(const dataObj of res.data){
                Cost.push(parseInt(dataObj.Cost));
                const d = new Date(dataObj.StartD);
                No.push(d.toLocaleDateString('en-us',{day:"2-digit",month:"2-digit" }));
            }

            setChartData({
                labels: No,
                type:'line',
                datasets: [{
                    label: 'Daily Cost',
                    data: Cost,
                    backgroundColor:'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1,
                }],
            });

        })

        .catch(err =>{
            console.log(err);
        })     
    }

    useEffect(() => {Chart();}, []);

    return(
        <div className="App">
            <h1>Line Chart</h1>
            <div>
                <Line data = { chartData }/>
            </div>
        </div>
    )
  }

  export default LineChart;

我试图发现并解决问题，我知道有些问题
datasets:{}

setChartData({
            labels: No,
            type:'line',
            datasets: [{
                label: 'Daily Cost',
                data: Cost,
                backgroundColor:'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1,
            }],
        });

因此，我将datasets:{}量化为data{}

setChartData({
            labels: No,
            type:'line',
            data:{
                datasets: [{
                    label: 'Daily Cost',
                    data: Cost,
                    backgroundColor:'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1,
                }],
            }
        });

未出现错误，但无法显示LineChart like this。
为什么会发生这种情况，我该如何解决？