最近すっかりグラフ厨になってるんですが、ちょっとした解析ツールとかにグラフあったらいいなーなんて思う事ありますよね？
webアプリで使うならjsでグラフ書けると色々使い勝手がいいんですけど、毎回どのライブラリがいいかなー？と悩む訳ですよ。Highcharts.jsは格好いいけど、商用利用は有料だし・・しかも結構高いし・・
そんな中、「これでFAで良いんじゃないの？」ってのがあったので紹介してみます。
dygraphs.jsといいます。他にも幾つかライブラリを試してみたんですが、これはかなりシンプルに書けるわりに、高機能だったのが良かった。なかなか書き方の参考になりそうなところ見つからなかったので、幾つかサンプル残しておこうと思います。
一番シンプルなグラフ
こんな感じに書くだけです。データはCSV形式でシンプルな受け渡し。
<script type="text/javascript" src="dygraph-combined.js"></script>
<script type="text/javascript">
container = document.getElementById("graphdiv");
g = new Dygraph(container,
"Date,Temperature\n" +
"20121128,12\n" +
"20121129,16\n" +
"20121130,14\n" +
"20121201,12\n" +
"20121202,9\n" +
"20121203,13\n" +
"20121204,14\n"
);
</script>
デフォルトでドラック&ドロップで範囲を絞ることができます。
複数行のケース
複数のグラフ書くのは、CSVに列追加するだけ。
<script type="text/javascript" src="dygraph-combined.js"></script>
<script type="text/javascript">
container = document.getElementById("graphdiv");
g = new Dygraph(container,
"Date,Tokyo,NewYork\n" +
"20121128,12,5\n" +
"20121129,16,6\n" +
"20121130,14,6\n" +
"20121201,12,6\n" +
"20121202,9,8\n" +
"20121203,13,12\n" +
"20121204,14,10\n"
);
</script>
沢山のデータ表示
ベタに書かなくてもcsvファイルを指定することも可能
<script type="text/javascript" src="dygraph-combined.js"></script>
<script type="text/javascript">
container = document.getElementById("graphdiv");
g = new Dygraph(container,"graph3.csv");
</script>
使ったCSVはこんな感じです
Date,Data1,Data2,Data3,Data4,Data5,Data6,Data7,Data8,Data9,Data10
20121120,0,0,0,0,0,875,25,80,3035,0
20121121,0,2575,0,2950,0,1775,0,250,5900,4475
20121122,0,5725,0,3000,0,2000,0,145,9510,9350
20121123,0,4325,0,2525,0,2000,0,150,7735,5375
20121124,0,3750,0,2425,0,1600,1150,165,7330,5175
20121125,0,3075,0,2000,0,800,2125,925,6885,4800
20121126,0,2400,0,1400,0,675,1800,1485,6350,4275
20121127,0,2100,125,1525,0,2725,1250,1150,5950,3200
20121128,0,2475,1625,1125,0,2885,1350,1140,5725,2775
20121129,0,2525,1805,775,1510,2425,1650,820,5290,2575
20121130,560,2125,2050,800,3020,2650,975,880,5865,2900
20121201,975,1900,1840,850,2510,2525,700,1130,5320,2525
20121202,1000,1650,1810,750,2810,2325,1825,900,5330,2250
20121203,1200,1900,2020,700,2785,2575,1075,935,4690,2375
20121204,1075,2025,1860,700,2045,2425,1225,720,5065,2100
より複雑な例
上のケースだとデータ量が多すぎて視認性が悪いので、色々オプションを加えます
- グラフのハイライト
- クリック時のハイライト固定
- ラベルリストの外だし
- データのオン/オフスイッチ
- レンジセレクタ
色々触ったりクリックしたりすると感じが解ると思います。
若干コードが長くなりますが、一つ一つはシンプルです。CSVは上の例からヘッダ行とっただけ（ラベルの外だしするため）。
<script type="text/javascript" src="dygraph-combined.js"></script>
<script type="text/javascript">
// クリック時に実行されるcallback、ハイライトを固定する
var makeClickCallback = function(graph) {
var isLocked = false;
return function(ev) {
if (isLocked) {
graph.clearSelection();
isLocked = false;
} else {
graph.setSelection(graph.getSelection(), graph.getHighlightSeries(), true);
isLocked = true;
}
};
};
// グラフ描画ロジック
container = document.getElementById("graphdiv");
labels = document.getElementById("labels");
labels_arr = ['Date','Data1','Data2','Data3','Data4','Data5','Data6','Data7','Data8','Data9','Data10'];
g = new Dygraph(
container,
"graph4.csv",
{
labels: labels_arr, // ラベル名指定
labelsDiv: labels, // ラベル表示位置
showRangeSelector: true, // 表示範囲セレクターを表示
labelsSeparateLines: true, // ラベルの後ろに改行挟む
highlightSeriesOpts: { // ハイライトの設定
strokeWidth: 3,
strokeBorderWidth: 1,
highlightCircleSize: 5
}
});
// クリック時のcallback指定
g.updateOptions({clickCallback: makeClickCallback(g)}, true);
// 表示非表示切り替え
function change(el) {
g.setVisibility(parseInt(el.id), el.checked);
}
</script>
コールバックや表示切り替え部分はそのまま流用できるし、その他はオプションだけで設定できます。ライブラリ自体がかなり大きくて、他にも色々な機能があるのでデモを見ると解ると思います。ここで紹介した以外に、グラフの特定箇所に記しをつけるannotationなんかを使っています。
デモが幾つか分散していて、ギャラリータイプのと独立しているものがあります。お目当てを探すのが面倒なのですが、始めにざっと見て何ができるか把握すると良さそうです。
オススメです。
