如何遍历对象数组并将每个对象显示到图表中？答案

【问题标题】：How do I iterate through an Array of Objects and display each objects into a Chart?如何遍历对象数组并将每个对象显示到图表中？
【发布时间】：2019-12-23 05:16:19
【问题描述】：

我正在尝试使用 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;

【问题讨论】：

标签： javascript reactjs api charts fetch

【解决方案1】：

所以这里的问题是你正在迭代data，因此如果我理解正确的话，你想为每个条目制作一个图表，如果我理解正确的话，你想把它全部合并到一个图表中。因此，与其直接迭代数据，不如迭代传递给Chart 的道具中的数据。所以代码看起来像这样

<Chart
  data={[
    ['', 'UPLIFT', 'PCT_UPLIFT'],
    ...data.map(d => [ d.PRODUCT, d.UPLIFT, d.PCT_UPLIFT ])
  ]}
/>

【讨论】：