我需要用 React-Chart-js2 制作甜甜圈图。图表应如下所示
问题:
- 我在图表中添加了数据(12%、10% 等)。但是如何添加标签(1星,2星)?
- 如何将文本(1234 总反馈)放在图表的中心?
- 是否可以突出显示图像中提到的悬停部分?
代码: const donutChart = {
labels:['1 star','2 star','3 star','4 star'],
datasets: [{
data: [10, 50, 10,40],
backgroundColor: [
'#808080',
'#808080',
'#808080',
'#808080'
],
hoverBackgroundColor: [
'#FF5733',
'#FF5733',
'#FF5733',
'#FF5733'
],
hoverBorderColor : [
'#FF5733',
'#FF5733',
'#FF5733',
'#FF5733'
],
}
]
}
function Reports() {
return (
<div>
<Doughnut
data={donutChart}
options={{
padding:"0px",
responsive:true,
maintainAspectRatio:true,
defaultFontSize:"14px",
title:{
display:true,
text:'Total Feedback',
fontSize:30,
},
legend:{
display:false,
},
plugins:{
datalabels: {
color:'red',
anchor: "start",
align:"end",
}
}
}}
/>
</div>
)
}