recharts使用响应式容器的饼图居中使用

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%'>