我正在使用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+")");
}
});
}
我现在拥有的方式，在前五个整体装满后，其余的将变成灰色，这完全糟透了。我只想重复这种配色方案。我该如何实现？
首先您可以定义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', '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>