Recharts Label position centerBottom работает, но не является допустимым значением - PullRequest
Новая
       23

Recharts Label position centerBottom работает, но не является допустимым значением

0 голосов
/ 25 марта 2020

Следующий код - рендеринг по желанию . Однако свойство Label position выделяется как ошибка JSX, поскольку centerBottom не является допустимым значением . Ввод значения без позиции приводит к расположению текста сверху, ввод centerBottom дает точное позиционирование, которое я хочу: базовая линия текста прилегает к нижней части SVG (к вашему сведению: это значение уже было в примере, который я нашел). Все другие соответствующие официальные значения, insideBottom, insideBottomLeft и insideBottomRight, не имеют никакого эффекта (текст остается вверху) и не будут центрироваться в любом случае. center позиционирует метку внизу, но выравнивает вертикальный центр текста с нижней частью SVG, тем самым раскрывая только верхнюю половину. Смущенный ? 

// PieChartWithPaddingAngle.tsx
import React, { PureComponent } from "react";
import { PieChart, Pie, Cell, Label, ResponsiveContainer } from "recharts";

const data = [
  { name: "Group A", value: 250 },
  { name: "Group B", value: 250 },
  { name: "Group C", value: 125 },
  { name: "Group D", value: 125 },
  { name: "Group E", value: 250 },
  { name: "Group F", value: 250 },
  { name: "Group G", value: 250 }
];

const COLORS = [
  "#146cb4",
  "#146cb4",
  "#146cb4",
  "#F2F1F0",
  "#F2F1F0",
  "#F2F1F0",
  "#F2F1F0"
];

export default class PieChartWithPaddingAngle extends PureComponent {
  render() {
    return (
      <ResponsiveContainer>
        <g>
          <PieChart width={410} height={215}>
            <Pie
              data={data}
              cx={"50%"}
              cy={"100%"}
              startAngle={180}
              endAngle={0}
              innerRadius={180}
              outerRadius={200}
              fill={""}
              paddingAngle={1}
              isAnimationActive={false}
              nameKey="name"
              dataKey="value"
            >
              <Label
                value={2.5}
                position="centerBottom"
                offset={0}
                className="gauge-label"
                fontSize="50px"
                fontWeight="bold"
              />
              {data.map((entry, index) => (
                <Cell
                  key={`cell-${index}`}
                  fill={COLORS[index % COLORS.length]}
                />
              ))}
            </Pie>
          </PieChart>
        </g>
      </ResponsiveContainer>
    );
  }
}
...