使用响应式容器重新定位饼图

Question

我正在使用recharts来创建饼图。查看此示例时，http://recharts.org/#/en-US/examples/PieResponsiveContainer可以使用ResponsiveContainer组件对饼图进行居中。

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

Answer 1

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

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

然后是容器：

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

Answer 2

我知道这是一个较晚的答案，但是对于试图将<PieChart>与width和height居中的任何人，请将cx传递给{ {1}}。

就像

<PieChart>