尝试在Chart.js中使用散点图之前尝试创建数据时，背景色不起作用

如何解决尝试在Chart.js中使用散点图之前尝试创建数据时，背景色不起作用

我正在创建我的数据集，如下所示：

/* Create and add data from excel file to our datasets */
      var marksData = {
        labels: marqueurs,datasets: []
      };

      var colors = ['#ef335a','#ec83aa','#9eae3c','#a75a94','#d9acce','#2a345e'];
      var domaines = [' GROUP1','GROUP2','GROUP3','GROUP4','GROUP5'];
      
      for (i = 0; i < 6; i++){
        marksData.datasets[i] = [];
        marksData.datasets[i].label = domaines[i];
        marksData.datasets[i].data = [{}];
        marksData.datasets[i].backgroundColor = colors[i];
      }
      
      for (i = 0; i < json1.length; i++) {
        var indexDomaine = domaines.indexOf(json1[i].Domaine);
        var res = parseInt(json1[i].Resilience * 100);
        var freq = parseInt(json1[i].Frequence * 100);
        var lengthData = marksData.datasets[indexDomaine].data.length;
        marksData.datasets[indexDomaine].data[lengthData] = {};
        marksData.datasets[indexDomaine].data[lengthData].x = res;
        marksData.datasets[indexDomaine].data[lengthData].y = freq;
        marksData.datasets[indexDomaine].poinTradius = 10;
        marksData.datasets[indexDomaine].pointHoverRadius = 15;
        marksData.datasets[indexDomaine].showLine = "false";
        marksData.datasets[indexDomaine].fill = "true";
        
      }

然后我将散点图显示如下：

 var scatterChart = new Chart(ctx,{
        type: 'scatter',data: marksData,options: {
                responsive: true,scales: {
                  xAxes: [
                    {
                      type: 'linear',ticks: {
                        min: 50,max: 100,}
                    }
                  ],yAxes: [
                    {
                      type: 'linear',ticks: {
                        min: 0,}
                    }
                  ]
                },legend: {
                    display:true,position:'bottom',},title: {
                        display: true,text: 'My title'
                },tooltips: {
                     callbacks: {
                        label: function(tooltipItem,data) {
                           var label = data.labels[tooltipItem.datasetIndex];
                           return label;
                        }
                     }
                  }
        }
      });

但是，我在图表中的点和组标签（Group1，Group2 ..）不是彩色的。虽然我在控制台中签到并在里面有backgroundColor ... 我该如何解决这个问题？谢谢你的帮助苏菲

解决方法

我创建了一个jsfiddle来重现您想做的事情。我可以看到，对您的代码进行了少量更改后，颜色呈现的很好：我必须设置marksData.datasets[i] = {}而不是marksData.datasets[i] = []

for (i = 0; i < 6; i++){
     marksData.datasets[i] = {};
     marksData.datasets[i].label = domaines[i];
     marksData.datasets[i].data = [{}];
     marksData.datasets[i].backgroundColor = colors[i];
}

编辑：问题是您将数据集设置为数组，而它本来应该是一个对象。