reactjs - 堆积条形图不显示时间序列 X 轴的条形值 - ReactJS Recharts

Question

我有一些 JSON 数据将在 ReactJS 应用程序中使用 RechartJS 显示在堆积条形图中。

我使用type="number"X 轴来显示时间序列中的数据，但图表的显示方式如下：

如您所见：有数据但未显示条形图，使用type="category"X 轴将显示条形图，但这不会提供一种方法来显示带有空数据的日期，除非这些日期已填充到 JSON 中。

数据是一个对象数组，如下所示：

    [
      {
        "date": 1632200400000,
        "Banana": 4,
        "Apples": 15,
        "Oranges": 12,
        "Strawberry": 10,
        "BlueBerries": 8,
        "Cherries": 8,
        "Mango": 2,
        "Kiwi": 4,
        "Lemon": 4,
        "Grapes": 6
      },
      ...
    ]

还有一系列用于条形的项目：

[
  "Banana",
  "Apples",
  "Oranges",
  "Strawberry",
  "BlueBerries",
  "Cherries",
  "Mango",
  "Kiwi",
  "Lemon",
  "Grapes"
]

代码如下所示：

<BarChart data={data} width={600} height={300}>
  <XAxis
    dataKey="date"
    domain={["dataMin", "dataMax"]}
    padding={{ left: 32, right: 32 }}
    type="number"
    interval={0}
    tickFormatter={(time) => format(new Date(time), "HH:mm")}
  />
  <YAxis width={100} orientation="left" />

  {items.map((itemName) => (
    <Bar
      barSize={20}
      dataKey={itemName}
      stackId="a"
      fill={generateColor()}
    />
  ))}

  <CartesianGrid />
  <Tooltip />
  <Legend />
</BarChart>

在这里您可以找到代码的代码框： https ://codesandbox.io/s/recharts-stackbar-time-series-3z8s5

标签： reactjsrecharts