提问人：user22872107 提问时间：11/7/2023 最后编辑：Brian Tompsett - 汤莱恩user22872107 更新时间：11/7/2023 访问量：25
如何在highcharts react中集成API数据？
How to integrate API data in highcharts react?
问：
我在 react 中使用 highcharts 创建了这个图表。现在，我想将静态数据替换为我从 API 获取的 JSON。
这是静态数据：
series: [{data: [['Food',30], ['Travel',10], ['Groceries',20], ['Fuel',40]]}]
这就是我从我的 API 中得到的：
{
"Fashion": 40.0,
"TotalAmountSpent": 20000.0,
"Food": 60.0
}
我想将这个JSON转换为一个数组，例如
Data : [['Fashion',40],['Food',60]]
然后将此数组加载到图表选项中，作为
series: [{
data: Data
}]
答：
0赞
ppotaczek
11/7/2023
#1
您需要将数据转换为 Highcharts 所需的结构。例如：
useEffect(() => {
// const data = API call
const processedData = [];
for (let key in data) {
processedData.push([key, data[key]]);
}
setOptions({
series: [{
data: processedData
}]
});
}, []);
现场演示：https://codesandbox.io/s/highcharts-react-demo-2qvsyt?file=/demo.jsx
文档：https://github.com/highcharts/highcharts-react#optimal-way-to-update
评论