Javascriptでグラフを書く場合、Chart.jsを使うことが多いと思う。
ただ、Chart.jsは、
Canvasで超可愛いグラフが作れる!「Chart.js」の紹介
http://liginc.co.jp/web/js/40934
にあるように、多くのサンプルは、グラフを１回書くだけで、
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だけど、中身はテキストファイル）
■概要
１．世間一般に言われているように、グラフを書く
・今回は、折れ線グラフ（ラインチャート）
２．点を変更する場合、
myLineChart.datasets[0].points[2].value = 50;
myLineChart.update();
のように、点を設定して、updateする。ここで、
datasets（何本目の線か指定）まではいいが、
データは、dataで配列指定したはず。
だけど、
.points[なんばんめ].value
でイケるみたいよ！
３．点を追加する場合は、
myLineChart.addData([40, 60], "August");
はじめに追加する点。ここで２本の線がある場合２点、
３本の線がある場合、３点みたい・・
次に、横軸の項目名を書く。
■ソースコード
<!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
});
// １秒ごとに繰り返し
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++;
// 継続フラグが１だったら、再度呼ぶ
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);
で、点を追加する処理を繰り返し呼んでいるから。
■ＰＳ
どうでもいいはなしだけど、一番はじめに紹介したサイト、LIGの会社の
ブログページだよね！
LIGって、社長が砂浜にもぐったり、世界一即戦力な男の、あのLIGだよねえ・・・おおお～
アクセス
トータル
ランキング
