Rechart - добавление меток к диаграммам

Я пытаюсь научиться использовать Rechart. В документации говорится, что вы можете размещать метки на элементах диаграммы, и приводится пример того, как это сделать, используя "имя" в качестве ключа данных метки.

Я пытался сделать это в моем графике, но это не работает.

Если я уберу "ярлык" из поля, ярлыки не появятся. Если я сохраню это, то единственными метками, которые будут отображаться, являются значения на сегментах круговой диаграммы.

У меня есть метка с ключом данных 'name' (согласно документации), но она не отображается на диаграмме.

import React, { PureComponent } from 'react';
import {
  ResponsiveContainer, PieChart, Pie, Legend, Label, LabelList
} from 'recharts';

const data = [
  { name: 'Group A', value: 400 }, { name: 'Group B', value: 300 },
  { name: 'Group C', value: 300 }, { name: 'Group D', value: 200 },
];

export default class Example extends PureComponent {
  static jsfiddleUrl = '//jsfiddle.net/alidingling/6okmehja/';

  render() {
    return (
      <div style={{ width: '100%', height: 300 }}>
        <ResponsiveContainer>
          <PieChart>
            <Pie dataKey="value" 
            data={data} 
            fill="#8884d8" 
            Label dataKey="name"    
            />
          </PieChart>
        </ResponsiveContainer>
      </div>
    );
  }
}

Как добавить метки в круговые диаграммы?

Ответ 1

Извините за задержку, я наконец-то смог найти решение, даже если оно не очень простое

const {ResponsiveContainer, PieChart, Pie, Legend} = Recharts;

const data = [{name: 'Group A', value: 400}, {name: 'Group B', value: 300},
                  {name: 'Group C', value: 300}, {name: 'Group D', value: 200}]

const RADIAN = Math.PI / 180;

const renderCustomizedLabel = ({
  x, y, name
}) => {
  return (
    <text x={x} y={y} fill="black" textAnchor="end" dominantBaseline="central">
      {name}
    </text>
  );
};

const SimplePieChart = React.createClass({
    render () {
    return (
        <ResponsiveContainer>
        <PieChart>
          <Pie data={data} fill="#8884d8" label={renderCustomizedLabel} nameKey="name"/>
        </PieChart>
       </ResponsiveContainer>
    );
  }
})

ReactDOM.render(
  <SimplePieChart />,
  document.getElementById('container')
);

Ответ 2

Для тех, кто ищет ответ, это работает:

Определите функцию для отображения меток так, как вы хотите, например:

let renderLabel = function(entry) {
    return entry.name;
}

Установите метку реквизита, чтобы она указывала на вашу функцию:

<Pie label={renderLabel} [ you other properties ]>
[ your content ]
</Pie>

Ответ 3

Вы можете найти пример для PieChartWithCustomizedLabel в http://recharts.org/en-US/examples/PieChartWithCustomizedLabel

или ниже код поможет вам

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

const data = [
  { name: 'Group A', value: 400 },
  { name: 'Group B', value: 300 },
  { name: 'Group C', value: 300 },
  { name: 'Group D', value: 200 },
];

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

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>
  );
};

export default class Example extends PureComponent {
  static jsfiddleUrl = 'https://jsfiddle.net/alidingling/c9pL8k61/';

  render() {
    return (
      <PieChart width={400} height={400}>
        <Pie
          data={data}
          cx={200}
          cy={200}
          labelLine={false}
          label={renderCustomizedLabel}
          outerRadius={80}
          fill="#8884d8"
          dataKey="value"
        >
          {
            data.map((entry, index) => <Cell key={'cell-${index}'} fill={COLORS[index % COLORS.length]} />)
          }
        </Pie>
      </PieChart>
    );
  }
}

Демо здесь - ссылка