Recharts: кольцевая диаграмма с несколькими метками - PullRequest
0 голосов
/ 03 февраля 2020

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

const {PieChart, Pie, Legend, Tooltip, Cell, Label} = Recharts;
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

const data01 = [{name: 'Group A', value: 455}, {name: 'Group B', value: 146}]

const RADIAN = Math.PI / 180;

const polarToCartesian = (cx, cy, radius, angle) => ({
  x: cx + Math.cos(-RADIAN * angle) * radius,
  y: cy + Math.sin(-RADIAN * angle) * radius,
});

const renderCustomizedLabel = (props) => { 
  const endPoint =polarToCartesian(props.cx, props.cy, props.outerRadius + 20, props.midAngle);
  const startPoint = polarToCartesian(props.cx, props.cy, props.outerRadius, props.midAngle);

  return (
           <g>
            <text textAnchor="end"  x={endPoint.x} y={endPoint.y}>Mammals</text>
            <line  x1={startPoint.x} y1={startPoint.y} x2={endPoint.x} y2={endPoint.y} stroke={props.fill} key="line" strokeWidth="2"/>
           </g>
         );
};

const TwoSimplePieChart = React.createClass({
    render () {
    return (
        <PieChart width={800} height={800}>
        <Pie 
        data={data01} 
        cx={300}
        cy={150} 
        innerRadius={60}
        outerRadius={80} 
        fill="#8884d8"
        labelLine={false}
        label={renderCustomizedLabel}
        paddingAngle={2}
        startAngle={43.7271}
        endAngle={360+43.7271}
        >
        <Label 
        value={data01.map(e => e.value).reduce((p, n) => p + n)} position="centerBottom"  fontSize='27px'
        />
          {
            data01.map((entry, index) => <Cell fill={COLORS[index % COLORS.length]}/>)
          }
        </Pie>
        <Tooltip/>
       </PieChart>
    );
  }
})

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

Мне бы хотелось, чтобы конечный результат был похож на это:

enter image description here

...