javascriptでファイヤストレージに預けている数字を1回目のgoukei_1と2回目goukei_1、3回目、4回目と加算してグラフに表示したいのですがどうすれば良いでしょうか??
html
1 2<table id="output" frame="vsides" border="1" > 3<th>日付</th> 4<td>名前</td> 5<td>物件名</td> 6<td>仲介手数料</td> 7<td>A D</td> 8<td id="sum1"> 合 計 </td> 9</table> 10<table id="output_2" frame="vsides" border="1" > 11 <th>日付</th> 12 <td>名前</td> 13 <td>物件名</td> 14 <td>仲介手数料</td> 15 <td>A D</td> 16 <td> 合 計 </td> 17 </table>
js
1//userのoptionタグを配列に組み替え 2 var values = []; 3 var options = $('#uname option'); 4 $.each(options, function (i, opt) { 5 values[i] = opt.value; 6 }); 7 8 // 振り分け変数確認用 9const user_name ="user1" 10const user_name_2 ="user2" 11const user_name_3 ="user3" 12const user_name_4 ="user4" 13const user_name_5 ="user5" 14console.log(values[0]); 15 16 //送信イベント 17$("#send").on("click", function(){ 18 if(user_name == values[0]){ 19 const date_1 = $("#date").val(); 20 const uname_1 = $("#uname").val(); 21 const fee_1 = $("#fee").val(); 22 const property_1 = $("#property").val(); 23 const ad_1 = $("#ad").val(); 24 const goukei_1 = $("#goukei").val(); 25 26 27 const msg = { 28 date_1: date_1, 29 uname_1: uname_1, 30 fee_1: fee_1, 31 property_1: property_1, 32 ad_1: ad_1, 33 goukei_1: goukei_1 34 }; 35 ref.push(msg); 36 } 37 if(user_name_2 == values[1]){ 38 const date_2 = $("#date").val(); 39 const uname_2 = $("#uname").val(); 40 const fee_2 = $("#fee").val(); 41 const property_2 = $("#property").val(); 42 const ad_2 = $("#ad").val(); 43 const goukei_2 = $("#goukei").val(); 44 const msg_2 = { 45 date_2: date_2, 46 uname_2: uname_2, 47 fee_2: fee_2, 48 property_2: property_2, 49 ad_2: ad_2, 50 goukei_2: goukei_2 51 }; 52 ref.push(msg_2); 53 } 54 if(user_name_3 == values[2]){ 55 const date_3 = $("#date").val(); 56 const uname_3 = $("#uname").val(); 57 const fee_3 = $("#fee").val(); 58 const property_3 = $("#property").val(); 59 const ad_3 = $("#ad").val(); 60 const goukei_3 = $("#goukei").val(); 61 62 63 const msg_3 = { 64 date_3: date_3, 65 uname_3: uname_3, 66 fee_3: fee_3, 67 property_3: property_3, 68 ad_3: ad_3, 69 goukei_3: goukei_3 70 }; 71 ref.push(msg_3); 72 } 73 if(user_name_4 == values[3]){ 74 const date_4 = $("#date").val(); 75 const uname_4 = $("#uname").val(); 76 const fee_4 = $("#fee").val(); 77 const property_4 = $("#property").val(); 78 const ad_4 = $("#ad").val(); 79 const goukei_4 = $("#goukei").val(); 80 81 82 const msg_4 = { 83 date_4: date_4, 84 uname_4: uname_4, 85 fee_4: fee_4, 86 property_4: property_4, 87 ad_4: ad_4, 88 goukei_4: goukei_4 89 90 91 }; 92 ref.push(msg_4); 93 } 94 if(user_name_5 == values[4]){ 95 const date_5 = $("#date").val(); 96 const uname_5 = $("#uname").val(); 97 const fee_5 = $("#fee").val(); 98 const property_5 = $("#property").val(); 99 const ad_5 = $("#ad").val(); 100 const goukei_5 = $("#goukei").val(); 101 102 103 const msg_5 = { 104 date_5: date_5, 105 uname_5: uname_5, 106 fee_5: fee_5, 107 property_5: property_5, 108 ad_5: ad_5, 109 goukei_5: goukei_5 110 111 112 }; 113 ref.push(msg_5); 114 } 115}); 116//受信イベント 117ref.on("child_added",function(data){ 118 const v = data.val(); 119 const k = data.key; 120 if(v.uname_1==values[0]){ 121 const h = '<tr><th>'+v.date_1+'</th><td>'+v.uname_1+'</td><td>'+v.property_1+'</td><td>'+v.fee_1+'</td><td>'+v.ad_1+'</td><td>'+v.goukei_1+'</td></tr>'; 122 $("#output").append(h);} 123 if(v.uname_2==user_name_2){ 124 const a ='<tr><th>'+v.date_2+'</th><td>'+v.uname_2+'</td><td>'+v.property_2+'</td><td>'+v.fee_2+'</td><td>'+v.ad_2+'</td><td>'+v.goukei_2+'</td></tr>'; 125 $("#output_2").append(a);} 126 if(v.uname_3==user_name_3){ 127 const b ='<tr><th>'+v.date_3+'</th><td>'+v.uname_3+'</td><td>'+v.property_3+'</td><td>'+v.fee_3+'</td><td>'+v.ad_3+'</td><td>'+v.goukei_3+'</td></tr>'; 128 $("#output_3").append(b);} 129 if(v.uname_4==user_name_4){ 130 const c ='<tr><th>'+v.date_4+'</th><td>'+v.uname_4+'</td><td>'+v.property_4+'</td><td>'+v.fee_4+'</td><td>'+v.ad_4+'</td><td>'+v.goukei_4+'</td></tr>'; 131 $("#output_4").append(c);} 132 if(v.uname_5==user_name_5){ 133 const d ='<tr><th>'+v.date_5+'</th><td>'+v.uname_5+'</td><td>'+v.property_5+'</td><td>'+v.fee_5+'</td><td>'+v.ad_5+'</td><td>'+v.goukei_5+'</td></tr>'; 134 $("#output_5").append(d);} 135}); 136 137 138 139 140//削除イベント 141$("#dele").on("click",function(){ 142 ref.remove(); 143}); 144 145//加算式?? 146 147 148//グラフ 149 150ref.on("child_added",function(e){ 151 152const v = e.val(); 153const k = e.key; 154let goukei = Number(v.goukei_1); 155 156console.log(goukei); 157 158var data = [ 159{ label: "user1", y: goukei }, 160{ label: "user2", y: 59 }, 161{ label: "user3", y: 80 }, 162{ label: "user4", y: 81 }, 163{ label: "user5", y: 56 } 164]; 165console.log(data) 166 167var stage = document.getElementById('stage'); 168var chart = new CanvasJS.Chart(stage, { 169title: { 170text: "売上" //グラフタイトル 171}, 172theme: "theme4", //テーマ設定 173data: [{ 174type: 'column', //グラフの種類 175dataPoints: data //表示するデータ 176}] 177}); 178chart.render(); 179}); 180 181</script> 182 183
長くなってしまってすみません。。
あなたの回答
tips
プレビュー