ChartJS 圆环图不显示颜色答案

【问题标题】：ChartJS doughnut chart not displaying coloursChartJS 圆环图不显示颜色
【发布时间】：2021-09-08 03:48:50
【问题描述】：

我正在学习 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
    }
  }
});

【问题讨论】：

标签： javascript canvas chart.js

【解决方案1】：

您应该使用backgroundColor 而不是backgroundColour。

请参阅Chart.js v2.6.0 文档了解更多详细信息。另请注意，Chart.js 库中存在newer versions。

【讨论】：