recharts - 在 Recharts 图表顶部叠加文本

Question

我正在尝试在 Recharts 图表的右下角添加一段静态文本(与显示的数据无关)。

我可以将一些 CSS 和 HTML 组合在一起，以从相邻的 DOM 元素获取文本，但我宁愿使用 recharts API 来实现。

有什么想法吗？谢谢!

Answer 1

您可以使用 rechart 图表内的 <text> 元素在您希望的任何位置添加任意文本。

例如:

import {
    RadialBarChart,
    RadialBar,
    Legend,
    Tooltip,
} from 'recharts'

const data = [
    {
        name: 'Target (5%)',
        uv: 5,
        pv: 4567,
        fill: '#777',
    },
    {
        name: 'Growth %',
        uv: 8.3,
        pv: 2400,
        fill: '#22AA22',
    },
]

const RadialBarChart01 = () => {
    return (
        <RadialBarChart
            width={400}
            height={400}
            innerRadius='70%'
            outerRadius='120%'
            data={data}
            startAngle={180}
            endAngle={0}
        >
            <RadialBar
                label={{ fill: '#FFF', position: 'insideStart' }}
                background
                clockWise={true}
                dataKey='uv'
            />
            <text
                x='50%'
                y='50%'
                dy={+12}
                style={{ fontSize: 48, fontWeight: 'bold', fill: '#22AA22' }}
                width={200}
                scaleToFit={true}
                textAnchor='middle'
                verticalAnchor='middle'
            >
                8.3%
            </text>
            <text
                x='50%'
                y='60%'
                style={{ fontSize: 24, fontWeight: 'bold', fill: '#777' }}
                width={200}
                scaleToFit={true}
                textAnchor='middle'
                verticalAnchor='middle'
            >
                Target: 5%
            </text>
            <Legend
                iconSize={20}
                width={120}
                height={100}
                layout='vertical'
                verticalAlign='bottom'
                align='center'
            />
            <Tooltip />
        </RadialBarChart>
    )
}

export default RadialBarChart01

查看图像捕获结果: