Recharts 由不同数据组成的图表

Question

我需要 recharts 库方面的帮助。我需要构建下面的图表：

如您所见，只有 15 个柱状图，但折线图是由数千个点组成的。有没有办法使用组合图表，一个条形组件不连接线组件？

这是我能做的最接近的：

Answer 1

找到解决方案：显然，您可以使用多个 x-axis。我已经为 ComposedChart 组件提供了条形图数据，制作了 2 个 XAxis 组件并为它们提供了 xAxisId。 XAxis 之一（折线图的那个）用属性 hide={true} 隐藏。

折线组件有数据属性，我在其中传递了折线图数据。请找到以下代码：

<ComposedChart data={barData}>
  <XAxis xAxisId={1} />
  <XAsis xAxisId={2} hide={true} />
  <Tooltip />
  <Legend />
  <Bar xAxisId={1} dataKey="pv" barSize={20} />
  <Line xAxisId={2} data={lineData} dataKey="uv" dot={false} stroke="#000000" />
</ComposedChart>

结果如下：

Recharts 由不同数据组成的图表

Recharts composed chart with different data

reactjs

recharts