javascript - 使用响应式容器重新绘制饼图居中

Question

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

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

Answer 1

ResponsiveContainer 只是让馅饼采用其容器的大小。如果您检查 html，您会发现容器实际上是其父容器的大小。如果要居中，可以让容器不带整个父级，使用css。像这样:

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

然后是容器:

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