你好，我可以使用这个API来获取数据，但现在我需要在我的react项目中将其制作成图表。我是JS和react的新手，所以我用这个数据json制作图表时遇到了麻烦。我想显示按房间绘制的价格与时间，但json的格式很糟糕。使用什么好的图表组件？此外，我有json检索。这很好，我很难展示它。
下面是JSON的格式：
{"id":"10012","zipCode":"10012","rentalData":{"averageRent":5033,"minRent":1500,"maxRent":10000,"totalRentals":422,"detailed":[{"bedrooms":1,"averageRent":4412,"minRent":1900,"maxRent":10000,"totalRentals":257},{"bedrooms":2,"averageRent":5640,"minRent":1500,"maxRent":10000,"totalRentals":122},{"bedrooms":3,"averageRent":6709,"minRent":3595,"maxRent":10000,"totalRentals":38},{"bedrooms":4,"averageRent":8997,"minRent":7995,"maxRent":9995,"totalRentals":3},{"bedrooms":5,"averageRent":10000,"minRent":10000,"maxRent":10000,"totalRentals":2}],"history":{"2020-04":{"averageRent":22277.53,"minRent":1600,"maxRent":80000,"totalRentals":814,"detailed":[{"bedrooms":0,"averageRent":3342.45,"minRent":1600,"maxRent":30000,"totalRentals":123},{"bedrooms":1,"averageRent":3836.1,"minRent":2170,"maxRent":44894,"totalRentals":315},{"bedrooms":2,"averageRent":6692.21,"minRent":2595,"maxRent":40000,"totalRentals":256},{"bedrooms":3,"averageRent":9467.1,"minRent":3595,"maxRent":30000,"totalRentals":96},{"bedrooms":4,"averageRent":16004.08,"minRent":4995,"maxRent":49900,"totalRentals":12},{"bedrooms":5,"averageRent":22333.33,"minRent":7500,"maxRent":35000,"totalRentals":6},{"bedrooms":6,"averageRent":77500,"minRent":75000,"maxRent":80000,"totalRentals":2},{"bedrooms":7,"averageRent":65000,"minRent":65000,"maxRent":65000,"totalRentals":2},{"bedrooms":140,"averageRent":14000,"minRent":14000,"maxRent":14000,"totalRentals":1},{"bedrooms":460,"averageRent":4600,"minRent":4600,"maxRent":4600,"totalRentals":1}]},"2020-05":{"averageRent":24452.75,"minRent":1600,"maxRent":80000,"totalRentals":789,"detailed":[{"bedrooms":0,"averageRent":4245.28,"minRent":1600,"maxRent":44894,"totalRentals":137},{"bedrooms":1,"averageRent":3891.14,"minRent":2300,"maxRent":44894,"totalRentals":284},{"bedrooms":2,"averageRent":7296.89,"minRent":2595,"maxRent":40000,"totalRentals":246},{"bedrooms":3,"averageRent":9765.93,"minRent":3595,"maxRent":40000,"totalRentals":102},{"bedrooms":4,"averageRent":16542.22,"minRent":5100,"maxRent":49900,"totalRentals":9},{"bedrooms":5,"averageRent":21833.33,"minRent":6500,"maxRent":35000,"totalRentals":6},{"bedrooms":6,"averageRent":77500,"minRent":75000,"maxRent":80000,"totalRentals":2},{"bedrooms":7,"averageRent":65000,"minRent":65000,"maxRent":65000,"totalRentals":2},{"bedrooms":140,"averageRent":14000,"minRent":14000,"maxRent":14000,"totalRentals":1}]},...```
'''
Up until this month of this year
1条答案
按热度按时间gg0vcinb1#
首先将你的JSON转换成JS。有几种方法可以做到这一点，这取决于你如何获得JSON字符串，但例如：
然后，您需要转换数据，但是您想要的确切输出将取决于您使用的图表插件（Chart.js比较流行）以及您想要显示的内容（按邮政编码、平均租金、卧室）。
示例数据中有一个语法错误，但您需要迭代
parsedData.rentalData.history，例如使用.forEach()