Блог

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

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

Во-первых, первый сегмент перекрывает остальные по обоим краям. Я не знаю, как это исправить, несмотря на мои поиски.
Далее, я борюсь с правильным выравниванием легенды. Я не нашел способа определить ширину текста svg, чтобы длинный текст переходил на следующую строку. (Эти тексты содержатся в переменных, а не жестко закодированы)

Это мое chart.js . Я обрезал некоторые части, чтобы упростить, но при необходимости опубликую все целиком.

 const renderLabelContent = (props) => {
  const { value, title, x, y, midAngle } = props;
  return (
    <g transform={`translate(${x}, ${y})`} textAnchor={'start'}>
      <text x={(midAngle < -90 || midAngle >= 90) ? (0 - (title.length * 3)) : 0} y={0}
        {`${title}`}
      </text>
      <text x={(midAngle < -90 || midAngle >= 90) ? (0 - (title.length * 3)) : 0} y={20}>
        {`${value}`}€
      </text>
    </g>
  );
};
...
export default class Chart extends Component {
...
  render() {
    return (
      <div className="pie-charts">
        <div className="pie-chart-wrapper">
          <PieChart width={400} height={400}>
            <Pie
              stroke="none"
              legendType="circle"
              data={this.state.data}
              dataKey="value"
              startAngle={180}
              endAngle={-180}
              cornerRadius={100}
              innerRadius={60}
              outerRadius={80}
              label={renderLabelContent}
              paddingAngle={-10}
              labelLine={false}
              isAnimationActive={true}
            >
              {
                data.map((entry, index) => (
                  <Cell key={`slice-${index}`} fill={entry.color} />
                ))
              }
              <Label width={50} position="center">
                2,87€
              </Label>
            </Pie>
          </PieChart>
        </div>
      </div>
    );
  }
}
 

Я думаю, что есть несколько способов решить проблему с ярлыками, в rechargs вы можете поместить компонент React в content опору Label, и это может быть способом для вас ввести свой собственный пользовательский текстовый компонент, который имеет max-width и wrap , например:

 <Label content={<Text warp style={{maxWidth:"50px"}}>long string </Text> } />
 

Еще один вариант — поиграть со offset свойством метки, но он гибкий и повлияет на общую позицию метки, например:

   <Label value="Pages of my website" offset={0} position="center" />