0

我正在使用 Recharts 并且有一个显示折线图和条形图的组件。这两个图表显示相同的 7 天跨度，但刻度未对齐。折线图从 Y 轴线开始，而条形图有左填充（默认情况下）。

在折线图上，我尝试添加 padding={{left: 100 }}，它使 X 轴的起点对齐，但其余的刻度都关闭了，更重要的是它不响应屏幕尺寸。据我所知，不允许使用“5%”之类的东西。

在条形图上，我尝试将填充设置为零和负数，但在响应缩放和刻度错位方面遇到了同样的问题。

有没有办法对齐两个图表上的刻度和数据？

这是代码：

<ResponsiveContainer width="95%" height={300} >
  <LineChart width={350} height={300} data={this.props.data.activityResponse.edges} connectNulls={true} >
    <Legend verticalAlign="top" height={36}/>
    <Line type="monotone" dataKey="node.participation" stroke={this.participationColor} name="Participation" strokeWidth={this.strokeWidth} />
    <Line type="monotone" dataKey="node.focus" stroke={this.focusColor} name="Focus" strokeWidth={this.strokeWidth} />
    <XAxis dataKey="node.logDate" tickFormatter={this.formatXAxis} />
    <YAxis dataKey="node.participation" >
      <Label value="%" position="insideLeft" />
    </YAxis>
    <Tooltip content={this.renderResponseTooltip} />
  </LineChart>
</ResponsiveContainer>
<ResponsiveContainer width="95%" height={300} >
  <BarChart width={350} height={300} data={this.props.data.activityStep.edges} connectNulls={true} >
    <Legend verticalAlign="top" height={36}/>
    <Bar dataKey="node.stepCount" fill={this.stepColor} name="Steps" />
    <XAxis dataKey="node.logDate" tickFormatter={this.formatXAxis} />
    <YAxis dataKey="node.stepCount" >
    </YAxis>
    <Tooltip content={this.renderStepTooltip} />
  </BarChart>
</ResponsiveContainer>

Recharts 折线图和条形图对齐

4

2 回答 2

2

我不确定您是否仍然对此感兴趣，因为这个问题已经很老了，但我找到了一个适合我的解决方案。

你可以ComposedChart用来解决这个问题。使用您的代码，解决方案应如下所示：

<ResponsiveContainer width="95%" height={300} >
  <ComposedChart data={this.props.data.activityResponse.edges} connectNulls={true} >
    <Legend verticalAlign="top" height={36}/>
    <Line type="monotone" dataKey="node.participation" stroke={this.participationColor} name="Participation" strokeWidth={this.strokeWidth} />
    <Line type="monotone" dataKey="node.focus" stroke={this.focusColor} name="Focus" strokeWidth={this.strokeWidth} />
    <XAxis dataKey="node.logDate" tickFormatter={this.formatXAxis} />
    <YAxis dataKey="node.participation" >
      <Label value="%" position="insideLeft" />
    </YAxis>
    <Tooltip content={this.renderResponseTooltip} />
  </ComposedChart>
</ResponsiveContainer>
<ResponsiveContainer width="95%" height={300} >
  <ComposedChart data={this.props.data.activityStep.edges} connectNulls={true} >
    <Legend verticalAlign="top" height={36}/>
    <Bar dataKey="node.stepCount" fill={this.stepColor} name="Steps" />
    <XAxis dataKey="node.logDate" tickFormatter={this.formatXAxis} />
    <YAxis dataKey="node.stepCount" >
    </YAxis>
    <Tooltip content={this.renderStepTooltip} />
  </ComposedChart>
</ResponsiveContainer>

我还删除了图表上的宽度/高度参数，因为 ResponsiveContainer 已经处理好了。

就我个人而言，当我尝试水平对齐区域和条形图时，这解决了问题。

在此处输入图像描述

为两个图表提供同步 ID，通过将该属性添加到两个 ComposedCharts，工具提示也将同时出现在两个图表中。

在此处输入图像描述

于 2019-01-17T08:25:58.940 回答
0

在这种情况下，此链接可能会有所帮助。

尝试syncId="anyId"LineChar 和 BarChar 元素。

Rechart - SynchronizedLineChart

于 2018-03-20T07:53:10.527 回答