React中使用Chart.js渲染Line折线图报错不显示如何解决

两个配置错误共同导致了你遇到的问题：

1. Chart.js 元素注册不全。你基于柱状图代码改折线图时，仅注册了柱状图依赖的BarElement，没有引入、注册折线图必需的LineElement（折线绘制元素）和PointElement（折线上的数据点元素），这是初期控制台抛错的直接原因。
2. 数据结构不符合组件要求。你后续排查时错误给datasets套了一层多余的data字段，react-chartjs-2的Line组件接收的data属性，要求传入的对象直接以平级结构包含labels和datasets字段，套层后组件无法读取到标签、数据集配置，就会出现控制台不报错但图表空白不渲染的问题。

另外你代码里把数据请求函数命名为Chart，和导入的ChartJS命名空间存在命名冲突风险，也建议一并修正。

按以下步骤调整代码即可正常渲染折线图：

1. 补全折线图依赖的元素导入与注册
   将原文件顶部的Chart.js导入、注册代码替换为如下内容：

import React, { useState, useEffect } from 'react'
// 补全折线图需要的PointElement、LineElement导入
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend} from 'chart.js'
import  {Line} from "react-chartjs-2"
import axios from 'axios';

// 注册所有用到的组件，后续如果还要用柱状图可以保留BarElement，不需要可直接删除
ChartJS.register(
    CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend
);

2. 修正数据配置结构，删除多余嵌套
   把setChartData的配置改回平级结构，去掉多余的data包裹层，也不需要额外指定type: 'line'（使用Line组件时默认已指定图表类型为折线），同时修改存在冲突的函数名：

// 原函数名Chart改为fetchChartData，避免命名冲突
const fetchChartData = () => {
    let Cost = [];
    let No = [];

    axios.get("http://localhost:3001/api/TranscationRecord/Cost")
    .then(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,
            datasets: [{
                label: 'Daily Cost',
                data: Cost,
                backgroundColor:'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1,
                tension: 0.2 // 可选配置，让折线更圆润，不需要可删除
            }],
        });
    })
    .catch(err =>{
        console.log(err);
    })     
}

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

调整完成后重启开发服务，折线图即可正常加载渲染。

内容的提问来源于stack exchange，提问作者Dixon Koo