如何遍历对象数组并将每个对象显示到图表中? [英] How do I iterate through an Array of Objects and display each objects into a Chart?
问题描述
我正在尝试使用 React 创建仪表板，第一部分是显示我的本地 API 数据.这是使用 ComponentDidMount 从前端获取的，并使用 splice 仅使用 METRIC = SPEND.我试图仅获取此数据的第一个对象并使用 PRODUCT 和 UPLIFT 创建图表.Google-charts 需要这样的数据 https://react-google-charts.com/bar-chart#basic-bar-chart-with-multiple-series
关于我如何做到这一点的任何想法?我曾尝试映射数组，但正如您在代码的最后部分所见，它遍历数组并创建 3 个图表，而不是将所有数据放入 1 个图表中.
我正在使用 react-google-charts 创建我的图表.
"error": false,数据": [{身份证":1，"METRIC": "花费","产品": "报价",暴露":62717.14，控制":56355.78，上升":6361.36，PCT_UPLIFT":0.11},{身份证":2，"METRIC": "花费","产品": "品牌",暴露":1037739.72，控制":979580.56，上升":58159.16，PCT_UPLIFT":0.06},{身份证":3，"METRIC": "花费","产品": "过道",暴露":4084428.18，控制":3880807.25，上升":203620.93，PCT_UPLIFT":0.05},{身份证":4，"METRIC": "单位","产品": "报价",暴露":25117.02，控制":22537.94，上升":2579.08，PCT_UPLIFT":0.11},{身份证":5，"METRIC": "单位","产品": "品牌",暴露":506365.64，控制":479277.36，上升":27088.28，PCT_UPLIFT":0.06},{身份证":6，"METRIC": "单位","产品": "过道",暴露":1771305.29，控制":1682430.67，上升":88874.62，PCT_UPLIFT":0.05},{身份证":7，"METRIC": "访问次数","产品": "报价",暴露":22661.99，控制":20480.76，上升":2181.23，PCT_UPLIFT":0.11},{身份证":8，"METRIC": "访问次数","产品": "品牌",暴露":413568.96，控制":391852.96，上升":21716，PCT_UPLIFT":0.06},{身份证":9，"METRIC": "访问次数","产品": "过道",暴露":1220181.72，控制":1161775.92，上升":58405.8，PCT_UPLIFT":0.05},{身份证":10，"METRIC": "Total_custs","产品": "报价",暴露":15827，控制":14346.53，上升":1480.47，PCT_UPLIFT":0.1},{身份证":11，"METRIC": "Total_custs","产品": "品牌",暴露":301593，控制":282900.38，上升":18692.62，PCT_UPLIFT":0.07},{身份证":12，"METRIC": "Total_custs","产品": "过道",暴露":795653，控制":749896.76，上升":45756.24，PCT_UPLIFT":0.06}],"message": "顶桌"}从反应"导入反应；从'react-google-charts'导入{图表}；导入'./App.css';类 App 扩展了 React.Component {构造函数(){极好的();this.state = {最高花费:[]}}componentDidMount() {fetch('http://localhost:3000/top').then(response => response.json()).then(数据=> {this.setState({top_spend: data.data.splice(0,3)}, () => {console.log("Top_Spend", this.state.top_spend);})})}使成为() {让顶部 = this.state.top_spend;返回 (<div className="应用程序">{top.map(function(name, index) {返回 (<div key={index}><图表高度={'300px'}宽度={'400px'}图表类型=条"loader={<div>加载图表</div>}数据={[['', 'UPLIFT', 'PCT_UPLIFT'],[名称.产品，名称.UPLIFT，名称.PCT_UPLIFT]，]}选项={{图表: {title: '公司',},图表区域:{宽度:'50％'}，isStacked: 真,}}/>)})}
);}}导出默认应用程序；
所以这里的问题是您正在迭代 data，从而为每个条目制作一个图表，如果我理解正确的话，您想将其全部合并到一张图表中.因此，不是直接迭代数据，而是希望迭代传递给 Chart 的 prop 中的数据.所以代码看起来像这样
<图表数据={[['', 'UPLIFT', 'PCT_UPLIFT'],...data.map(d => [ d.PRODUCT, d.UPLIFT, d.PCT_UPLIFT ])]}/>I am trying to create a dashboard using React, The first part is showing my local API data. This is being fetched from the front end using ComponentDidMount and using splice to only use the METRIC = SPEND. I am trying to grab only the first object of this data and use the PRODUCT and UPLIFT to create a chart. Google-charts requires data like this https://react-google-charts.com/bar-chart#basic-bar-chart-with-multiple-series
Any ideas on how i can do this? I have tried to map over the array but as you can see in the last part of the code, it is looping over the array and creating 3 charts instead of putting all the data into 1 chart.
I am using react-google-charts for create my Chart.
"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;
So the issue here is that you are iterating over data, thus making a chart for each entry when, if I understand correctly, you want to combine it all into one chart. So instead of iterating over data directly, you would want to iterate over data in the prop passed to Chart. So the code would look something like this
<Chart
data={[
['', 'UPLIFT', 'PCT_UPLIFT'],
...data.map(d => [ d.PRODUCT, d.UPLIFT, d.PCT_UPLIFT ])
]}
/>
这篇关于如何遍历对象数组并将每个对象显示到图表中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
