Question

我正在使用Recharts并且有一个显示折线图后跟条形图的组件。这两个图表显示的是相同的七天范围，但是不对齐。折线图从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>

Answer 1

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

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

Rechart - SynchronizedLineChart

Answer 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>

我还删除了图表上的width / height参数，因为ResponsiveContainer会解决这个问题。

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

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

Recharts - 水平对齐线条和条形图

2 个答案: