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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/16 04:39