无法使量规图（使用Recharts Pie）适合容器

Question

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

[现在看起来如何：

应该看起来像：

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

Answer 1

您可以使用顶部和底部边距（顶部：760，底部：560）：

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