使用内部的值标签绘制饼图

时间:2019-03-19 17:48:43

标签: reactjs recharts

使用图表库,我想创建一个像这样的甜甜圈图: https://apexcharts.com/javascript-chart-demos/pie-charts/simple-donut/

具体地说,值标签在饼图段中。我可以在文档中找到的唯一示例使用自定义renderLabel,但我希望使用新的label组件,这样会更容易: http://recharts.org/en-US/examples/PieChartWithCustomizedLabel

,在此示例之后,这是我可以获得的最接近的标签,但标签未居中: enter image description here

这是新的Label组件文档。我试过了: <Label position="inside />

这是customLabelRendering的代码:

const RADIAN = Math.PI / 180;
const renderCustomizedLabel = ({
  cx, cy, midAngle, innerRadius, outerRadius, percent, index,
}) => {
   const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
  const x = cx + radius * Math.cos(-midAngle * RADIAN);
  const y = cy + radius * Math.sin(-midAngle * RADIAN);

  return (
    <text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
      {`${(percent * 100).toFixed(0)}%`}
    </text>
  );
};

1 个答案:

答案 0 :(得分:5)

您可以将<text />标签与textAnchor="middle"对齐,这会将它们在所有单元格的中心对齐。

赞:

<text x={x} y={y} fill="white" textAnchor="middle" dominantBaseline="central">
  {`${(percent * 100).toFixed(0)}%`}
</text>

您的最终代码应如下所示:

const RADIAN = Math.PI / 180;
const renderCustomizedLabel = ({
  cx, cy, midAngle, innerRadius, outerRadius, percent, index,
}) => {
   const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
  const x = cx + radius * Math.cos(-midAngle * RADIAN);
  const y = cy + radius * Math.sin(-midAngle * RADIAN);

  return (
    <text x={x} y={y} fill="white" textAnchor="middle" dominantBaseline="central">
      {`${(percent * 100).toFixed(0)}%`}
    </text>
  );
}

以上内容适用于文本,但是如果您需要在中心放置图像,请使用<svg /><image />

return (
  <svg
    x={x - 12}
    y={y - 12}
    fill="#666"
    textAnchor={"middle"}
    dominantBaseline="central"
    width={24}
    height={24}
    viewBox="0 0 1024 1024"
  >
    <image
      href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"
      height="100%"
      width="100%"
    />
  </svg>
);

enter image description here