グラフの各部分の無作為の色データベースからのデータを動的に持つ

Question

円グラフの各部分に色を動的に設定したいと思います。グラフはデータベースから動的に作成されるので、グラフに追加される各部分（データベースから）に異なる色が必要です。

私はこれを行うにしようとしていた。

$(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); 
    }, 
    }); 
}); 

をしかし、私は唯一の円グラフの最初の部分のための一つの色を取得します。

お手伝いできますか？

Answer 1

代わりcoloR変数に毎回ランダムカラー値を割り当てる、色（わずかict_unitとefficiency等）ための別個のアレイを作成する必要があります。それは働いていた

$(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>