此问题在此处已有答案:
How to add text inside the doughnut chart using Chart.js?(共16个答案)
27天前关闭。
我需要得到的标签在甜甜圈的中心,如第二个图像所示。我尝试了一些方法,但它似乎不工作。我也附上了我目前的代码。谢谢你的帮助我。
export class DoughnutChartDemo extends Component {
constructor(props) {
super(props);
this.chartData = {
labels: ['A', 'B', 'C'],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
this.lightOptions = {
plugins: {
legend: {
labels: {
color: '#495057'
}
}
}
};
}
render() {
return (
<div className="card flex justify-content-center">
<Chart type="doughnut" data={this.chartData} options={this.lightOptions} style={{ position: 'relative', width: '40%' }} />
</div>
)
}
}
至
1条答案
按热度按时间rqdpfwrv1#
我已经创造了。2请试试这个。3我希望这个能帮助你们。
此预览:https://zw3zw7.csb.app/和这是我的代码和框:https://codesandbox.io/s/react-chart-js-doughnut-center-label-zw3zw7?file=/src/index.js:0-1646