使用响应式容器重新绘制饼图居中答案

【问题标题】：recharts pie chart centering using responsive container使用响应式容器重新绘制饼图居中
【发布时间】：2018-01-30 10:25:44
【问题描述】：

我正在使用 recharts 创建饼图。看这个例子，http://recharts.org/#/en-US/examples/PieResponsiveContainer 饼图可以使用 ResponsiveContainer 组件居中。

但我的尝试失败了：https://codesandbox.io/s/ll68p643xl。尝试将视口的大小更改为更大的宽度，饼图不再居中。我想知道这里出了什么问题。

【问题讨论】：

标签： javascript reactjs recharts

【解决方案1】：

我知道这是一个迟到的答案，但对于任何试图将 <PieChart> 与 width 和 height 居中的人，请将 cx 属性传递到 <PieChart> 宽度的一半。

喜欢，

  <PieChart width={this.props.width} height={this.props.height}>
    <Pie
      cx={this.props.width / 2}
      cy={200}
      label
      outerRadius={this.props.pieData.radius}
      data={this.props.pieData.data}
      dataKey={this.props.pieData.dataKey}>
    </Pie>
  </PieChart>

【讨论】：

【解决方案2】：

ResponsiveContainer 只是让馅饼占据其容器的大小。如果您检查 html，您将看到容器实际上是其父容器的大小。如果要居中，可以使容器不占用整个父级，并使用 css。像这样的：

.pie-row .pie-wrap > div {
    background: red;
    margin: 0 auto;
}

然后是容器：

<ResponsiveContainer className="container" height={70} width='30%'>

【讨论】：

我通过移除 Pie 上的 cx 道具解决了这个问题
谢谢@CeciliaChan！你的回答对我来说效果更好
谢谢@CeciliaChan，你是女神！哈哈，我们花了很多时间在这上面，这是一个非常简单的解决方案