我正在学习ChartJS并遵循本教程。试图调整代码，以适应一个甜甜圈图表，但由于某种原因，图表的背景颜色没有出现在我。有人知道为什么吗?如果需要更多的信息，请告诉我。
file1.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
</head>
<body>
<h1> OUTPUT </h1></br>
<h2> For 6_BTV-SISPA R1, there were 37425 hits out of 1316368 reads </h2></br></br>
<div class="container"></br>
<canvas id="diamondChart1"></canvas></br></br>
<script src="simplified.js"></br>
</script></br></br>
</footer>
</footer>
</body>
</html>
simplified.js
let myChart1 = document.getElementById("diamondChart1").getContext("2d");
Chart.defaults.global.defaultFontFamily = "Courier";
Chart.defaults.global.defaultFontSize = 18;
Chart.defaults.global.defaultFontColor = "#777";
var massPopChart = new Chart(myChart1, {
type:"doughnut",
data:{
labels: ['UniRef90Hello'],
datasets:[{
label:'Population',
data: [7],
backgroundColour: "rgba(255, 99, 132, 0.6)",
// backgroundColour: [
// 'rgba(54, 162, 235, 0.6)'
// ],
borderWidth:1,
borderColor:"#777",
hoverBorderWidth:3,
hoverBorderColor:"#000"
}]
},
options:{
title:{
display:true,
text:"Diamond Hits from R1",
fontSize:30
},
legend:{
display:false,
position:"right",
labels:{
fontColor:"#000"
}
},
layout:{
padding:{
left:50,
right:0,
bottom:0,
top:0
}
},
tooltips:{
enabled:true
}
}
});
您应该使用backgroundColor而不是backgroundColour。
详细信息请参考Chart.js v2.6.0文档。另外请注意，Chart.js库存在更新版本。