Javascriptでグラフを書く場合、Chart.jsを使うことが多いと思う。
ただ、Chart.jsは、
Canvasで超可愛いグラフが作れる!「Chart.js」の紹介
http://liginc.co.jp/web/js/40934
にあるように、多くのサンプルは、グラフを1回書くだけで、
Ajaxとか使って、動的にグラフを描いていく(アニメーションさせる)
方法を書いてないよね。
例えばこんな感じ
http://www.geocities.jp/xmldtp/js_chart1.htm
(ちょっと経つと、点が追加されていく。
下のボタンをクリックすると、少し経ってから
とまる(すぐにはとまらない)。
とまっているときにクリックすると、動き出す)。
なので、今日は、そこをちょっと書いてみる。
■ダウンロード
上記サイトに説明してあるので詳細は、省略。
Chart.jsの公式サイトで「Download」クリックすると、GitHubにいくので、
右下のDownloadZipをクリックしてくれ。
■参考文献
DownloadしたZIPを解凍すると、Chart.jsがあるところに、Sampleフォルダとdocフォルダがある。
Sampleフォルダの中には、サンプルチャートがあり、
docに説明がある(すげー大雑把な)。今回は、その「01-Line-Chart.md」を参考にした
(拡張子mdだけど、中身はテキストファイル)
■概要
1.世間一般に言われているように、グラフを書く
・今回は、折れ線グラフ(ラインチャート)
2.点を変更する場合、
myLineChart.datasets[0].points[2].value = 50;
myLineChart.update();
のように、点を設定して、updateする。ここで、
datasets(何本目の線か指定)まではいいが、
データは、dataで配列指定したはず。
だけど、
.points[なんばんめ].value
でイケるみたいよ!
3.点を追加する場合は、
myLineChart.addData([40, 60], "August");
はじめに追加する点。ここで2本の線がある場合2点、
3本の線がある場合、3点みたい・・
次に、横軸の項目名を書く。
■ソースコード
<!doctype html> <html> <head> <title>Line Chart</title> <script src="Chart.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <script> //==============================// // データ // //==============================// var datapos = 10; var onoff=1; var lineChartData = { labels : ["1番目","2番目","3番目","4番目","5番目","6番目","7番目","8番目","9番目","10番目"], bezierCurve: false, datasets : [ { label: "1本目", fillColor : "rgba(255,255,255,0.2)", strokeColor : "red", pointColor : "red", data : [] }, { label: "2本目", fillColor : "rgba(255,255,255,0.2)", strokeColor : "blue", pointColor : "blue", data : [] } ] }; //==============================// // 開始時処理 // //==============================// window.onload = function(){ // 初期データセット for(i=0 ; i < lineChartData.datasets.length ; i ++) { for(j=0;j< datapos;j++) { lineChartData.datasets[i].data[j] = Math.round(Math.random()*100); } } // チャート生成 var ctx = document.getElementById("canvas").getContext("2d"); window.myChart = new Chart(ctx).Line(lineChartData, { responsive : true }); // 1秒ごとに繰り返し setTimeout("mycheck()",1000); } //==============================// // 繰り返し処理 // //==============================// function mycheck() { myaddData = []; for(i=0;i<lineChartData.datasets.length;i++) { myaddData[i]= Math.round(Math.random()*100); } window.myChart.addData(myaddData,(datapos+1)+"番目"); datapos++; // 継続フラグが1だったら、再度呼ぶ if (onoff == 1 ) { setTimeout("mycheck()",1000); } } //==============================// // データ追加・停止 // //==============================// function stopsw() { if ( onoff == 1 ) { onoff = 0; } else { onoff = 1; setTimeout("mycheck()",1000); } } </script> </head> <body> <div style="width: 50%"> <canvas id="canvas" height="450" width="600"></canvas> </div> <button onclick="stopsw()">グラフ追加/停止切り替え</button> </body> </html> |
■動作
こんなかんじで、追加されていく。
動的に繰り返しているのは、
setTimeout("mycheck()",1000);
で、点を追加する処理を繰り返し呼んでいるから。
■PS
どうでもいいはなしだけど、一番はじめに紹介したサイト、LIGの会社の
ブログページだよね!
LIGって、社長が砂浜にもぐったり、世界一即戦力な男の、あのLIGだよねえ・・・おおお~