我正在尝试根据饼图的标签定义定义的backgroundcolor和hoverbackgroundcolor(我有4个标签:银,金,青铜和新标签)。我尝试了很多事情,但图表的每个标签仍然有一种颜色...(图片) 听起来我的函数repartition_fidelite没有使用我的变量backgroundcolor和hoverbackground color ...
谢谢您的帮助!
图片:
chart.js:
const repartition = document.getElementById("repartition-fidelite");
var backgroundColor = function (context) {
const lab = context.dataset.label
if (lab === 'gold')
return '#c49c48';
else if (lab === 'silver')
return '#A5A49B';
else if (lab === 'bronze')
return '#614E1A';
else if (lab === 'new')
return '#f4f3f3';
end
};
var hoverBackgroundColor = function (context) {
const lab = context.label
if (lab === 'gold')
return '#c49c48';
else if (lab === 'silver')
return '#A5A49B';
else if (lab === 'bronze')
return '#614E1A';
else if (lab === 'new')
return '#f4f3f3';
end
};
var borderColor = [
'#E8B500',
'#AFAFAF',
'#9E5C1F',
];
if (repartition) {
const repartition_fidelite = new Chart(repartition,{
type: 'pie',
data: {
labels: JSON.parse(repartition.dataset.points_em),
datasets: [{
data: JSON.parse(repartition.dataset.points),
backgroundColor: backgroundColor,
hoverBackgroundColor: hoverBackgroundColor,
borderColor: borderColor,
borderWidth: 1
}]
},
options: {
legend: {
position: 'bottom',
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
let sum = 0;
let dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
let percentage = (value*100 / sum).toFixed(0)+"%";
return percentage;
},
color: '#232947',
},
},
}
});
}