0
我试图创建的范围内生成随机RGB值作为背景色数据的该特定点使用的系统。目前，Chart.js仅为每一条数据使用指定的背景值，并且不会自动为每个数据点生成值。chart.js之随机RGB背景颜色发生器不工作
我试图做的是创建一个系统，为每一块数据随机生成一个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>附：我还修改了边框和悬停颜色与美感的颜色的细微变化（原因在RGB等有限范围内的值）
谢谢！
同时请注意，你会得到更好的反应，如果你的代码削减到只是最低复制问题。有很多包括上述当然 –
，道歉不必要的HTML。 – BurnDownTheIgloo