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