如何在highcharts React中集成api数据？

Question

所以我使用 highcharts 在 React 中创建了这个图表。现在我想用从 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
        }]

Answer 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