Chart.js 重复颜色？

Question

我正在使用 Chart.js，它是通过 MySQL 数据库中不断增长的数据传播的。这是我的代码：

function getPromoChartData() {
    var city = document.getElementById("cityselect").value;
$.ajax({
        type: 'GET',
        url: 'getpromochart.php',
        dataType: 'json',
        data: {  city:city, },
        success: function(response) {
          //console.log (response);

          function collate(d) {
            return d.reduce(function(prev, cur, index) {
                var ret = {};
                for (var prop in cur) {
                    if (index === 0) {
                        ret[prop] = [];
                    } else {
                        ret[prop] = prev[prop];
                    }
                    ret[prop].push(cur[prop]);
                }
                return ret;
            }, {});
        }

          var reduced = collate(response);

var ctx = document.getElementById('promoChart').getContext('2d');
var chartColors = window.chartColors;
var color = Chart.helpers.color;
var promoChart = new Chart(ctx, {
    type: 'polarArea',
    data: {
        labels: reduced.codes,
        datasets: [{
            label: 'Promo Codes',
            data: reduced.count,
            backgroundColor: [
            color(chartColors.red).alpha(0.5).rgbString(),
            color(chartColors.orange).alpha(0.5).rgbString(),
            color(chartColors.yellow).alpha(0.5).rgbString(),
            color(chartColors.green).alpha(0.5).rgbString(),
            color(chartColors.blue).alpha(0.5).rgbString(),
          ],

        }]
    },
    options: {
        responsive: true,
    }
});
promoChart.update();
$('#promocharttitle').html("Promo Data ("+cityfancy+")");

        }
    });
}

我现在的做法是，前5个全部填满后，剩下的都是灰色的，太烂了。我只想重复那个配色方案。我怎样才能做到这一点？

Answer 1

首先，您可以定义 colors 的 array。知道 data 的大小后，您可以按如下方式确定背景颜色：

var colors = ['red', 'orange', 'yellow', 'green', 'blue']; 
...
var bgColors = [];
for (var i = 0; i < data.length; i++) {
  bgColors.push(colors[i % colors.length]);  
}

这是一个简化的例子：

<html>

<head>
    <title>Polar Area Chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
    <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
    </style>
</head>

<body>
    <div style="width: 90%">
        <canvas id="canvas"></canvas>
    </div>
    <script>
    var colors = ['red', 'orange', 'yellow', 'green', 'blue']; 
    var data = [4, 5, 4, 2, 8, 7, 6, 8, 5, 4, 1, 3, 7];
            
    window.onload = function() {
       var bgColors = [];
       for (var i = 0; i < data.length; i++) {
         bgColors.push(colors[i % colors.length]);  
       }
       var ctx = document.getElementById('canvas').getContext('2d');
       window.myChart = new Chart(ctx, {
          type: 'polarArea',
          data: {
             datasets: [{
                label: 'Promo Codes',
                data: data,
                backgroundColor: bgColors
             }]
         },
         options: {
            responsive: true,
         }
       });
    };
    </script>
</body>

</html>

Chart.js 重复颜色？

Chart.js repeating colors?

javascript

chart.js

chartjs-2.6.0