Перемещение метки PieChart за пределы круга - ReactJs / Rechart - PullRequest
Новая
       83

Перемещение метки PieChart за пределы круга - ReactJs / Rechart

0 голосов
/ 30 мая 2020

Я использую Recharts и не могу понять, как переместить процентные метки моей диаграммы p ie за пределы диаграммы p ie:

enter image description here

Вот мой код PieChart: 

  <ResponsiveContainer width="100%" height={300}>
  <PieChart height={250}>
    <Pie
      data={this.props.data}
      cx="50%"
      cy="60%"
      outerRadius={100}
      fill="#8884d8"
      dataKey="value"
      label={({
        cx,
        cy,
        midAngle,
        innerRadius,
        outerRadius,
        percent,
        index
      }) => {
        const RADIAN = Math.PI / 180;
        // eslint-disable-next-line
        const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
        // eslint-disable-next-line
        const x = cx + radius * Math.cos(-midAngle * RADIAN);
        // eslint-disable-next-line
        const y = cy + radius * Math.sin(-midAngle * RADIAN);

        return (
          <text
            x={x}
            y={y}
            fill="#000000"
            textAnchor={x > cx ? "start" : "end"}
            dominantBaseline="hanging"
          >
            {this.props.data[index].name} ({`${(percent * 100).toFixed(0)}%`})
          </text>
        );
      }}
      onClick={this.props.handleClick}
    >
      {
        this.props.data.map((entry, index) => <Cell key={`cell-${index}`} fill={chartColors[index % chartColors.length]} />)
      }
    </Pie>
  </PieChart>
</ResponsiveContainer>

Я предполагаю, что со свойствами textAnchor и dominantBaseline нужно повозиться, но я не знаю, как используй их. Может ли кто-нибудь указать мне правильное направление? Спасибо!

1 Ответ

0 голосов
/ 27 августа 2020

Я пытался понять это сам и нашел решение ... вам нужно изменить 0,5 

const radius = innerRadius + (outerRadius - innerRadius) * 0.5;

Я изменил свой на

const radius = innerRadius + (outerRadius - innerRadius) * 1.4;

...