Ajax MGraph - prototype.jsベースのJavaScriptグラフ表示ライブラリ
Ajax MGraphは、prototype.jsベースのJavaScriptグラフ表示ライブラリです。
表示できるグラフは縦棒グラフだけですが、これがなかなかキレイ。
こんな感じです。
実際に自分でも試してみましたが、ソースをちょっと加工しないとうまく動かせませんでした。
折角なので、使い方も書いておきます。
ソースはPHPのプログラムの結果をデータとして使いますが、ここではJSONを使うように修正します。
まずは、graphM.prototype.jsの45行目をJSONのファイルを読み込むように変更します。
new Ajax.Request('number_generator.json', {
そして、graphM.prototype.jsの60～64行目の内容を日本語用に書き換えます。
$('ag-dump').innerHTML+=g.returnHTML;
$('ag-head').update('グラフのバーの上にマウスを乗せると値が表示されます。');
$('ag-max').update('最大値: '+g.max);
$('ag-min').update('最小値: '+g.min);
$('ag-avg').update('平均値: '+g.avg);
読み込みデータは、number_generator.jsonというファイル名で、次のようにJSON形式で作成します。
{
"num":[591,372,900,144,376,18,671,163,323,480,136,322],
"xTitle":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
"msg":"Success"
}
それからHTMLを次のように作成します。
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="agGraph.css" />
<script type='text/javascript' src='prototype.js'></script>
<script type='text/javascript' src='graphM.prototype.js'></script>
<script type='text/javascript'>
function init() {
agGraphDivID='resultDiv';
agGraphShowNote='yes'; // yes,or no
agGraphNoteTitle='2006年度売上実績';
agGraphNoteText='6月の売上が極端に落ち込んでいます。';
}
</script>
</head>
<body onload="init()">
<input type="button" value="Generate Graph" id="startButton" onclick="draw();" />
<div id="resultDiv"/>
</body>
</html>
実行結果です。
グラフにマウスを乗せると、グラフの色が変わり値が表示されます。
ちょっと使うのに工夫がいりますが、画面もキレイだしなかなか使えそうなライブラリですね。
なお、ライセンスはMITライセンスとのことです。
Tags: JavaScript, グラフ
« VMX-Editorベータ版 － VMWare Playerのイメージを作成するフリーツール | トップページ | Compress Your JavaScript - オンラインJavaScript圧縮ツール »
コメント