如何从 API url 获取数据到我的 reactgoogle 饼图中 reactjs

Question

在这里，我想从 REST API URL 中获取数据，这些数据将被输入到饼图中，而不是像下面的饼图中那样手动输入数据。

API URL 将具有 JSON 响应。

前任：
[{"开发阶段: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' }}
                    />

我怎样才能使用异步 axios 一样的？？？？ 并将其传递给图表。

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

            const data=await axios.get(APIurl
           );

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


        }
    };

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

Answer 1

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

1. 将您的数据转换为 arrays 数组。

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

2. 将该数据传递给饼图。

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

Answer 2

从您的代码中，我可以看到您首先设置了 axios 响应(setStage(data1.data)) ，然后您使用stage.map(Object. values)转换为 arrays 。 先试试 map 再设置 state 看看。 像这样const res = data1.data.map(obejct.values)然后setStage(res) 。

Answer 3

<图表宽度={'450px'} 高度={'310px'} chartType="PieChart" loader={加载图表} data={[['Development Stages', 'Number of Project'],...stage]} options={{title: 'Projects',}}rootProps={{ 'data-testid': '1' }} />

Answer 4

使用 react-google Piechart 和 rest api 数据调用的完整工作代码

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

                 const data1=await axios.get("REST_API");

                //converting array of objects into array
                 const res=data1.data.map(Object.values);

                //setting it to stage variable
                setStage(res);  
        }
               catch(e){}  

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

    <Chart
         width={'500px'}
         height={'310px'}
         chartType="PieChart"
        loader={<div>Loading Chart</div>}
        data={[
               ["COLUMN_NAME_1","COLUMN_NAME_2"],
               ...stage
            ]}
       options={{ 
                 title: 'Ongoing Projects Development Stage',                                                                               
               }}
        rootProps={{ 'data-testid': '1'}} 
     />