ant design charts 獲取後端介面資料展示
阿新 • • 發佈:2022-05-25
今天在做專案的時候遇到幾個讓我很頭疼的問題,一個是通過後端介面成功訪問並又返回資料,但拿不到資料值。其二是直接修改state中的data,console中陣列發生變化但任然資料未顯示。
import React, { useState, useEffect } from 'react'; import { Line } from '@ant-design/plots'; import { PageContainer } from '@ant-design/pro-layout'; import ProForm, { ProFormDateRangePicker } from '@ant-design/pro-form'; import queryString from'qs'; const DemoLine = () => { const [data, setData] = useState([]); useEffect(() => { asyncFetch(); }, []); var obj=[] var pre=[] const asyncFetch = () => { fetch('/api/v1.0/inquireRepairsAnalysisNumberListTenant.json',{ method: 'POST', body:new URLSearchParams(queryString.stringify({ sessionUuid: window.localStorage.getItem('sid') , startDate: '2021-12-01', endDate: '2022-05-30', }, { indices: false })) }) .then(response=>response.json())//將respose轉成json格式資料以便可以訪問讀取 .then(response=>{ obj=response.datas[0];//獲取json資料中的data部分,並對其開始進行處理 console.log(obj) for(var i = 0; i < obj.typeNameList.length;i++){ for(var j=0;j<obj.monthList.length-1;j++){ pre.push({ monthList:obj.monthList[j], monthNumberList:obj.monthNumberList[j].numberList[i], typeNameList:obj.typeNameList[i], }) } } setData(pre) } ) .catch((error) => { console.log('fetch data failed', error); }); }; console.log(data,data.length) const config = { data, xField: 'monthList', yField: 'monthNumberList', seriesField: 'typeNameList', yAxis: { }, legend: { position: 'top', }, smooth: true, // @TODO 後續會換一種動畫方式 animation: { appear: { animation: 'path-in', duration: 5000, }, }, }; return ( <PageContainer> <ProForm initialValues={{ dateRange: [Date.now(), Date.now() - 1000 * 60 * 60 * 24], }} > <ProForm.Group title="日期區間選擇"> <ProFormDateRangePicker name="dateRange" /> </ProForm.Group> </ProForm> <Line {...config} /> </PageContainer> ) }; export default DemoLine;
通過介面獲取到資料後,一直為response形式,處理很久,最後通過 .then(response=>response.json())//將respose轉成json格式,但我們任然取不到PromiseResult中的內容,需要再次通過then方法
此時資料為json格式,為了取到json中的datas還需再 obj=response.datas[0];//獲取json資料中的data部分,並對其開始進行處理
.then(response=>{ obj=response.datas[0];//獲取json資料中的data部分,並對其開始進行處理 console.log(obj,'obj')
我們將取到的資料存在obj陣列中
之後再對資料進行操作,由於我這邊的用的多折線圖,ant design charts中 他所需要的資料格式是陣列內以物件的形式放單個數據,如圖
所以我們需要對取到的obj資料資料進行處理,轉換為對應的資料形式。pre為暫存資料陣列。
for(var i = 0; i < obj.typeNameList.length;i++){ for(var j=0;j<obj.monthList.length-1;j++){ pre.push({ monthList:obj.monthList[j], monthNumberList:obj.monthNumberList[j].numberList[i], typeNameList:obj.typeNameList[i], }) } }
將我們的資料轉換後通過usestate修改到data中
setData(pre)
通過設定折線圖的對應屬性
const config = { data,//簡寫data:data xField: 'monthList', yField: 'monthNumberList', seriesField: 'typeNameList', yAxis: { }, legend: { position: 'top', }, smooth: true, // @TODO 後續會換一種動畫方式 animation: { appear: { animation: 'path-in', duration: 5000, }, }, };
最終效果