时间戳

首页 > 解决方案 > 无法使仪表图表（使用 Recharts Pie）适合容器

reactjs - 无法使仪表图表（使用 Recharts Pie）适合容器

问题描述

我有一个基本的仪表图（见下文）组件，它使用 startAngle={180} 和 endAngle={0} 呈现 PieChart，但我无法使其适合容器...

现在的样子：

在此处输入图像描述

它应该是什么样子：

在此处输入图像描述

这是一个基本版本的演示：https ://codesandbox.io/s/recharts-playground-3zibx

标签： reactjspie-chartrecharts

解决方案

使用 cy 道具并按百分比分配值。前任。cy={'70%'}。

<div style={{ width: 500, height: 260, border: "1px solid black" }}>
  <PieChart height={260} width={500}>
    <Pie startAngle={180}
         endAngle={0}
         innerRadius="55%"
         data={data}
         dataKey="value"
         labelLine={false}
         blendStroke
         isAnimationActive={false}
         cy={"70%"}>
      <Cell fill="#000" />
      <Cell fill="#eaeaea" />
    </Pie>
    </PieChart>
</div>

推荐阅读