javascript - 如何遍历对象数组并将每个对象显示到图表中?
问题描述
我正在尝试使用 React 创建仪表板,第一部分是显示我的本地 API 数据。这是使用 ComponentDidMount 从前端获取的,并使用 splice 仅使用 METRIC = SPEND。我试图仅获取此数据的第一个对象并使用 PRODUCT 和 UPLIFT 创建图表。谷歌图表需要这样的数据https://react-google-charts.com/bar-chart#basic-bar-chart-with-multiple-series
关于我如何做到这一点的任何想法?我试图映射数组,但正如您在代码的最后一部分中看到的那样,它循环遍历数组并创建 3 个图表,而不是将所有数据放入 1 个图表中。
我正在使用 react-google-charts 创建我的图表。
"error": false,
"data": [
{
"id": 1,
"METRIC": "Spend",
"PRODUCT": "Offer",
"EXPOSED": 62717.14,
"CONTROL": 56355.78,
"UPLIFT": 6361.36,
"PCT_UPLIFT": 0.11
},
{
"id": 2,
"METRIC": "Spend",
"PRODUCT": "Brand",
"EXPOSED": 1037739.72,
"CONTROL": 979580.56,
"UPLIFT": 58159.16,
"PCT_UPLIFT": 0.06
},
{
"id": 3,
"METRIC": "Spend",
"PRODUCT": "Aisle",
"EXPOSED": 4084428.18,
"CONTROL": 3880807.25,
"UPLIFT": 203620.93,
"PCT_UPLIFT": 0.05
},
{
"id": 4,
"METRIC": "Units",
"PRODUCT": "Offer",
"EXPOSED": 25117.02,
"CONTROL": 22537.94,
"UPLIFT": 2579.08,
"PCT_UPLIFT": 0.11
},
{
"id": 5,
"METRIC": "Units",
"PRODUCT": "Brand",
"EXPOSED": 506365.64,
"CONTROL": 479277.36,
"UPLIFT": 27088.28,
"PCT_UPLIFT": 0.06
},
{
"id": 6,
"METRIC": "Units",
"PRODUCT": "Aisle",
"EXPOSED": 1771305.29,
"CONTROL": 1682430.67,
"UPLIFT": 88874.62,
"PCT_UPLIFT": 0.05
},
{
"id": 7,
"METRIC": "Visits",
"PRODUCT": "Offer",
"EXPOSED": 22661.99,
"CONTROL": 20480.76,
"UPLIFT": 2181.23,
"PCT_UPLIFT": 0.11
},
{
"id": 8,
"METRIC": "Visits",
"PRODUCT": "Brand",
"EXPOSED": 413568.96,
"CONTROL": 391852.96,
"UPLIFT": 21716,
"PCT_UPLIFT": 0.06
},
{
"id": 9,
"METRIC": "Visits",
"PRODUCT": "Aisle",
"EXPOSED": 1220181.72,
"CONTROL": 1161775.92,
"UPLIFT": 58405.8,
"PCT_UPLIFT": 0.05
},
{
"id": 10,
"METRIC": "Total_custs",
"PRODUCT": "Offer",
"EXPOSED": 15827,
"CONTROL": 14346.53,
"UPLIFT": 1480.47,
"PCT_UPLIFT": 0.1
},
{
"id": 11,
"METRIC": "Total_custs",
"PRODUCT": "Brand",
"EXPOSED": 301593,
"CONTROL": 282900.38,
"UPLIFT": 18692.62,
"PCT_UPLIFT": 0.07
},
{
"id": 12,
"METRIC": "Total_custs",
"PRODUCT": "Aisle",
"EXPOSED": 795653,
"CONTROL": 749896.76,
"UPLIFT": 45756.24,
"PCT_UPLIFT": 0.06
}
],
"message": "top table"
}
import React from 'react';
import { Chart } from 'react-google-charts';
import './App.css';
class App extends React.Component {
constructor() {
super();
this.state = {
top_spend: []
}
}
componentDidMount() {
fetch('http://localhost:3000/top')
.then(response => response.json())
.then(data => {
this.setState({top_spend: data.data.splice(0,3)}, () => {
console.log("Top_Spend", this.state.top_spend);
})
})
}
render() {
let top = this.state.top_spend;
return (
<div className="App">
{top.map(function(name, index) {
return (
<div key={index}>
<Chart
height={'300px'}
width={'400px'}
chartType="Bar"
loader={<div>Loading Chart</div>}
data={[
['', 'UPLIFT', 'PCT_UPLIFT'],
[name.PRODUCT, name.UPLIFT, name.PCT_UPLIFT],
]}
options={{
chart: {
title: 'Company',
},
chartArea: {width: '50%'},
isStacked: true,
}}
/>
</div>
)
})}
</div>
);
}
}
export default App;
解决方案
所以这里的问题是你正在迭代data
,从而为每个条目制作一个图表,如果我理解正确的话,你想把它全部合并到一个图表中。因此,与其直接迭代数据,不如迭代传递给Chart
. 所以代码看起来像这样
<Chart
data={[
['', 'UPLIFT', 'PCT_UPLIFT'],
...data.map(d => [ d.PRODUCT, d.UPLIFT, d.PCT_UPLIFT ])
]}
/>
推荐阅读
- python - 如果键不存在,则将字典值映射到列表并返回原始值
- regex - 正则表达式确定图像文件是否从 Facebook 下载
- swift - 如何转换绑定
绑定 ? - c++ - 什么时候让函数成为 C++ 中的类成员函数?
- node.js - 为什么我收到一个数据库错误,我的表没有名为关键字的列?
- python - 将文件中的单词附加到其他不同的文件
- python - 以列的形式向外部文件添加值
- c - CS50 中的分段错误恢复
- python - 如何使用 Flask 将 Keras-yolo 模型部署到网络上?
- docker - 无法使用 docker-compose 文件中指定的主机名连接 docker MySQL 服务器容器