我正在使用 React 和 node js 创建一个简单的网站。我从我的 mongo db 数据存储加载数据。我正在使用 ant design 在我的网站上绘制图形。
我正在尝试从 @ant-design/charts
和示例中绘制图形,它需要如下数据。
import React from 'react';
import { Line } from '@ant-design/charts';
const Page: React.FC = () => {
const data = [
{ year: '1991', value1: 3 },
{ year: '1992', value: 4 },
{ year: '1993', value: 3.5 },
{ year: '1994', value: 5 },
{ year: '1995', value: 4.9 },
{ year: '1996', value: 6 },
{ year: '1997', value: 7 },
{ year: '1998', value: 9 },
{ year: '1999', value: 13 },
];
const config = {
data,
height: 400,
xField: 'year',
yField: 'value',
point: {
size: 5,
shape: 'diamond',
},
label: {
style: {
fill: '#aaa',
},
},
};
return <Line {...config} />;
};
export default Page;
我要加载的数据如下。
我已成功加载数据,但在网站上显示失败。 这里是我的问题,我怎样才能将我加载的数据,也就是数组,变成蚂蚁设计想要我这样做的形式......?
这是我用来从 mongo db 加载数据的代码。
const [ readPageList, setReadPageList ] = useState([]);
var bookId = "60219f2a03fdf00d5cf4051d"
useEffect(()=>{
axios.get('/api/books/GetBookById/'+bookId)
.then( response => {
setReadPageList(response.data.book.dailyPage);
})
},[])
const dataList = readPageList.map((pages,index) => {
return [JSON.stringify({year:index, value:pages.readPage})]
})
所以我尝试在蚂蚁设计图中使用dataList而不是data
谢谢
答案 0 :(得分:0)
首先,您检查可以使用的数据类型:
console.log(typeof data)
如果它显示字符串,您可以简单地将其转换为对象:
JSON.parse(data) // it will convert data to object
如果不是,您可以尝试将其转换为字符串并转换回对象,如下面的代码:
JSON.parse(JSON.stringify(data))
也许你可以把代码写在下面:
...
if ( typeof data === `string` )
data = JSON.parse(data)
...