如何遍历对象数组并将每个对象显示在图表中? [英] 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图表需要这样的数据 https://react-google-charts.com/bar-chart#basic-bar-chart-with-multiple-series

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

关于我该怎么做的任何想法?我已经尝试过在数组上进行映射，但是正如您在代码的最后一部分中所看到的那样，它正在数组上循环并创建3个图表，而不是将所有数据都放入1个图表中.

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.

我正在使用react-google-charts创建我的图表.

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;

推荐答案

因此，这里的问题是您要遍历 data ，从而在我理解正确的情况下为每个条目绘制一个图表.您想将所有内容合并到一张图表中.因此，与其直接遍历数据，不如遍历传递给 Chart 的prop中的数据.所以代码看起来像这样

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屋！