如何从 API url 获取数据到 react js 中的 react google 饼图答案

【问题标题】：How can I fetch data from API url into my reactgoogle pie chart in reactjs如何从 API url 获取数据到 react js 中的 react google 饼图
【发布时间】：2021-06-26 06:48:47
【问题描述】：

在这里，我想从 REST API URL 获取数据，该 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 来做同样的事情？？？？并将其传递给 Chart。

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

            const data=await axios.get(APIurl
           );

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


        }
    };

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

【问题讨论】：

你在使用 chart.js 库吗？
请控制台登录“stage”并让我知道你在做什么，看到了吗？在此处分享该输出。
你确定它是空的吗？如果是，请确保该阶段具有您上面提到的 JSON 响应。当您控制台日志“data.data”时，您会看到什么？是空的吗？如果它不为空，则执行 setStage(...stage , data.data)，然后在您的图表组件中执行此数据 = {[stage]}。不确定这是否对您有帮助，但请尝试一下。
setStage(.data.data)，这里不需要展开运算符。
如果我错了，请纠正我。从您的代码中，我可以看到您首先设置了 axios 响应（setStage(data1.data)），然后您正在使用 stage 转换为数组。地图（对象。值）。尝试先映射，然后设置状态并查看。像这样 const res = data1.data.map(obejct.values) 然后 setStage(res).

标签： javascript html reactjs rest ecmascript-6

【解决方案1】：

使用 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'}} 
     />

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

将您的数据转换为数组数组。

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

将该数据传递到饼图。

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

【讨论】：

这里的舞台被转换成数组的数组，但是使用扩展运算符它没有显示在图表中

【解决方案4】：

【讨论】：

此后饼图也变为空白