ReCharts:圆环图 w/two 标签居中
ReCharts: Donut Chart w/two labels in center
我有一个圆环图,我需要在中间添加两个堆叠标签,我已经完成了。我想不通的是如何在两者之间添加一点垂直 space。 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>
您应该使用 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>
)
}
这是一个老问题,但我最近玩过这个,看起来你可以使用多个 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/
我需要一个在另一个上面的标签。我做了以下更改来完成它。
<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>
</>
);
我有一个圆环图,我需要在中间添加两个堆叠标签,我已经完成了。我想不通的是如何在两者之间添加一点垂直 space。 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>
您应该使用 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>
)
}
这是一个老问题,但我最近玩过这个,看起来你可以使用多个 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/
我需要一个在另一个上面的标签。我做了以下更改来完成它。
<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>
</>
);