переписывает круговую диаграмму с метками значений внутри - PullRequest
Новая
       20

переписывает круговую диаграмму с метками значений внутри

0 голосов
/ 19 марта 2019

используя библиотеку recharts, я хотел бы создать кольцевую диаграмму, например: https://apexcharts.com/javascript-chart-demos/pie-charts/simple-donut/

в частности, метки значений находятся внутри сегментов круговой диаграммы. единственный пример, который я могу найти в документах, использует пользовательский renderLabel, но я надеялся, что с новым компонентом метки это будет проще: 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>
  );
};
...