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

如果要在創建自己的自定義標籤使用content property of the Label組件，因爲兩個孩子和值屬性只接受字符串或數字。隨着內容屬性，您可以通過組件這樣：

<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> 
) 
}