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

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

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

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

Q&A

0回答

421閲覧

ファイヤベースに送ったデータを加算したいです

yu_0803

総合スコア0

JavaScript

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

0グッド

0クリップ

投稿2020/12/17 10:08

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

長くなってしまってすみません。。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問