图表：甜甜圈图，中间有两个标签

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

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

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 2

您应该使用Label组件的content 属性来创建您自己的自定义 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>
  )
}