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

你应该为颜色创建一个单独的数组（就像ict_unit和efficiency），而不是每次都为{{1}指定一个随机颜色值变量。

以下是您的代码的修订版本：

coloR

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

Answer 2

235 到 52 之间 rgb 颜色选择器的示例片段

const randomNum = () => Math.floor(Math.random() * (235 - 52 + 1) + 52);

const randomRGB = () => `rgb(${randomNum()}, ${randomNum()}, ${randomNum()})`;

console.log(randomRGB());

资源：

Chartjs饼图的每个部分的随机颜色，数据库动态数据

2 个答案: