如何使用顺风更改 rechart 饼图的大小和位置

我正在使用 tailwind-css 构建 react nextJs 应用程序,并且我正在使用 recharts饼图。我的图表过去可以正常工作,但我没有得到,如何增加图表的宽度和高度?

// <ResponsiveContainer width="100%" height="100%">
<PieChart width={400} height={400}>
  <Pie
    data={payments.payments}
    cx="50%"
    cy="50%"
    labelLine={true}
    label={renderCustomizedLabel}
    outerRadius={80}
    fill="#8884d8"
    dataKey="value"
  >
    {payments.payments.map((entry, index) => (
      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
    ))}
  </Pie>
  <Tooltip />
</PieChart>
// </ResponsiveContainer>

size?

如果我使用顺风网格系统,它不会应用更改。 以及如何在顺风中使用屏幕尺寸将其定位在屏幕上?

stack overflow how to change the size and position of a rechart's pie chart using tailwind
原文答案

答案:

作者头像

我想你可以试试这个。

<div className="w-64 h-48 use tailwind classes here">
    <ResponsiveContainer width="100%" height="100%">
        <PieChart>
          <Pie
            data={payments.payments}
            cx="50%"
            cy="50%"
            labelLine={true}
            label={renderCustomizedLabel}
            outerRadius={80}
            fill="#8884d8"
            dataKey="value"
          >
            {payments.payments.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
            ))}
          </Pie>
          <Tooltip />
        </PieChart>
       </ResponsiveContainer>
   </div>
作者头像

您可以更改外部半径属性以增加饼图大小