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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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

Q&A

解決済

1回答

6036閲覧

Chart.jsの基本的な使用法について

cafe_takai

総合スコア27

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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

0グッド

1クリップ

投稿2017/05/16 00:15

編集2017/05/16 00:42

Chart.jsを使用してブラウザ上でグラフを描画しています。

ボタンを押してデータを更新するのですが、何回かボタンを押したのち、マウスをグラフのデータにホバーするとグラフが入れ替わってしまい困っています。

JavaScriptにおけるクラス(オブジェクト)の破棄方法?も良く分からず、公開元のドキュメントも読んだのですが、今一つ不明です。

どなたかご教授いただけましたら幸いです。

HTML

1<!DOCTYPE html> 2<html> 3 <head> 4 <title>sample ChartJS</title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script> 8 </head> 9 <body> 10 <button type="button" onclick="set_fig()">TEST</button> 11 <div id="txt"></div> 12 <canvas id="fig1"></canvas> 13 <script> 14 var click_cnt = 0; 15 16 function set_fig() { 17 click_cnt += 1; 18 document.getElementById("txt").innerHTML = click_cnt; 19 var newDataset = {}; // データセットオブジェクト 20 var x_label = []; //x軸 21 var cnt = 3; //折れ線グラフの線数(ここは本番では動的...) 22 for (var i = 0; i < 24; i++) { 23 x_label.push((i + 1) + "時"); 24 } 25 var g_data_g = { 26 //データ項目のラベル 27 labels: x_label, 28 //空のデータセット 29 datasets: [], 30 }; 31 // 列数を得られたので、それからオブジェクト書式に変更する。 32 for (var i = 0; i < cnt; i++) { 33 var ts = '{label: "' + i + '(' + click_cnt + ')"'; 34 ts = ts + ', borderColor: "' + get_gcolor(i) + '", fill: false, data:['; 35 for (var j = 0; j < 24; j++) { 36 var rand = Math.floor(Math.random() * 11); 37 ts = ts + rand + ","; 38 } 39 //最後の一文字を消す 40 ts = del_last_char(ts); 41 ts = ts + "]}"; 42 var newDataset = (new Function("return " + ts))(); 43 g_data_g.datasets.push(newDataset); 44 } 45 var ctx = document.getElementById("fig1"); 46 new Chart(ctx, { 47 //グラフの種類 48 type: 'line', 49 //データの設定 50 data: g_data_g, 51 //オプションの設定 52 options: { 53 //軸の設定 54 scales: { 55 //縦軸の設定 56 yAxes: [{ 57 //目盛りの設定 58 ticks: { 59 //最小値を0にする 60 beginAtZero: true 61 } 62 }] 63 }, 64 //ホバーの設定 65 hover: { 66 //ホバー時の動作(single, label, dataset) 67 mode: 'dataset' 68 } 69 } 70 }); 71 } 72 73 // 線の色 74 function get_gcolor(numVal) { 75 var gcolor = [ 76 "rgba(255,0,0,1)", // 赤 77 "rgba(0,255,0,1)", // 緑 78 "rgba(0,0,255,1)", // 青 79 "rgba(255,255,0,1)", // 黄 80 "rgba(255,0,255,1)", // 紫 81 "rgba(0,255,255,1)", // 水色 82 "rgba(0,0,0,1)" // 黒 83 ]; 84 return gcolor[numVal % gcolor.length]; 85 } 86 87 //最後の一文字を消す 88 function del_last_char(str) { 89 //return str.substr(str.length-1); 90 return str.slice(0, -1); 91 } 92 </script> 93 </body> 94</html> 95 96 97

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

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

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

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

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

guest

回答1

0

ベストアンサー

チャートそのものを変数に入れて、2回目以降はdestoryで前のものを破棄すれば行けると思います。

javascript

1var click_cnt = 0; 2var mychart; // 追加

javascript

1var ctx = document.getElementById("fig1"); 2if(click_cnt > 1) { // 追加 3 mychart.destroy(); // 追加 4} // 追加 5mychart = new Chart(ctx, { // 変更

投稿2017/05/16 04:04

bananacoffee

総合スコア260

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

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

cafe_takai

2017/05/16 04:39

bananacoffee 様 ご回答ありがとうございます。 ご教授いただきました通り実行したところ、うまくいきました。 なおclick_cntはデバッグ用の変数ですので、次の通り変更させていただきました。 if(click_cnt > 1) { // 追加  ↓ if(mychart !== undefined) { // 追加 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問