使用响应式容器绘制饼图居中显示

Question

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

但我的尝试失败了：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%'>