reactjs - 如何在 recharts 中制作饼图 hiegher

Question

如何使图表中的饼图更高？容器中有空位，我想展开图表，如何？

我的代码是：

        <ResponsiveContainer
            height={285} 
        >
            <PieChart
                margin={{ top: 0, left: 0, right: 0, bottom: 0 }}  
            >
                <Pie 
                    data={datasets} 
                    innerRadius={60}
                    outerRadius={80}
                    fill="#8884d8"
                    paddingAngle={0}
                    dataKey="value" 
                >
                    {
                        datasets.map((_, index: number) => <Cell key={backgroundColor[index]} fill={backgroundColor[index]} />)
                    }
                </Pie> 
            </PieChart>
        </ResponsiveContainer>

演示： https ://jsfiddle.net/op0cq2ja/4/

请参阅图像上的问题：

标签： reactjspie-chartrecharts

Answer 1

如果要增加饼图的半径，请更改Pie's outerRadiusprop.

您还可以更改innerRadius道具以增加或减少馅饼中心孔的面积。