我目前正在尝试让chart.js 2.0自动为动态标签生成新的颜色。用例是我使用数据库中的数据制作饼图，其中每一行都是一个新标签，旁边的计数是数据，例如MOVIE|VOTES PER MOVIE。然而，问题是我不知道会有多少行，因此无法手动输入颜色。我想一个解决方案可能是自动生成颜色，然后使用for循环将它们插入。这是我的代码：
function getRandomColor() { //generates random colours and puts them in string
var colors = "";
for (var i = 0; i < 3; i++) {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var x = 0; x < 6; x++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
color = "'"+color+"'"+",";
colors += color;
}
colors = colors.slice(0, -1);
console.log(colors);
return colors;
}
const data = {
labels: [
'Red',
'Blue',
'Yellow'
],
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: [
getRandomColor() // calls for 3 random colours
// e.g. returns '#DDA597','#A95647','#78366A'
],
hoverOffset: 4
}]
};
我注意到分隔它们的逗号是字符串的一部分，所以它们不能正确地分隔颜色。然而，我想不出办法来解决这个问题。有人知道可能的解决方案吗。甚至是解决这个问题的更好方法。
提前感谢！
如果将值以类似方式推送到数组，而不是字符串，它将正常工作。
示例：
function getRandomColor() { //generates random colours and puts them in string
var colors = [];
for (var i = 0; i < 3; i++) {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var x = 0; x < 6; x++) {
color += letters[Math.floor(Math.random() * 16)];
}
colors.push(color);
}
return colors;
}
const data = {
labels: [
'Red',
'Blue',
'Yellow'
],
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: getRandomColor(),
hoverOffset: 4
}]
};
const options = {
type: 'pie',
data
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>