React Recharts-从不同的对象获取数据 [英] React Recharts- getting data from different objects

问题描述

我正在使用React Recharts进行可视化，但是，在显示具有不同对应对象内容的简单条形图时遇到了挑战.

[
  {
    "month": "2017-07",
    "commodities": [
      { "name": "wheat", "moves": 100, "avg_weight": 167 },
      { "name": "maize", "moves": 150, "avg_weight": 367 },
      { "name": "grains", "moves": 89, "avg_weight": 467 }
    ]
  },
  {
    "month": "2017-08",
    "commodities": [
      { "name": "mangoes", "moves": 140, "avg_weight": 167 },
      { "name": "grains", "moves": 190, "avg_weight": 47 }
    ]
  },
  {
    "month": "2017-09",
    "commodities": [
      { "name": "wheat", "moves": 130, "avg_weight": 267 },
      { "name": "tomatoes", "moves": 176, "avg_weight": 132 },
      { "name": "onions", "moves": 120, "avg_weight": 47 }
    ]
  },
  {
    "month": "2018-10",
    "commodities": [
      { "name": "oranges", "moves": 130, "avg_weight": 267 },
    ]
  },
]

我有这个示例json对象，我希望将月份作为XAxis，将商品作为YAx. 理想情况下，下图是我要如何显示数据的表示. 谢谢您的帮助，.

解决方案

通过三个步骤即可获得所需的内容-

1. 将数据转换为图表要求格式
2. 获取唯一标签

这是工作代码沙箱 https://codesandbox.io/s/n95n2wpp6l

 import React, { Component } from "react";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend
} from "recharts";
import _ from "underscore";

class BarGraph extends Component {
  state = {
    converted: [],
    labels: []
  };
  componentDidMount() {
    let data = [
      {
        month: "2017-07",
        commodities: [
          { name: "wheat", moves: 100, avg_weight: 167 },
          { name: "maize", moves: 150, avg_weight: 367 },
          { name: "grains", moves: 89, avg_weight: 467 }
        ]
      },
      {
        month: "2017-08",
        commodities: [
          { name: "mangoes", moves: 140, avg_weight: 167 },
          { name: "grains", moves: 190, avg_weight: 47 }
        ]
      },
      {
        month: "2017-09",
        commodities: [
          { name: "wheat", moves: 130, avg_weight: 267 },
          { name: "tomatoes", moves: 176, avg_weight: 132 },
          { name: "onions", moves: 120, avg_weight: 47 }
        ]
      },
      {
        month: "2018-10",
        commodities: [{ name: "oranges", moves: 130, avg_weight: 267 }]
      }
    ];
    let converted = this.convertData(data);
    let labels = this.getLabels(data);
    console.log(labels, converted);

    this.setState({
      converted: converted,
      labels: labels
    });
  }

  convertData(data) {
    let arr = [];
    for (let i = 0; i < data.length; i++) {
      let obj = { month: data[i].month };
      // loop throgh comodities
      for (let j = 0; j < data[i].commodities.length; j++) {
        let commodity = data[i].commodities[j];
        obj[commodity.name] = commodity.moves;
      }
      arr.push(obj);
    }
    return arr;
  }

  getLabels(data) {
    let arr = [];
    _.each(data, obj => {
      arr = arr.concat(obj.commodities);
    });
    let grouped = _.groupBy(arr, "name");
    return Object.keys(grouped);
    //return Object.keys(_.groupby(arr.name));
  }

  render() {
    return (
      <BarChart
        width={600}
        height={300}
        data={this.state.converted}
        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Legend />
        {this.state.labels.map((label, index) => (
          <Bar key={index} dataKey={label} fill="#8884d8" />
        ))}
      </BarChart>
    );
  }
}

export default BarGraph; 

I am using React Recharts for my visualization, however, I am having a challenge displaying a simple bar chart with different corresponding object contents.

[
  {
    "month": "2017-07",
    "commodities": [
      { "name": "wheat", "moves": 100, "avg_weight": 167 },
      { "name": "maize", "moves": 150, "avg_weight": 367 },
      { "name": "grains", "moves": 89, "avg_weight": 467 }
    ]
  },
  {
    "month": "2017-08",
    "commodities": [
      { "name": "mangoes", "moves": 140, "avg_weight": 167 },
      { "name": "grains", "moves": 190, "avg_weight": 47 }
    ]
  },
  {
    "month": "2017-09",
    "commodities": [
      { "name": "wheat", "moves": 130, "avg_weight": 267 },
      { "name": "tomatoes", "moves": 176, "avg_weight": 132 },
      { "name": "onions", "moves": 120, "avg_weight": 47 }
    ]
  },
  {
    "month": "2018-10",
    "commodities": [
      { "name": "oranges", "moves": 130, "avg_weight": 267 },
    ]
  },
]

I have this sample json object, I would like to have the month as my XAxis and commodities' moves as my YAxs. Ideally, the image below is representation of how I want to display my data. Thank you for your assistance,.

解决方案

There are three steps to get what you are looking for-

1. Convert the data to Rechart require format
2. Get the unique labels

Here is the working code sandbox https://codesandbox.io/s/n95n2wpp6l

import React, { Component } from "react";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend
} from "recharts";
import _ from "underscore";

class BarGraph extends Component {
  state = {
    converted: [],
    labels: []
  };
  componentDidMount() {
    let data = [
      {
        month: "2017-07",
        commodities: [
          { name: "wheat", moves: 100, avg_weight: 167 },
          { name: "maize", moves: 150, avg_weight: 367 },
          { name: "grains", moves: 89, avg_weight: 467 }
        ]
      },
      {
        month: "2017-08",
        commodities: [
          { name: "mangoes", moves: 140, avg_weight: 167 },
          { name: "grains", moves: 190, avg_weight: 47 }
        ]
      },
      {
        month: "2017-09",
        commodities: [
          { name: "wheat", moves: 130, avg_weight: 267 },
          { name: "tomatoes", moves: 176, avg_weight: 132 },
          { name: "onions", moves: 120, avg_weight: 47 }
        ]
      },
      {
        month: "2018-10",
        commodities: [{ name: "oranges", moves: 130, avg_weight: 267 }]
      }
    ];
    let converted = this.convertData(data);
    let labels = this.getLabels(data);
    console.log(labels, converted);

    this.setState({
      converted: converted,
      labels: labels
    });
  }

  convertData(data) {
    let arr = [];
    for (let i = 0; i < data.length; i++) {
      let obj = { month: data[i].month };
      // loop throgh comodities
      for (let j = 0; j < data[i].commodities.length; j++) {
        let commodity = data[i].commodities[j];
        obj[commodity.name] = commodity.moves;
      }
      arr.push(obj);
    }
    return arr;
  }

  getLabels(data) {
    let arr = [];
    _.each(data, obj => {
      arr = arr.concat(obj.commodities);
    });
    let grouped = _.groupBy(arr, "name");
    return Object.keys(grouped);
    //return Object.keys(_.groupby(arr.name));
  }

  render() {
    return (
      <BarChart
        width={600}
        height={300}
        data={this.state.converted}
        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Legend />
        {this.state.labels.map((label, index) => (
          <Bar key={index} dataKey={label} fill="#8884d8" />
        ))}
      </BarChart>
    );
  }
}

export default BarGraph;

这篇关于React Recharts-从不同的对象获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！