我正在尝试创建一个系统，该系统在一个范围内生成随机RGB值，以用作该特定数据点的背景颜色。目前，Chart.js仅为每个数据使用指定的背景值，并且不会自动为每个数据点生成值。
我尝试做的是创建一个系统，为每个数据随机生成一个RGB值，将其添加到这些颜色值的列表中，然后使用该列表代替硬编码数据。
打开页面时似乎没有显示颜色。
任何帮助？
var ctx = document.getElementById("centerPie");
var internalData = [300, 50, 100, 75];
var graphColors = [];
var graphOutlines = [];
var hoverColor = [];
var internalDataLength = internalData.length;
i = 0;
while (i <= internalDataLength, i++) {
var randomR = Math.floor((Math.random() * 130) + 100);
var randomG = Math.floor((Math.random() * 130) + 100);
var randomB = Math.floor((Math.random() * 130) + 100);
var graphBackground = "rgb("
+ randomR + ", "
+ randomG + ", "
+ randomB + ")";
graphColors.push(graphBackground);
var graphOutline = "rgb("
+ (randomR - 80) + ", "
+ (randomG - 80) + ", "
+ (randomB - 80) + ")";
graphOutlines.push(graphOutline);
var hoverColors = "rgb("
+ (randomR + 25) + ", "
+ (randomG + 25) + ", "
+ (randomB + 25) + ")";
hoverColor.push(hoverColors);
};
var data = {
labels: [
"one",
"two",
"three",
"four"
],
datasets: [{
data: [300, 50, 100, 75],
backgroundColor: graphColors,
hoverBackgroundColor: hoverColor,
borderColor: graphOutlines
}]
};
var options = {
cutoutPercentage: 25,
responsive: true
};
var myChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: options,
animation: {
animateRotate:true
}
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
<!-- Good default declaration:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
* Enable eval(): add 'unsafe-eval' to default-src
* Create your own at http://cspisawesome.com
-->
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> -->
<link rel="stylesheet" type="text/css" href='bootstrap-3.3.7-dist/css/bootstrap.min.css' />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<title>Hello World</title>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="js/widthCalculator.js"></script>
<div class="app container-fluid">
<div id="header">
<table>
<td class="header-left"><img class="menu" src="img/menu-icon.png" alt="menu" height="30" width="30" /></td>
<td class="header-right"><h2>Title Here</h2></td>
</table>
</div>
<div id="header-holder"></div>
<div class="row top-body">
<div class='col-xs-12 col-md-6'>
<canvas id="centerPie" width="10" height="10"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="js/mainChart.js"></script>
</div>
<div class='col-xs-12 col-md-5'>
<p>:o</p>
<p>:o</p>
<p>:o</p>
<p>:o</p>
<p>:o</p>
<p>:o</p>
<p>:o</p>
</div>
</div>
<p>:o</p>
<p>:o</p>
<p>:o</p>
<p>:o</p>
<p>:o</p>
<p>:o</p>
<p>:o</p>
<p>:o</p>
</div>
</body>
</html>
P.S。我还修改了边框和悬停颜色，颜色略有不同，以达到美观的目的（RGB中数值范围有限的原因）
谢谢！
答案 0 :(得分：1)
更改i循环中while递增的方式：
while (i <= internalDataLength) {
...
i++;
};
注意：以下代码段中存在图表库错误，但颜色现在显示
var ctx = document.getElementById("centerPie");
var internalData = [300, 50, 100, 75];
var graphColors = [];
var graphOutlines = [];
var hoverColor = [];
var internalDataLength = internalData.length;
i = 0;
while (i <= internalDataLength) {
var randomR = Math.floor((Math.random() * 130) + 100);
var randomG = Math.floor((Math.random() * 130) + 100);
var randomB = Math.floor((Math.random() * 130) + 100);
var graphBackground = "rgb("
+ randomR + ", "
+ randomG + ", "
+ randomB + ")";
graphColors.push(graphBackground);
var graphOutline = "rgb("
+ (randomR - 80) + ", "
+ (randomG - 80) + ", "
+ (randomB - 80) + ")";
graphOutlines.push(graphOutline);
var hoverColors = "rgb("
+ (randomR + 25) + ", "
+ (randomG + 25) + ", "
+ (randomB + 25) + ")";
hoverColor.push(hoverColors);
i++;
};
var data = {
labels: [
"one",
"two",
"three",
"four"
],
datasets: [{
data: [300, 50, 100, 75],
backgroundColor: graphColors,
hoverBackgroundColor: hoverColor,
borderColor: graphOutlines
}]
};
var options = {
cutoutPercentage: 25,
responsive: true
};
var myChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: options,
animation: {
animateRotate:true
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<div class="app container-fluid">
<div id="header-holder"></div>
<div class="row top-body">
<div class='col-xs-12 col-md-6'>
<canvas id="centerPie" width="10" height="10"></canvas>
</div>
</div>
</div>