Svelte集成Chart.js：API获取数据无法渲染图表求助

核心问题 #

你的代码中存在两个关键问题导致data2（部分情况）和data_chart无法渲染：

1. data_chart的datasets结构错误 #

Chart.js 要求datasets必须是对象数组，但你在getChart函数中将其赋值为单个对象。同时，每个数据集缺少必要的样式属性（如borderColor），Chart.js 无法识别渲染。

2. data_chart初始化类型不匹配 #

你初始将data_chart定义为数组new Array()，后续又赋值为对象，虽不直接报错，但可能导致组件初始渲染时结构异常。

分步修复 #

修复getChart函数中的data_chart结构 #

修改数据集为数组格式，并添加必要样式属性：

export async function getChart(id){
    ruta_api_chart = `${import.meta.env.VITE_WP_API}m-chart/` + id;
    const response_chart = await fetch(ruta_api_chart);
    const newData_chart = await response_chart.json();
    value_chart = newData_chart['m-chart'];

    // 修正结构：datasets为数组，添加样式属性
    data_chart = {
        labels: value_chart['data'][0][0],
        datasets: [
            {
                label: value_chart['x_title'],
                data: value_chart['data'][0][1],
                borderColor: '#36A2EB', // 必填：线条颜色
                fill: false, // 可选：是否填充区域
                tension: 0.1 // 可选：线条平滑度
            }
        ]
    };
};

正确初始化data_chart #

将初始值改为符合 Chart.js 要求的空结构：

// 替换原有的 let data_chart = new Array;
let data_chart = {
    labels: [],
    datasets: []
};

完善异步调用的错误处理 #

避免 API 返回异常数据导致组件崩溃：

async function ifChart(){
    let posicion_chart = value[0].content.rendered.indexOf('m-chart-container-');

    if(posicion_chart >= 0){
        const regex = /(?<=m-chart-container-)(.*?)(?=-)/mg;
        id_chart = value[0].content.rendered.match(regex);
        
        // 避免null时调用forEach
        if(id_chart){
            id_chart.forEach(function(id) {
                getChart(id);
            })
        }
    }
};

export async function getChart(id){
    try {
        ruta_api_chart = `${import.meta.env.VITE_WP_API}m-chart/` + id;
        const response_chart = await fetch(ruta_api_chart);
        if(!response_chart.ok) throw new Error('图表数据请求失败');
        
        const newData_chart = await response_chart.json();
        value_chart = newData_chart['m-chart'];
        
        // 校验数据结构完整性
        if(!value_chart?.data || !value_chart?.x_title){
            throw new Error('图表数据结构异常');
        }

        data_chart = {
            labels: value_chart['data'][0][0],
            datasets: [
                {
                    label: value_chart['x_title'],
                    data: value_chart['data'][0][1],
                    borderColor: '#36A2EB',
                    fill: false
                }
            ]
        };
    } catch (error) {
        console.error('加载图表失败:', error);
    }
};

关于data2无法渲染的补充检查 #

如果data2仍无法渲染，尝试：

1. 显式传递数据而非简写：<Line data={data2} options={{ responsive: true }} />
2. 打开浏览器控制台查看是否有未捕获的错误（如样式冲突或组件注册问题）

修复后的完整代码片段（关键部分） #

// 初始化修正
let data_chart = {
    labels: [],
    datasets: []
};

// getChart函数修正
export async function getChart(id){
    try {
        ruta_api_chart = `${import.meta.env.VITE_WP_API}m-chart/` + id;
        const response_chart = await fetch(ruta_api_chart);
        if(!response_chart.ok) throw new Error('图表数据请求失败');
        
        const newData_chart = await response_chart.json();
        value_chart = newData_chart['m-chart'];
        
        if(!value_chart?.data || !value_chart?.x_title){
            throw new Error('图表数据结构异常');
        }

        data_chart = {
            labels: value_chart['data'][0][0],
            datasets: [
                {
                    label: value_chart['x_title'],
                    data: value_chart['data'][0][1],
                    borderColor: '#36A2EB',
                    fill: false
                }
            ]
        };
    } catch (error) {
        console.error('加载图表失败:', error);
    }
};

内容的提问来源于stack exchange，提问作者Irene Fdez-Pedrera