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>P.S.私はまた、美的魅力のために色のわずかな変化で境界線やホバーカラーを変更しました（RGBの値の範囲が限定されている理由）
ありがとう！あなたはwhileループでiをインクリメントしているか
また、コードを最小限に減らすと、より良い対応が得られることにご注意ください問題を再現する。もちろん、 –
の上に含まれている不必要なhtmlがたくさんあります。 – BurnDownTheIgloo