ChartJS 圆环图不显示颜色

Question

我正在学习 ChartJS 并遵循此 tutorial。试图调整代码以适应圆环图，但由于某种原因，图表的背景颜色没有出现。有谁知道为什么？如果需要更多信息，请告诉我。

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
    }
  }
});

Answer 1

您应该使用 backgroundColor 而不是 backgroundColour。

Please consult the Chart.js v2.6.0 documentation for more details. Also note that there exist newer versions of the Chart.js library.

ChartJS 圆环图不显示颜色

ChartJS doughnut chart not displaying colours

javascript

canvas

chart.js