甜甜圈中的中心文本反应

Question

centerText: {
    display: true,
    text: `${income}`,
    fontSize : 10
}

我无法使用圆环图选项中的代码查看中心文本。 有人知道为什么吗？

提前致谢

Answer 1

前段时间研究在react-chartjs-2的Doughnut中添加居中文本的时候，我简单的想起了在Donut中实现居中文本最简单的方法其实是使用相对和绝对定位来添加一层甜甜圈。

<div style={{ width: '200px', height: '200px', position: 'relative'}}>
    <Doughnut data={data} options={options} width={200} height={200}/>
        <div style={{ position: 'absolute', width: '100%', top: '50%', left: 0, textAlign: 'center', marginTop: '-28px',  lineHeight: '20px'}}>
            <span>Text here</span> //may use text-align here to center text
        </div>
        </div>