Блог

Я использую recharts для визуализации некоторых диаграмм с PieChart помощью и Pie . Это многослойная диаграмма пончиков. Я хочу ввести текст метки в каждом разделе диаграммы. Когда я вызываю метку в окне PieChart , она показывает мне числовые значения за пределами диаграммы пончиков. Я хочу ввести текст внутри диаграммы пончиков.

 import React from 'react';
import { PieChart, Pie } from 'recharts';

export default function App() {
  const data01 = [
    {
      "name": "Group A",
      "value": 2400
    },
    {
      "name": "Group B",
      "value": 4567
    },
    {
      "name": "Group C",
      "value": 1398
    },
    {
      "name": "Group D",
      "value": 9800
    },
    {
      "name": "Group E",
      "value": 3908
    },
    {
      "name": "Group F",
      "value": 2000
    }
  ];
  const data02 = [
    {
      "name": "Group A",
      "value": 1000,
      "fill": "#77D970"
    },
    {
      "name": "Group B",
      "value": 1000,
      "fill": "#77D970"
    },
    {
      "name": "Group C",
      "value": 1000,
      "fill": "#77D970"
    },
    {
      "name": "Group D",
      "value": 1000,
      "fill": "#77D970"
    },
    {
      "name": "Group E",
      "value": 1000,
      "fill": "#77D970"
    },
    {
      "name": "Group F",
      "value": 1000,
      "fill": "#4B6587",
      "uv": "21"
    }
  ];
  const data03 = [
    {
      "name": "Group A",
      "value": 1000
    },
    {
      "name": "Group B",
      "value": 1000
    },
    {
      "name": "Group C",
      "value": 1000
    },
    {
      "name": "Group D",
      "value": 1000
    },
    {
      "name": "Group E",
      "value": 1000
    },
    {
      "name": "Group F",
      "value": 1000
    }
  ];
  const data04 = [
    {
      "name": "Group A",
      "value": 1000,
    },
    {
      "name": "Group B",
      "value": 1000
    },
    {
      "name": "Group C",
      "value": 1000
    },
    {
      "name": "Group D",
      "value": 1000
    },
    {
      "name": "Group E",
      "value": 1000
    },
    {
      "name": "Group F",
      "value": 1000
    }
  ];
  const data05 = [
    {
      "name": "Group A",
      "value": 1000
    },
    {
      "name": "Group B",
      "value": 1000
    },
    {
      "name": "Group C",
      "value": 1000
    },
    {
      "name": "Group D",
      "value": 1000
    },
    {
      "name": "Group E",
      "value": 1000
    },
    {
      "name": "Group F",
      "value": 1000
    }
  ];
  const data06 = [
    {
      "name": "Group A",
      "value": 1000,
    },
    {
      "name": "Group B",
      "value": 1000
    },
    {
      "name": "Group C",
      "value": 1000
    },
    {
      "name": "Group D",
      "value": 1000
    },
    {
      "name": "Group E",
      "value": 1000
    },
    {
      "name": "Group F",
      "value": 1000
    }
  ];
  const data07 = [
    {
      "name": "Group A",
      "value": 1000,
    },
    {
      "name": "Group B",
      "value": 1000,
    },
    {
      "name": "Group C",
      "value": 1000,
    },
    {
      "name": "Group D",
      "value": 1000,
    },
    {
      "name": "Group E",
      "value": 1000,
    },
    {
      "name": "Group F",
      "value": 1000,
    }
  ];

  return (
    <div>
      <PieChart width={1000} height={800}>
        {/* <Pie data={data01} dataKey="value" nameKey="name" cx="50%" cy="50%" innerRadius={40} outerRadius={60} fill="#8884d8" /> */}
        <Pie data={data02} dataKey="value" nameKey="name" cx="50%" cy="50%" innerRadius={50} outerRadius={70} />
        <Pie data={data03} dataKey="value" nameKey="name" cx="50%" cy="50%" innerRadius={70} outerRadius={90} fill="#77D970" />
        <Pie data={data04} dataKey="value" nameKey="name" cx="50%" cy="50%" innerRadius={90} outerRadius={110} fill="#77D970" />
        <Pie data={data05} dataKey="value" nameKey="name" cx="50%" cy="50%" innerRadius={110} outerRadius={130} fill="#77D970" />
        <Pie data={data06} dataKey="value" nameKey="name" cx="50%" cy="50%" innerRadius={130} outerRadius={150} fill="#D5D5D5" />
        <Pie data={data07} dataKey="value" nameKey="name" cx="50%" cy="50%" innerRadius={150} outerRadius={170} fill="#4B6587" label />
      </PieChart>
    </div>
  );
}
 

Это мой код. Это многослойная диаграмма пончиков.

Из rechart документации:

Если установлено значение false, метки рисоваться не будут. Если установлено значение true, будут нарисованы метки, для которых реквизиты рассчитаны внутри. Если объект задан, будут нарисованы метки, в которых реквизиты объединены с помощью внутренне рассчитанных реквизитов и опции. Если задан параметр ReactElement, этот параметр может быть элементом пользовательской метки. Если задать функцию, она будет вызвана для отображения настроенной метки.

Таким образом, вы можете передать пользовательский компонент react для рендеринга с label реквизитами:

Вы можете создать свою собственную пользовательскую метку и импортировать ее в App компонент, вот пример:

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

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

Теперь передайте renderCustomizedLabel label свойство в Pie элементе:

 <Pie
  data={data02} 
  dataKey="value"
  nameKey="name" 
  cx="50%" 
  cy="50%" 
  innerRadius={50}  
  outerRadius={70}
  label={renderCustomizedLabel}
  labelLine={false}
/>
 

Примечание: Также установите labelLine false значение, чтобы игнорировать рисование линии для отображения метки.