javascript - 甜甜圈中的CenterText反应

Question

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

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

先感谢您

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>