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

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

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

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

JavaScript

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

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

4280閲覧

chart.jsで描画したグラフをリセットしたい

ttpk

総合スコア338

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

JavaScript

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

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2022/02/13 14:31

ご覧いただきありがとうございます。
フォームに入力された値を使ってcahrt.jsでグラフを生成する処理を実装しています。
リセットボタンを押下したら入力した内容とグラフがリセットされる様にしたいのですが
可能なのでしょうか?
reactのバージョンは16.2.0
chart.jsのバージョンは2.9.3になります

HTML

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>今週の酒量チェック</title> 6 <link rel="stylesheet" href="dist/css/app.css"> 7 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 8 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> 9</head> 10<body> 11 12 <main class="main" id="app"> 13 </main> 14 15<script src="dist/js/bundle.js"></script> 16</body> 17</html>

javascript

1import React from 'react'; 2import ReactDOM from 'react-dom'; 3 4class WeekForm extends React.Component { 5 constructor(props) { 6 super(props); 7 this.state = { 8 selectedValue: '' 9 }; 10 11 this.handleLimitChange = this.handleLimitChange.bind(this); 12 this.execute = this.execute.bind(this); 13 this.reset = this.reset.bind(this); 14 } 15 16 handleLimitChange(e) { 17 this.setState({ 18 selectedValue: e.target.value 19 }) 20 21 } 22 23 renderLimit(selectedValue) { 24 if (selectedValue == 'male') { 25 return <span>1日あたりの適量の目安はアルコール20gです</span> 26 } else if(selectedValue == 'female'){ 27 return <span>1日あたりの適量の目安はアルコール10gです</span> 28 } 29 } 30 31 calcAmount(i, val) { 32 let unit = [350, 500, 120, 180, 180, 30]; 33 let degree = [5, 7, 12, 15, 25, 40]; 34 35 let index = i % 6; 36 let amount = val * unit[index] * degree[index] / 100 * 0.8; 37 38 return amount; 39 40 } 41 42 execute(e) { 43 e.preventDefault(); 44 if (this.state.selectedValue == '') { 45 alert('性別を選択してください'); 46 } else { 47 var amount0 = 0; 48 var amount1 = 0; 49 var amount2 = 0; 50 var amount3 = 0; 51 var amount4 = 0; 52 var amount5 = 0; 53 var amount6 = 0; 54 for (var i = 0; i < $(".unit").length; i++) { 55 if (i <= 5) { 56 let result0 = this.calcAmount(i, $(".unit").eq(i).val()); 57 amount0 = amount0 + result0; 58 59 } else if (i <= 11) { 60 let result1 = this.calcAmount(i, $(".unit").eq(i).val()); 61 amount1 = amount1 + result1; 62 63 } else if (i <= 17) { 64 let result2 = this.calcAmount(i, $(".unit").eq(i).val()); 65 amount2 = amount2 + result2; 66 67 } else if (i <= 23) { 68 let result3 = this.calcAmount(i, $(".unit").eq(i).val()); 69 amount3 = amount3 + result3; 70 71 } else if (i <= 29) { 72 let result4 = this.calcAmount(i, $(".unit").eq(i).val()); 73 amount4 = amount4 + result4; 74 75 } else if (i <= 35) { 76 let result5 = this.calcAmount(i, $(".unit").eq(i).val()); 77 amount5 = amount5 + result5; 78 79 } else { 80 let result6 = this.calcAmount(i, $(".unit").eq(i).val()); 81 amount6 = amount6 + result6; 82 83 } 84 } 85 } 86 87 var ctx = document.getElementById("result").getContext('2d'); 88 89 var myChart = new Chart(ctx, { 90 type: 'bar', 91 data: { 92 labels: ["月", "火", "水", "木", "金", "土", "日"], 93 datasets: [{ 94 label: 'アルコール摂取量', 95 data: [Math.round(amount0, 1), Math.round(amount1, 1), Math.round(amount2, 1), Math.round(amount3, 1), Math.round(amount4, 1), Math.round(amount5, 1), Math.round(amount6, 1)], 96 backgroundColor: [ 97 '#ff6437', 98 '#ff6437', 99 '#ff6437', 100 '#ff6437', 101 '#ff6437', 102 '#ff6437', 103 '#ff6437' 104 ], 105 borderColor: [ 106 '#ff6437', 107 '#ff6437', 108 '#ff6437', 109 '#ff6437', 110 '#ff6437', 111 '#ff6437', 112 '#ff6437' 113 ], 114 borderWidth: 1 115 }] 116 }, 117 options: { 118 scales: { 119 yAxes: [{ 120 ticks: { 121 beginAtZero: true, 122 max: 100 123 } 124 }] 125 } 126 } 127 }); 128 129 var average = Math.round((Math.round(amount0, 1) + Math.round(amount1, 1) + Math.round(amount2, 1) + Math.round(amount3, 1) + Math.round(amount4, 1) + Math.round(amount5, 1) + Math.round(amount6, 1)) / 7); 130 131 if (this.state.selectedValue == 'male') { 132 if (average < 20) { 133 $(".notice").text("今週の平均アルコール摂取量は" + average + "gです。適正な飲酒量です"); 134 } else if (average >= 20) { 135 $(".notice").text("今週の平均アルコール摂取量は" + average + "gです。飲み過ぎ注意!"); 136 } 137 } else { 138 if (average < 10) { 139 $(".notice").text("今週の平均アルコール摂取量は" + average + "gです。適正な飲酒量です"); 140 } else if (average >= 10) { 141 $(".notice").text("今週の平均アルコール摂取量は" + average + "gです。飲み過ぎ注意!"); 142 } 143 } 144 } 145 146// ここでグラフもリセットしたい 147 reset() { 148 this.setState({ 149 selectedValue: '' 150 }) 151 $('form').find('input[type="number"]').val(""); 152 $(".notice").text(""); 153 } 154 155 156 render() { 157 const{selectedValue} = this.state 158 159 const list = []; 160 161 const heads = [ 162 { head: "種類" }, 163 { head: "アルコール度数" }, 164 { head: "月" }, 165 { head: "火" }, 166 { head: "水" }, 167 { head: "木" }, 168 { head: "金" }, 169 { head: "土" }, 170 { head: "日" } 171 ]; 172 173 const list2 = []; 174 const list3 = []; 175 const list4 = []; 176 177 const rows = [ 178 { 179 id: 1, 180 type: 'ビール・缶チューハイ(缶 350ml)', 181 degree: '5%' 182 }, 183 { 184 id: 2, 185 type: 'ハイボール(缶 500ml)', 186 degree: '7%' 187 }, 188 { 189 id: 3, 190 type: 'ワイン(1杯 120ml)', 191 degree: '12%' 192 }, 193 { 194 id: 4, 195 type: '日本酒(1合 180ml)', 196 degree: '15%', 197 unit: '<div><input type="number" class="unit" placeholder="缶"></div><div><input type="number" class="unit" placeholder="缶"></div><div><input type="number" class="unit" placeholder="杯"></div><div><input type="number" class="unit" placeholder="合"></div><div><input type="number" class="unit" placeholder="杯"></div><div><input type="number" class="unit" placeholder="杯"></div>' 198 }, 199 { 200 id: 5, 201 type: '焼酎(一合 180ml)', 202 degree: '25%' 203 }, 204 { 205 id: 6, 206 type: 'ウイスキー(シングル 30ml)', 207 degree: '40%' 208 }, 209 ]; 210 211 const units = [ 212 {unit: "缶"}, 213 {unit: "缶"}, 214 {unit: "杯"}, 215 {unit: "合"}, 216 {unit: "杯"}, 217 {unit: "杯"} 218 ] 219 220 for(var i in heads){ 221 list.push(<div className="head" key={heads[i].head}>{heads[i].head}</div>); 222 } 223 224 225 for(var i in rows){ 226 list2.push(<div className="al-type" key={rows[i].id}>{rows[i].type}</div>); 227 } 228 229 for(var i in rows){ 230 list3.push(<div className="al-degree" key={rows[i].id}>{rows[i].degree}</div>); 231 } 232 233 for(var i in units){ 234 list4.push(<span key={rows[i].id}><div><input type="number" className="unit" placeholder={units[i].unit} /></div></span>); 235 } 236 237 238 return ( 239 <form onSubmit={this.execute}> 240 <div className="radio-area"> 241 性別を選んでください&nbsp;&nbsp;&nbsp;&nbsp; 242 <label> 243 男性 244 <input name="sex" type="radio" checked={selectedValue === 'male'} onChange={this.handleLimitChange} value="male" /> 245 </label> 246 <label> 247 女性 248 <input name="sex" type="radio" checked={selectedValue === 'female'} onChange={this.handleLimitChange} value="female" /> 249 </label> 250 <span>{this.renderLimit(selectedValue)}</span> 251 </div> 252 <div className="calc"> 253 {list} 254 <li>{list2}</li> 255 <li>{list3}</li> 256 <li>{list4}</li> 257 <li>{list4}</li> 258 <li>{list4}</li> 259 <li>{list4}</li> 260 <li>{list4}</li> 261 <li>{list4}</li> 262 <li>{list4}</li> 263 </div> 264 <div className="btn-box"> 265 <input type="submit" value="計算&グラフ生成" className="btn"/> 266 <input value="リセットする" className="btn" onClick={this.reset} /> 267 </div> 268 <canvas id="result"></canvas> 269 <span className="notice"></span> 270 </form> 271 ); 272 } 273} 274ReactDOM.render( 275 <WeekForm />, 276 document.getElementById('app') 277); 278 279 280 281 282

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2022/02/13 15:07

そのリセットボタンで、グラフ描画処理を呼べば良さそうなものですけれど。ページ表示時のみでなく、リセットボタンからも同じグラフ描画処理を。(reactやってないので検証コードはかけませんが。)
ttpk

2022/02/14 14:21

コメントありがとうございます resetメソッドにグラフの値を0にする処理を追加しました
guest

回答1

0

ベストアンサー

https://misc.0o0o.org/chartjs-doc-ja/developers/updates.html

上記リンクでチャートの更新を行っている例があります。
こちらをちょっと変更して、一気に削除を行なってチャートの更新を行なってみてはいかがでしょうか。

投稿2022/02/13 16:02

sk-sora--ypi

総合スコア528

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

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

ttpk

2022/02/14 14:20

回答ありがとうございます resetメソッドにグラフの値を0にする処理を追加しました var ctx = document.getElementById("result").getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["月", "火", "水", "木", "金", "土", "日"], datasets: [{ label: 'アルコール摂取量', data: [0, 0, 0, 0, 0, 0, 0] }] }, });
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問