質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

0回答

348閲覧

chart.jsで更新する度にサイズが小さくなる

gumamori

総合スコア14

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2017/10/18 04:53

いつも大変お世話になっております。
MONACA上で下記のコードによって、データの入力、保存、表示、グラフの生成という段階まで進みました。
しかし、保存したデータを更新してグラフに反映させるたびに、レーダーチャートがどんどん小さくなっています。
どうすればいいのでしょうか…?

UTF

1 <!DOCTYPE HTML> 2<html> 3<head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <script src="lib/angular/angular.min.js"></script> 9 <script src="lib/onsenui/js/onsenui.min.js"></script> 10 <script src="lib/onsenui/js/angular-onsenui.min.js"></script> 11 <script src="lib/onsenui/js/main.js"></script> 12 <script src="components/chart.js/dist/chart.js"></script> 13 14 15 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> 16 <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script> 17 18 19 <link rel="stylesheet" href="components/loader.css"> 20 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 21 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 22 <link rel="stylesheet" href="css/style.css"> 23 24 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"> 25 26 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script> 27 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script> 28 29</head> 30<body> 31 32<form name="form1"> 33 <table> 34  <caption>採点結果</caption> 35  <tr style="background:#ccccff"> 36 <th>単元</th> 37 <th>結果入力</th> 38  </tr> 39<tr> 40  <td>採点回数</td> 41 <td><input type="number" id="Text_key">回目(key)</td> 42 </tr> 43<tr> 44  <td>解剖学</td> 45 <td><input type="number" name="解剖学" class="chart-input" value="" id="a">% a</td> 46 </tr> 47<tr> 48  <td>情報工学</td> 49 <td><input type="number" name="情報工学"class="chart-input"value="" id="b">% b</td> 50 </tr> 51<tr> 52  <td>医用電気電子工学</td> 53 <td><input type="number" name="医用電気電子工学"class="chart-input"value="" id="c">% c</td> 54 </tr> 55<tr> 56  <td>生体物性学</td> 57 <td><input type="number" name="生体物性学"class="chart-input"value="" id="d">% d</td> 58 </tr> 59<tr> 60  <td>生体機能代行装置学</td> 61 <td><input type="number" name="生体機能代行装置学"class="chart-input"value="" id="e"> %e</td> 62 </tr> 63<tr> 64 <td>生体計測学</td> 65 <td><input type="number" name="生体計測学"class="chart-input"value="" id="f">% f</td> 66 </tr> 67<tr> 68 <td>医用機器安全管理学</td> 69 <td><input type="number" name="医用機器安全管理学"class="chart-input"value="" id="g">% g</td> 70 </tr> 71<tr> 72 <td>医用治療機器学</td> 73 <td><input type="number" name="医用治療機器学"class="chart-input"value="" id="h">% h</td> 74 </tr> 75<tr> 76 <td>医用材料学</td> 77 <td><input type="number" name="医用材料学"class="chart-input"value="" id="i">% i</td> 78 </tr> 79<tr> 80 <td>物理化学</td> 81 <td><input type="number" name="物理化学"class="chart-input" value="" id="j">% j</td> 82 </tr> 83<tr> 84 <td>総単元数</td> 85 <td><input type="number" name="総単元数" value="10">単元k</td> 86</tr> 87<tr> 88  <td>得点率</td> 89 <td><input type="number" name="得点率">%<input type="button" name="cmdCalc" value="計算" > L</td> 90 </tr> 91 92</table> 93<input type="button" value="保存" onclick="SaveKeyValue()"> 94<input type="button" value="表示" onclick="LoadKeyValue()"> 95 96 97</form> 98 99<canvas id="myChart" width="300" height="200"></canvas>  100 101</body> 102</html> 103 104$(window).on('load', function() { 105 106var numbers = []; 107 108var inputs = document.getElementsByClassName("chart-input"); //入力データの反映and HTMLの連携 109 110for (var i = 0; i < inputs.length; i++) {//入力時のレーダーチャートの表記(レーダーチャートの縮小表示には無関係) 111 const idx = i; 112 numbers.push(inputs[i].value); 113 inputs[i].addEventListener("change", function(e) { 114 numbers[idx] = e.target.value; 115 console.log(idx); 116 chart.update(); //データの更新 117 }); 118} 119 120var ctx = document.getElementById("myChart"); 121var chart = new Chart(ctx, { 122 type: 'radar', 123 data: { 124 labels: ["解剖学", "情報工学", "医用電気工学", "生体物性学", "生体機能代行装置学", "生体計測学","医用機器安全管理学","医用治療機器学","医用材料学","物理化学"], 125 datasets: [{ 126 label: 'あなたの得点', 127 data: numbers, 128 borderWidth: 1, 129 backgroundColor: "rgba(255,99,132,0.2)", //領域内の色 130 borderColor: "rgba(255,99,132,1)",    //グラフの色 131 pointBackgroundColor: "rgba(255,99,132,1)",//点の色 132 lineTension: 0.03 133 }] 134 }, 135 //レーダーチャートの見た目の設定箇所 136 options: { 137 responsiveAnimationDuration: 1000, 138 responsive: false, 139 scale: { 140 ticks: { 141 suggestedMin: 0, //グラフの最小値 142 suggestedMax: 100 //グラフの最大値 143 } 144 } 145 }, 146}); 147 148});//$(window).on('load', function()ここまで 149 150function Calc() { 151 var a = document.form1.解剖学.value;//単元名(漢字部分)はname属性 152 var b = document.form1.情報工学.value; 153 var c = document.form1.医用電気電子工学.value; 154 var d = document.form1.生体物性学.value; 155 var e = document.form1.生体機能代行装置学.value; 156 var f = document.form1.生体計測学.value; 157 var g = document.form1.医用機器安全管理学.value; 158 var h = document.form1.医用治療機器学.value; 159 var i = document.form1.医用材料学.value; 160 var j = document.form1.物理化学.value; 161 var k = document.form1.総単元数.value; 162 var L = (parseInt(a)+parseInt(b)+parseInt(c)+parseInt(d)+parseInt(e)+parseInt(f)+parseInt(g)+parseInt(h)+parseInt(i)+parseInt(j))/parseInt(k); 163 document.form1.得点率.value = L; 164} 165 166 167//_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_ 168// SaveKeyValue() 169// ローカルストレージにアイテムを書き込み 170//_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_ 171function SaveKeyValue() { 172 var key = document.getElementById('Text_key').value; //keyとval(a~j)までのデータを保存 173 var val = document.getElementById('a').value + ',' + document.getElementById('b').value + ',' + document.getElementById('c').value+ ',' + document.getElementById('d').value+ ',' + document.getElementById('e').value 174 + ','+ document.getElementById('f').value + ',' + document.getElementById('g').value + ',' + document.getElementById('h').value+ ',' + document.getElementById('i').value+ ',' + document.getElementById('j').value; 175 176try { 177 // ローカルストレージに書き込み 178 localStorage.setItem(key, val); 179 } catch(e) { 180 alert(e+'\n'+'ローカルストレージへの書き込みが出来ませんでした。\n' + '(key:' + key + ',' + val + ')'); 181 }; 182}; 183 184//_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_ 185// LoadKeyValue() 186// ローカルストレージから読み込み 187//_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_ 188function LoadKeyValue() { 189 var val = ''; 190 var key = document.getElementById('Text_key').value; 191 192 try { 193 // ローカルストレージから読み込み 194 val = localStorage.getItem(key); 195 } catch(e) { 196 val = ','; 197 alert(e+'\n'+'ローカルストレージからの読み込みが出来ませんでした。\n' + '(key:' + key + ')'); 198 }; 199 200 201 if(val==null){ 202 val = ','; 203 }; 204 205 var ret = val.split(','); 206 207 //カンマ区切りで保存してsplitで分解する 208 //split() メソッドは、文字列を複数の部分文字列に区切ることによりString オブジェクトを文字列の配列に分割 209 document.getElementById('a').value = ret[0]; 210 document.getElementById('b').value = ret[1]; 211 document.getElementById('c').value = ret[2]; 212 document.getElementById('d').value = ret[3]; 213 document.getElementById('e').value = ret[4]; 214 document.getElementById('f').value = ret[5]; 215 document.getElementById('g').value = ret[6]; 216 document.getElementById('h').value = ret[7]; 217 document.getElementById('i').value = ret[8]; 218 document.getElementById('j').value = ret[9]; 219 220 221 222}; //データ記録表示ここまで 223 224function viewChart(){ 225 var numbers = []; 226 227var inputs = document.getElementsByClassName("chart-input"); //入力データの反映and HTMLの連携 228 229for (var i = 0; i < inputs.length; i++) { 230 const idx = i; 231 numbers.push(inputs[i].value); 232 inputs[i].addEventListener("change", function(e) { 233 numbers[idx] = e.target.value; 234 console.log(idx); 235 chart.update(); //データの更新 236 }); 237} 238 239var ctx = document.getElementById("myChart"); 240 241var chart = new Chart(ctx, { 242 type: 'radar', 243 data: { 244 labels: ["解剖学", "情報工学", "医用電気工学", "生体物性学", "生体機能代行装置学", "生体計測学","医用機器安全管理学","医用治療機器学","医用材料学","物理化学"], 245 datasets: [{ 246 label: 'あなたの得点', 247 data: numbers, 248 borderWidth: 1, 249 backgroundColor: "rgba(255,99,132,0.2)", //領域内の色 250 borderColor: "rgba(255,99,132,1)",    //グラフの色 251 pointBackgroundColor: "rgba(255,99,132,1)",//点の色 252 lineTension: 0.03 253 }] 254 }, 255 //レーダーチャートの見た目の設定箇所 256 options: { 257 responsiveAnimationDuration: 1000, 258 responsive: false, 259 scale: { 260 ticks: { 261 suggestedMin: 0, //グラフの最小値 262 suggestedMax: 100 //グラフの最大値 263 } 264 } 265 } 266}); 267} 268 269```ここに言語を入力 270コード

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問