Chartjs zufällige Farben für jeden Teil des Kreisdiagramms mit Daten dynamisch aus der Datenbank

Question

Ich möchte dynamisch eine Farbe für jeden Teil des Kreisdiagramms festlegen. Da das Diagramm dynamisch aus der Datenbank erstellt wird, möchte ich für jeden Teil, der dem Diagramm (aus der Datenbank) hinzugefügt wird, eine andere Farbe haben.

Ich habe versucht, dies zu tun:

$(document).ready(function() { 
$.ajax({ 
url: "http://localhost/chartjs/projects_chart.php", 
method: "GET", 
success: function(data) { 
    console.log(data); 
    var ict_unit = []; 
    var efficiency = []; 
    var dynamicColors = function() { 
     var r = Math.floor(Math.random() * 255); 
     var g = Math.floor(Math.random() * 255); 
     var b = Math.floor(Math.random() * 255); 
     return "rgb(" + r + "," + g + "," + b + ")"; 
    }; 

    for (var i in data) { 
     ict_unit.push("ICT Unit " + data[i].ict_unit); 
     efficiency.push(data[i].efficiency); 
     var coloR=dynamicColors(); 
    } 
    var chartData = { 

     labels: ict_unit, 
     datasets: [{ 
      label: 'Efficiency ', 
      //strokeColor:backGround, 

      backgroundColor: [coloR], 

      borderColor: 'rgba(200, 200, 200, 0.75)', 
      //hoverBackgroundColor: 'rgba(200, 200, 200, 1)', 
      hoverBorderColor: 'rgba(200, 200, 200, 1)', 
      data: efficiency 
     }] 
    }; 

    var ctx = $("#my-canvas"); 
    var barGraph = new Chart(ctx, { 
     type: 'pie', 
     data: chartData 
    }) 
}, 
error: function(data) { 

    console.log(data); 
    }, 
    }); 
}); 

Aber ich nur eine Farbe für den ersten Teil des Kreisdiagramms erhalten.

Können Sie mir helfen?

Answer 1

Sie sollten eine separate Anordnung für Farben (ebenso wie die ict_unit und efficiency), statt Zuweisung eines zufälligen Farbwert jedes Mal auf die coloR Variable erstellen. Hier

ist die überarbeitete Version des Codes:

$(document).ready(function() { 
 
    $.ajax({ 
 
     url: "https://jsonblob.com/api/jsonBlob/a7176bce-84e0-11e7-8b99-016f34757045", 
 
     method: "GET", 
 
     success: function(data) { 
 
     console.log(data); 
 
     var ict_unit = []; 
 
     var efficiency = []; 
 
     var coloR = []; 
 

 
     var dynamicColors = function() { 
 
      var r = Math.floor(Math.random() * 255); 
 
      var g = Math.floor(Math.random() * 255); 
 
      var b = Math.floor(Math.random() * 255); 
 
      return "rgb(" + r + "," + g + "," + b + ")"; 
 
     }; 
 

 
     for (var i in data) { 
 
      ict_unit.push("ICT Unit " + data[i].ict_unit); 
 
      efficiency.push(data[i].efficiency); 
 
      coloR.push(dynamicColors()); 
 
     } 
 
     var chartData = { 
 

 
      labels: ict_unit, 
 
      datasets: [{ 
 
       label: 'Efficiency ', 
 
       //strokeColor:backGround, 
 

 
       backgroundColor: coloR, 
 

 
       borderColor: 'rgba(200, 200, 200, 0.75)', 
 
       //hoverBackgroundColor: 'rgba(200, 200, 200, 1)', 
 
       hoverBorderColor: 'rgba(200, 200, 200, 1)', 
 
       data: efficiency 
 
      }] 
 
     }; 
 

 
     var ctx = $("#my-canvas"); 
 
     var barGraph = new Chart(ctx, { 
 
      type: 'pie', 
 
      data: chartData 
 
     }) 
 
     }, 
 
     error: function(data) { 
 

 
     console.log(data); 
 
     }, 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<canvas id="my-canvas"></canvas>