使用react-c3js在React中使用C3Chart加载动态数据

如何解决使用react-c3js在React中使用C3Chart加载动态数据

我正在使用C3Chart与react-c3js库进行反应，以动态显示图表。

下面是我在React中使用的代码，用于从REST API加载数据并动态加载图表元数据

import React,{ useEffect,useState } from 'react';
import C3Chart from "react-c3js";

const Chart = () => {

    let initialChartState = {
        "data": {
            "json": {}
        }
    }

    const [chartData,setChartData] = useState({ ...initialChartState });

    useEffect(() => {
        fetch('http://localhost:8081/api/chartMetaData/line')
            .then(results => results.json())
            .then(response => {
                setChartData({...response});
            })
    },[setChartData])

    return (
        <div>
            <C3Chart data={chartData.data}
                title={chartData.title}
                size={chartData.size} />
            {JSON.stringify(chartData)}
        </div>
    );
}

export default Chart;

尽管，这段代码可以正确运行并正确加载图表，但是我无法从其余api检索的值中覆盖title和size的值。取而代之的是，它占用一些默认的大小值，并将标题显示为空白。

但是，如果我像这样对响应json进行硬编码，它就可以正常工作

const chartData= { "data": { "json": { "data3": [200,310,150,100,180],"data2": [180,300,70,120],"data1": [220,240,270,250,280] },"type": "bar" },"title": { "text": "Chart from REST API" },"size": { "height": 300,"width": 300 } };

请让我知道如何解决此问题。