如何将API url中的数据提取到reactjs中的reactgoogle饼图中？

Question

在这里，我想从REST中获取数据，这个URL将被输入到饼图中，而不是像下面的分段所示手动输入数据。

API URL将有一个JSON响应。

ex:

{“发展阶段:1，"no.of.project:60}，{”发展阶段:2，"no.of.project:50}

我想在JSON的基础上显示数据。

                     <Chart
                                  width={'450px'}
                                  height={'310px'}
                                  chartType="PieChart"
                                  loader={<div>Loading Chart</div>}
                                  data={[
                                    ['Development Stages', 'Number of Project'],
                                    ['Stage 1', 60 ],
                                    ['Stage 2',40],
                                    ['Stage 3',20 ],
                                    ['Stage 4',10],
                                    ['Stage 5', 30],
                                  ]}
                                  options={{
                                    title: 'Projects',
                                  }}
                                  rootProps={{ 'data-testid': '1' }}
                    />

如何使用异步公理来实现相同的？并将其传递给图表.

                const [stage,setStage]=useState([]);
                const getStageData = async() => {
              try{

            const data=await axios.get(APIurl
           );

        setStage(data.data)
        }
        catch(e){


        }
    };

    useEffect(()=> {
        getStageData();
    },[]);

​

​

​

​

Answer 1

因此，应该传递给饼图的数据应该是数组数组(取决于所使用的库)。您的响应数据看起来像一个对象数组。

1. 将数据转换为数组.

    setStage(reponse.data.map(Object.values));

1. 将数据传递给饼图。

    <Chart
       ...otherProps
       data={[
         ['Development Stages', 'Number of Project'], 
         ...data
       ]}
    />

Answer 2

从您的代码中，我可以看到您首先设置了axios响应( (setStage(data1.data)) )，然后使用stage.map(Object. values)将其转换为数组。试着先映射，然后设置状态并查看。类似于这个const res = data1.data.map(obejct.values)，然后是setStage(res)。

Answer 3