我已经在 Chart js 中创建了一个设计来响应,但现在我想在它的每个托盘上输入一些图标。那么,有人可以帮帮我吗?请在此处查看图片https://drive.google.com/file/d/1NsS6ARTrhITQQWQRk0e55vIgBkO00CqP/view?usp=sharing
左边的图片描述了我到目前为止所做的,右边的描述了我想要的。谢谢你
<CCardBody className="p-0 piechart-nav">
<CChartPie
datasets={[
{
backgroundColor: [
"rgba(0, 120, 210, 0.8)",
"rgba(0, 120, 210, 0.8)",
"rgba(0, 120, 210, 0.8)",
"rgba(0, 120, 210, 0.8)",
"rgba(0, 120, 210, 0.8)",
"rgba(0, 120, 210, 0.8)",
"rgba(0, 120, 210, 0.8)",
"rgba(0, 120, 210, 0.8)",
"rgba(0, 120, 210, 0.8)",
"rgba(0, 120, 210, 0.8)",
],
hoverBackgroundColor: [
"rgba(60, 60, 110, 1)",
"rgba(60, 60, 110, 1)",
"rgba(60, 60, 110, 1)",
"rgba(60, 60, 110, 1)",
"rgba(60, 60, 110, 1)",
"rgba(60, 60, 110, 1)",
"rgba(60, 60, 110, 1)",
"rgba(60, 60, 110, 1)",
"rgba(60, 60, 110, 1)",
"rgba(60, 60, 110, 1)",
],
data: [36, 36, 36, 36, 36, 36, 36, 36, 36, 36],
},
]}
labels={[
"This is Business.",
"this is Good News.",
"this is Religious Service. ",
"this is Resource. ",
"this is Organization. ",
"this is Professional.",
"this is Hotel & Restaurants.",
"this is Music Video and Talent Show. ",
"this is Events. ",
"this is Discussion & forums.",
]}
options={{
tooltips: {
enabled: true,
bodyFontSize: 20,
yPadding: 25,
xPadding: 25,
displayColors: false,
callbacks: {
label: function (tooltipItems, data) {
return data.labels[tooltipItems.index];
},
},
yAlign: "bottom",
callbacks: {
labelColor: function (tooltipItem, chart) {
return {
backgroundColor: "rgba(60, 60, 110, 1)",
};
},
},
backgroundColor: "rgba(60, 60, 110, 1)",
},
legend: {
display: false,
},
layout: {
padding: {
left: -0,
},
},
responsive: true,
maintainAspectRatio: false,
}}
/>
</CCardBody>;