У меня есть кольцевая диаграмма, в которой мне нужно добавить двухстрочную метку, чтобы детализировать содержимое диаграммы. У меня хорошо отрисовывается график, но отрисовка меток линий очень проблематична 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')
);
Мне бы хотелось, чтобы конечный результат был похож на это: