问题描述
我正在使用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 } };
请让我知道如何解决此问题。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)