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

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

в частности, метки значений находятся внутри сегментов круговой диаграммы. единственный пример, который я могу найти в документации, использует пользовательский renderLabel, но я надеялся, что с новым компонентом метки это будет проще: http://recharts.org/en-US/examples/PieChartWithCustomizedLabel

и, следуя этому примеру, это самое близкое, что я могу найти, но метки не центрированы: введите описание изображения здесь

вот документы нового компонента 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>
  );
};

reactjs recharts
person jonnie    schedule 19.03.2019    source источник
comment
Можете ли вы дополнить код?   -  person Jibin Joseph    schedule 19.03.2019
comment
recharts.org/en-US/examples/PieChartWithCustomizedLabel   -  person varoons    schedule 19.03.2019
comment
Я прошу код, по которому он прибыл, где метки не совпадают.   -  person Jibin Joseph    schedule 19.03.2019
comment
@ godof23 Я обновил вопрос, указав конкретный раздел этого кода, который связан с varoons, и то, что я использую для генерации меток сейчас   -  person jonnie    schedule 19.03.2019
comment
Фрагмент рабочего кода / jsfiddle был бы лучше, пожалуйста.   -  person Jibin Joseph    schedule 19.03.2019
comment
ссылка recharts в моем исходном вопросе имеет jsfiddle ...   -  person jonnie    schedule 20.03.2019
comment
@ godof23 в размещенных мною ссылках есть рабочий jsfiddle ... jsfiddle.net/alidingling/c9pL8k61   -  person jonnie    schedule 20.03.2019
comment
textAnchor = middle, похоже, добавил мне некоторые улучшения. Я думаю, что ширина и высота текста здесь неизвестны, и их трудно компенсировать.   -  person Shane    schedule 29.07.2019

Ответы (1)


arrow_upward
6
arrow_downward

Вы можете выровнять метку <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>
);

введите описание изображения здесь

person Rusty    schedule 23.03.2020