Question

我有一个圆环图，我需要在中心添加两个堆叠标签，我已经完成了。我无法弄清楚的是如何在它们之间添加一点垂直空间。 ReCharts将这两行渲染为SVG图表位于响应容器中，因此没有硬编码值。我知道如何在中心获得单个标签但无法弄清楚如何在不为整个图表编写渲染方法的情况下获得两个单独的标签。建议？

<ResponsiveContainer>
            <PieChart >
              <Tooltip/>
              <Legend
                verticalAlign="bottom"
                align="left"
                iconType="circle"
                payload={ getCustomLegendValues(tasks) } />
              <Pie
                data={tasks}
                nameKey="name"
                dataKey="value"
                innerRadius="60%"
                outerRadius="80%"
                startAngle={90}
                endAngle={-270}
                fill="#8884d8">
                {
                  tasks.map((entry, index) => <Cell fill={ entry.color }/>)
                }
                <Label width={30} position="center">
                  { `${totalTasks} ${tasksNameLabel}` }
                </Label>
              </Pie>
            </PieChart>
          </ResponsiveContainer>

Answer 1

您应该使用content property of the Label组件来创建自己的自定义Label，因为children和value属性只接受字符串或数字。使用content属性，您可以传递一个组件：

<Label width={30} position="center"
  content={<CustomLabel value1={totalTasks} value2={tasksNameLabel}/>}>
</Label>

和CustomLabel组件：

function CustomLabel({viewBox, value1, value2}){
  const {cx, cy} = viewBox;
  return (
   <text x={cx} y={cy} fill="#3d405c" className="recharts-text recharts-label" textAnchor="middle" dominantBaseline="central">
      <tspan alignmentBaseline="middle" fontSize="26">{value1}</tspan>
      <tspan fontSize="14">{value2}</tspan>
   </text>
  )
}

Answer 2

这是一个老问题，但是我最近玩过这个问题，看起来您可以使用多个Label组件并使用CSS调整它们的位置。这是我从“图表”示例中调整的内容：

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

const data01 = [{name: 'Group A', value: 5}, {name: 'Group B', value: 4},
                 {name: 'Group C', value: 1}, {name: 'Group D', value: 1}]

const TwoSimplePieChart = React.createClass({
   render () {
   return (
       <PieChart width={800} height={400}>
       <Pie 
       data={data01} 
       cx={300}
       cy={150} 
       innerRadius={60}
       outerRadius={70} 
       fill="#8884d8"
       paddingAngle={2}
       >
       <Label 
       value="6" position="centerBottom"  className='label-top' fontSize='27px'
       />
       <Label 
       value="tasks left" position="centerTop" className='label'
       />
         {
           data01.map((entry, index) => <Cell fill={COLORS[index % COLORS.length]}/>)
         }
       </Pie>
       <Tooltip/>
      </PieChart>
   );
 }
})

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

和CSS：

.label-top {
    transform: translateY(-10px);
}

您可以在此处检查JSFiddle：https://jsfiddle.net/trung2012/pcbq3146/34/

Answer 3

我需要标签一个接一个。我进行了以下更改以实现它。

<Label width={30} position="center"
  content={<CustomLabel value1={totalTasks} value2={tasksNameLabel}/>}>
</Label>

“自定义”标签如下：

function CustomLabel(props) {
  const { cx, cy } = props.viewBox;
  return (
    <>
      <text
        x={cx}
        y={cy - 5}
        fill="rgba(0, 0, 0, 0.87)"
        className="recharts-text recharts-label"
        textAnchor="middle"
        dominantBaseline="central"
      >
        <tspan alignmentBaseline="middle" fontSize="31.5px" fontFamily="Roboto">
          {props.value2}
        </tspan>
      </text>
      <text
        x={cx}
        y={cy + 20}
        fill="rgba(0, 0, 0, 0.54)"
        className="recharts-text recharts-label"
        textAnchor="middle"
        dominantBaseline="central"
      >
        <tspan fontSize="12.3px" fontFamily="Roboto">
          {props.value1}
        </tspan>
      </text>
    </>
  );

ReCharts：圆环图中心有两个标签

3 个答案: