Javascript React Recharts-从不同对象获取数据

我使用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。 理想情况下，下图显示了我希望如何显示数据。 谢谢你的帮助，。

---

要获得您想要的东西，有三个步骤-

将数据转换为Rechart require格式

获取唯一的标签

这是工作代码沙盒

import React，{Component}来自“React”；
进口{
柱状图，
酒吧，
XAxis，
亚克斯，
CartesianGrid，
工具提示，
传奇
}来自“雷哈特”；
从“下划线”导入；
类条形图扩展组件{
状态={
转换为：[]，
标签：[]
};
componentDidMount（）{
让数据=[
{
月份：“2017-07”，
商品：[
{名称：“小麦”，移动：100，平均重量：167}，
{名称：“玉米”，移动：150，平均重量：367}，
{名称：“谷物”，移动：89，平均重量：467}
]
},
{
月份：“2017-08”，
商品：[
{名称：“芒果”，移动：140，平均重量：167}，
{名称：“谷物”，移动：190，平均重量：47}
]
},
{
月份：“2017-09”，
商品：[
{名称：“小麦”，移动：130，平均重量：267}，
{名称：“西红柿”，移动：176，平均重量：132}，
{名称：“洋葱”，移动：120，平均重量：47}
]
},
{
月份：“2018-10”，
商品：[{名称：“橙子”，移动：130，平均重量：267}]
}
];
让converted=this.convertData（数据）；
让labels=this.getLabels（数据）；
console.log（标签，已转换）；
这是我的国家({
转换：转换，
标签：标签
});
}
转换数据（数据）{
设arr=[]；
for（设i=0；i{
arr=arr.concat（对象商品）；
});
设grouped=uu.groupBy（arr，“name”）；
返回Object.key（分组）；
//返回Object.keys（u.groupby（arr.name））；
}
render（）{
返回(
{this.state.labels.map（（label，index）=>(
))}
);
}
}
导出默认条形图请发布您尝试的内容？以下是Recharts网站的一个示例。您还可以使用tickFormatter属性更改x轴时间格式。首先，感谢您的帮助。但是，当标签不在当月时，是否可以删除“空栏”的显示？