reactjs - ReCharts:圆环图，中心有两个标签

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/