10

我有一个甜甜圈图，我需要在其中添加两个堆叠的标签，我已经完成了。我不知道如何在它们之间添加一点垂直空间。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>

在此处输入图像描述

在此处输入图像描述

4

3 回答 3

5

您应该使用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>
  )
}
于 2018-01-03T12:30:02.433 回答
4

这是一个老问题，但我最近玩过这个问题，看起来你可以使用多个标签组件并使用 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/

于 2020-01-14T02:46:27.987 回答
1

我需要一个在另一个之上的标签。我做了以下更改来完成它。

<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>
    </>
  );
于 2020-09-27T11:11:32.553 回答