Chart.js重复颜色？

2024-05-19 • 问答

我正在使用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个全部填充满之后，其余的将变成灰色，这完全糟透了。我只想重复这种配色方案。我该如何实现？

首先，您可以定义array中的colors。知道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','blue']; 
    var data = [4,5,4,2,8,7,6,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重复颜色？

senveny1234567 回答：Chart.js重复颜色？

大家都在问