Q&A
回答していただきありがとうございます
レーダーチャート の
（ data: [ 100, 100, 100,100 ,100 ] //100は仮数値 ）
の部分には数値が格納されているfilterA～filterEをどのように入れてあげればよいのでしょうか
前提・実現したいこと
（例）PHP（laravel）,javasclipt,Chart.jsで診断サイトを作ろうとしています
発生している問題・エラーメッセージ
初歩的だと思いますが診断で出た結果の5つの数値をレーダーチャートのdata[]に代入する方法がわかりません エラーメッセージなし
該当のソースコード1
javascript
1 //ボタンを押すごとに画面が切り替わる関数 2 $(function () { 3 4 $(".btn").on("click", function () { 5 $(this).closest("div").css("display", "none"); 6 id = $(this).attr("href"); 7 $(id).addClass("fit").fadeIn("slow").show(); 8 }); 9 10 //選択ボタンデータを配列に入れてカウントする関数 11 12 let filterA =0; //質問１、６ 格納 外向性 13 let filterB =0; //質問５、１０ 格納 神経質傾向 14 let filterC =0; //質問４、９ 格納 誠実性 15 let filterD =0; //質問２、７、１２格納 調和性 16 let filterE =0; //質問３、８，１１格納 開放性 17 var box =[]; 18 $(".btn").each(function(){ 19 $(this).on('click',function(){ 20 var value = $(this).data("value"); 21 box.push(value); 22 console.log(box) 23 24 filterA = box[0] + box[5]; //最大値10 25 filterB = box[4] + box[9]; //最大値10 26 filterC = box[3] + box[8]; //最大値10 27 filterD = box[1] + box[6] + box[11]; //最大値15 28 filterE = box[2] + box[7] + box[10]; //最大値15 29 30 console.log(filterA); //外向性 31 console.log(filterB); //神経質傾向 32 console.log(filterC); //誠実性 33 console.log(fiiterD); //調和性 34 console.log(filterE); //開放性 35 36 }); 37 }); 38 //レーダーチャート 39 var ctx = document.getElementById("myRaderChart"); 40 var myRadarChart = new Chart(ctx, { 41 type: 'radar', 42 data: { 43 labels: ["外向性", "情緒安定性", "開放性", "誠実性", "協調性"], 44 datasets: [{ 45 label: '診断スコア', 46 backgroundColor: 'RGBA(0, 255, 255, 0.35)', 47 borderWidth: 1, 48 pointBackgroundColor: 'RGB(46,106,177)', 49 data: [ 100, 100, 100,100 ,100 ]//ここに値を代入して表示したいです 仮数値100 50 //[外向性,情緒安定性,開放性,誠実性,協調性] 51 }] 52 }, 53 options: { 54 title: { 55 display: true, 56 text: '診断結果' 57 }, 58 scale:{ 59 ticks:{ 60 suggestedMin: 0, 61 suggestedMax: 100, 62 stepSize: 10, 63 callback: function(value, index, values){ 64 return value + 'pt' 65 }}} 66 }); 67});
該当のソースコード2
php
1 2 3 4<html lang="en"> 5<head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <link rel="stylesheet" href="index.css"> 9 <script 10 src="https://code.jquery.com/jquery-3.5.1.js" 11 integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" 12 crossorigin="anonymous"> 13 </script> 14 <script src="index.js"></script> 15 <title>診断</title> 16</head> 17<body> 18 <div class="choose_box"> 19 <!-- 質問一覧 --> 20 <div class="app-theme"> 21 <p>BIG5診断(全12問)</p> 22 </div> 23 <!-- 質問1 --> 24 <div id="q_01" class="fit"> 25 <p>質問1: 知らない人とすぐ会話ができる </p> 26 <ul> 27 <li><a class="btn" href="#q_02" data-value="5">きわめて当てはまる</a></li> 28 <li><a class="btn" href="#q_02" data-value="4">やや当てはまる</a></li> 29 <li><a class="btn" href="#q_02" data-value="3">どちらでもない</a></li> 30 <li><a class="btn" href="#q_02" data-value="2">やや当てはまらない</a></li> 31 <li><a class="btn" href="#q_02" data-value="1">きわめて当てはまらない</a></li> 32 </ul> 33 </div> 34 <!-- 質問2 --> 35 <div id="q_02" style="display: none;"> 36 <p>質問2: 人が快適で幸せかどうか気にかかる</p> 37 <ul> 38 <li><a class="btn" href="#q_03" data-value="5">きわめて当てはまる</a></li> 39 <li><a class="btn" href="#q_03" data-value="4">やや当てはまる</a></li> 40 <li><a class="btn" href="#q_03" data-value="3">どちらでもない</a></li> 41 <li><a class="btn" href="#q_03" data-value="2">やや当てはまらない</a></li> 42 <li><a class="btn" href="#q_03" data-value="1">きわめて当てはまらない</a></li> 43 </ul> 44 </div> 45 <!-- 質問3 --> 46 <div id="q_03" style="display: none;"> 47 <p>質問3: 絵画等の制作、著述、音楽をを作る</p> 48 <ul> 49 <li><a class="btn" href="#q_04" data-value="5">きわめて当てはまる</a></li> 50 <li><a class="btn" href="#q_04" data-value="4">やや当てはまる</a></li> 51 <li><a class="btn" href="#q_04" data-value="3">どちらでもない</a></li> 52 <li><a class="btn" href="#q_04" data-value="2">やや当てはまらない</a></li> 53 <li><a class="btn" href="#q_04" data-value="1">きわめて当てはまらない</a></li> 54 </ul> 55 </div> 56 <!-- 質問4 --> 57 <div id="q_04" style="display: none;"> 58 <p>質問4: かなり前から準備する</p> 59 <ul> 60 <li><a class="btn" href="#q_05" data-value="5">きわめて当てはまる</a></li> 61 <li><a class="btn" href="#q_05" data-value="4">やや当てはまる</a></li> 62 <li><a class="btn" href="#q_05" data-value="3">どちらでもない</a></li> 63 <li><a class="btn" href="#q_05" data-value="2">やや当てはまらない</a></li> 64 <li><a class="btn" href="#q_05" data-value="1">きわめて当てはまらない</a></li> 65 </ul> 66 </div> 67 <!-- 質問5 --> 68 <div id="q_05" style="display: none;"> 69 <p>質問5: 落ち込んだり憂鬱になったりする</p> 70 <ul> 71 <li><a class="btn" href="#q_06" data-value="5">きわめて当てはまる</a></li> 72 <li><a class="btn" href="#q_06" data-value="4">やや当てはまる</a></li> 73 <li><a class="btn" href="#q_06" data-value="3">どちらでもない</a></li> 74 <li><a class="btn" href="#q_06" data-value="2">やや当てはまらない</a></li> 75 <li><a class="btn" href="#q_06" data-value="1">きわめて当てはまらない</a></li> 76 </ul> 77 </div> 78 79 <!-- 質問6 --> 80 <div id="q_06" style="display: none;"> 81 <p>質問6: パーティや社交イベントを企画する</p> 82 <ul> 83 <li><a class="btn" href="#q_07" data-value="5">きわめて当てはまる</a></li> 84 <li><a class="btn" href="#q_07" data-value="4">やや当てはまる</a></li> 85 <li><a class="btn" href="#q_07" data-value="3">どちらでもない</a></li> 86 <li><a class="btn" href="#q_07" data-value="2">やや当てはまらない</a></li> 87 <li><a class="btn" href="#q_07" data-value="1">きわめて当てはまらない</a></li> 88 </ul> 89 </div> 90 <!-- 質問 7--> 91 <div id="q_07" style="display: none;"> 92 <p>質問7: 人を侮辱する</p> 93 <ul> 94 <li><a class="btn" href="#q_08" data-value="1">きわめて当てはまる</a></li> 95 <li><a class="btn" href="#q_08" data-value="2">やや当てはまる</a></li> 96 <li><a class="btn" href="#q_08" data-value="3">どちらでもない</a></li> 97 <li><a class="btn" href="#q_08" data-value="4">やや当てはまらない</a></li> 98 <li><a class="btn" href="#q_08" data-value="5">きわめて当てはまらない</a></li> 99 </ul> 100 </div> 101 102 <!-- 質問8 --> 103 <div id="q_08" style="display: none;"> 104 <p>質問8: 哲学的、精神的な問題を考える</p> 105 <ul> 106 <li><a class="btn" href="#q_09" data-value="5">きわめて当てはまる</a></li> 107 <li><a class="btn" href="#q_09" data-value="4">やや当てはまる</a></li> 108 <li><a class="btn" href="#q_09" data-value="3">どちらでもない</a></li> 109 <li><a class="btn" href="#q_09" data-value="2">やや当てはまらない</a></li> 110 <li><a class="btn" href="#q_09" data-value="1">きわめて当てはまらない</a></li> 111 </ul> 112 </div> 113 <!-- 質問9 --> 114 <div id="q_09" style="display: none;"> 115 <p>質問9: ものごとの整理ができない</p> 116 <ul> 117 <li><a class="btn" href="#q_10" data-value="1">きわめて当てはまる</a></li> 118 <li><a class="btn" href="#q_10" data-value="2">やや当てはまる</a></li> 119 <li><a class="btn" href="#q_10" data-value="3">どちらでもない</a></li> 120 <li><a class="btn" href="#q_10" data-value="4">やや当てはまらない</a></li> 121 <li><a class="btn" href="#q_10" data-value="5">きわめて当てはまらない</a></li> 122 </ul> 123 </div> 124 <!-- 質問10 --> 125 <div id="q_10" style="display: none;"> 126 <p>質問10: ストレスを感じたり不安になったりする</p> 127 <ul> 128 <li><a class="btn" href="#q_11" data-value="5">きわめて当てはまる</a></li> 129 <li><a class="btn" href="#q_11" data-value="4">やや当てはまる</a></li> 130 <li><a class="btn" href="#q_11" data-value="3">どちらでもない</a></li> 131 <li><a class="btn" href="#q_11" data-value="2">やや当てはまらない</a></li> 132 <li><a class="btn" href="#q_11" data-value="1">きわめて当てはまらない</a></li> 133 </ul> 134 </div> 135 136 <!-- 質問11 --> 137 <div id="q_11" style="display: none;"> 138 <p>質問11: 難しい言葉を使う</p> 139 <ul> 140 <li><a class="btn" href="#q_12" data-value="5">きわめて当てはまる</a></li> 141 <li><a class="btn" href="#q_12" data-value="4">やや当てはまるE</a></li> 142 <li><a class="btn" href="#q_12" data-value="3">どちらでもないE</a></li> 143 <li><a class="btn" href="#q_12" data-value="2">やや当てはまらない</a></li> 144 <li><a class="btn" href="#q_12" data-value="1">きわめて当てはまらない</a></li> 145 </ul> 146 </div> 147 <!-- 質問12 --> 148 <div id="q_12" style="display: none;"> 149 <p>質問12: 他の人の気持ちを思いやる</p> 150 <ul> 151 <li><a class="btn end" href="#q_13" data-value="5">きわめて当てはまる</a></li> 152 <li><a class="btn end" href="#q_13" data-value="4">やや当てはまる</a></li> 153 <li><a class="btn end" href="#q_13" data-value="3">どちらでもない</a></li> 154 <li><a class="btn end" href="#q_13" data-value="2">やや当てはまらない</a></li> 155 <li><a class="btn end" href="#q_13" data-value="1">きわめて当てはまらない</a></li> 156 </ul> 157 </div> 158</body> 159<!--レーダーチャート結果出力--> 160<h1>診断結果</h1> 161 <canvas id="myRaderChart"></canvas> 162 <!-- CDN --> 163 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script> 164<script src="index.js"></script> 165
試したこと
様々な方法を試しましたができませんでした
最初できるだけきれいな状態で載せさせていただきます
ご教授またコードを書き換えていただけると幸いです
よろしくお願いいたします
補足情報）
レーダーチャートにはChart.jsを使用
回答2件
0
ベストアンサー
アンケートに答えてからグラフを表示する流れが分からないのだと推察します。
「値を入力して計算してみよう」の記事のようにonClick()イベントにより思惑の動作のする自作の関数を呼び出します。
さらにグラフの更新の動作も発生させてレーダーチャートができます。
拙作の「反応するホームページ」のような動作の応用でしょうから、ソースコードを参考に各命令を逐次分析の上、取り入れてみましょう。
投稿2021/01/02 06:10
総合スコア2287
0
丸投げですが、JavaScriptのgetElementByIdメソッドを活用すれば実現できるでしょう。
TechAcademyの「JavaScriptでgetElementByIdを使う方法！HTML要素を取得する」の記事
のような文法を活用します。
つまり、ご提示のコード
JavaScript
1filterA = box[0] + box[5] 2
を
JavaScript
1filterA = document.getElementById("q_01").value + document.getElementById("q_04").value 2
のように指定することで反応するでしょう。
投稿2021/01/02 03:25
総合スコア2287
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。