ReCharts：中心に2つのラベルがあるドーナツチャート

Question

ドーナツチャートは、私が行った中央に2つの重ねたラベルを追加する必要があります。私が理解できないのは、間に少し垂直なスペースを追加する方法です。 ReChartsはこれらの行を両方ともSVGとしてレンダリングします。グラフはレスポンシブなコンテナにあり、ハードコードされた値はありません。私は中央で単一のラベルを取得する方法を知っていますが、グラフ全体のレンダリングメソッドを記述することなく2つの別々のラベルを取得する方法を理解することはできません。提案？

<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

子供とvalueプロパティの両方が唯一の文字列または数字を受け入れるため、独自のカスタムラベルを作成するために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> 
) 
} 

contentプロパティを使用すると、のようなコンポーネントを渡すことができます