Recharts：隐藏值未定义的栏答案

【问题标题】：Recharts: Hide Bar where value is undefinedRecharts：隐藏值未定义的栏
【发布时间】：2020-02-28 23:11:18
【问题描述】：

我有一个 Recharts BarChart 组件，一周中的每一天都有 3 个不同的值：primary、secondary 和 tertiary。在某些情况下，secondary 和 tertiary 没有数据。如果没有数据，我希望映射到这些键的特定 Bar 组件在那些特定日期根本不呈现，但是我正在努力寻找任何方法来做到这一点。

我像这样使用BarChart：

<BarChart
  width={700}
  height={500}
  data={data}
>
  <XAxis dataKey="name" />
  <YAxis />
  <Bar dataKey="primary" fill="#009734" />
  <Bar dataKey="secondary" fill="#D97800" />
  <Bar dataKey="tertiary" fill="#C1BEBE" />
</BarChart>

这是我的数据目前的样子：

[{
  name: 'Tue',
  primary: 8,
}, {
  name: 'Wed',
  primary: 7,
  secondary: 5,
}, {
  name: 'Thu',
  primary: 12,
  secondary: 9,
  tertiary: 7,
}]

渲染时，我看到了这个：

但是，我宁愿根本不将那些无价值的条形图添加到图表中，以便将其他数据移到更集中的位置，并且将每日图表移得更近：

这是一个粗略的图像编辑，但我认为它说明了我正在尝试做的事情。

我可以通过 Recharts 实现这一点吗？

【问题讨论】：

标签： javascript reactjs charts bar-chart recharts

【解决方案1】：

Recharts 目前不支持此选项。

有一个 2 年前的 open issue 很可能被回答的人误解了（操作想要隐藏像你这样的条形图 - 以缺失数据而不是整个条形图为条件，如“隐藏”属性或减少数据允许）。

【讨论】：