我試圖創建的範圍內生成隨機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