dimple（ディンプル）は、さまざまなグラフを簡単に作成できる JavaScript ライブラリです。データ可視化ライブラリの定番 D3.js と合わせて使います。D3.js は柔軟性が高く、複雑なデータを可視化することが得意ですが、グラフの描画処理を自分で作成する必要があります。描画処理のコードを書くのは、なかなか大変ですが、この dimple ライブラリを使えば、複雑なグラフを、わずか数行のコードで作成することができます。
クラフ描画ライブラリを色々調べてみましたが、少し込み入ったグラフを作成するには、この dimple が、一番自由度が高く使いやすいと思います（しかもBSDライセンスなので商用利用も可能）そこで今回は、複雑なグラフの一例として dimple を使った積上げ棒グラフの作り方をご紹介したいと思います。
※ dimple は、IE8 もしくは、それ以前の IE には対応していませんので、ご注意ください。
The dimple api is tested against Firefox, Chrome, Safari and IE9. It's browser support is largely inherited from d3 so using it on IE8 and earlier will be difficult/impossible.
dimple 公式ドキュメント より引用
dimple.js と D3.js の導入
dimple の公式サイトから、ライブラリをダウンロードします。
ZIPファイルを解凍し、以下のフォルダに入っている「dimple.js」と「d3.js」を取り出します。（バージョンは 2015年10月8日時点のものです）
取り出した「dimple.js」と「d3.js」を、HTMLファイルにインクルードします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>dimple.js で作った積上げ棒グラフ</title>
<script src="d3.v3.4.8.min.js"></script>
<script src="dimple.v2.1.6.min.js"></script>
</head>
</html>
以上で下準備は完了です。
積上げ棒グラフ用のデータの準備
店舗ごとの、ミカン、リンゴ、メロンの売上高の、積上げ棒グラフを作ってみたいと思います。
上のデータを１行づつ「"＜属性名(カラム名)＞" : "＜値＞"」の形式で、JavaScriptの配列データ(data)を作ります。（日本語も問題なく使えます）
<body>
<script>
var data = [
{"店名":"A店", "商品":"ミカン", "売上高":8000},
{"店名":"A店", "商品":"リンゴ", "売上高":12000},
{"店名":"A店", "商品":"メロン", "売上高":15000},
{"店名":"B店", "商品":"ミカン", "売上高":30000},
{"店名":"B店", "商品":"リンゴ", "売上高":20000},
{"店名":"B店", "商品":"メロン", "売上高":10000},
{"店名":"C店", "商品":"ミカン", "売上高":18000},
{"店名":"C店", "商品":"リンゴ", "売上高":5000},
{"店名":"C店", "商品":"メロン", "売上高":30000}
];
</script>
</body>
データの準備も完了です。次はいよいよグラフの表示です。
積上げ棒グラフの表示
SVG要素(グラフの表示エリア)を作成します。オプションの意味は ("＜セレクタ名＞", ＜幅＞, ＜高さ＞) です。
SVG要素(svg)と、グラフ用データ(data)から、グラフオブジェクトを生成します。このオブジェクト(chart)に対して、グラフの表示設定を行い、最後にグラフを描画します。
グラフの大きさを設定します。dimple.newSvg で指定した、エリアサイズより小さくなるように指定します。オプションの意味は (左の余白, 上の余白, グラフ幅, グラフの高さ) です。
グラフの縦軸と横軸の設定です。今回は「店舗ごとの売上高」のグラフを作りたいので、横軸(x)に店名、縦軸(y)に売上高を指定します。xAxis や yAxis は、それぞれ軸ごとの詳細設定に使います。
var yAxis = chart.addMeasureAxis("y", "売上高");
グラフの種類の設定です。棒グラフを作りたい場合は２つめのオプションに「dimple.plot.bar」を指定します。また「商品ごとの積上げ棒グラフ」を作りたいので、１つめのオプションには「商品」を指定します。（普通の棒グラフの場合は null を指定）
以上でグラフの基本的な設定は出来ました。最後に draw メソッドでグラフを表示します。オプションの値は、表示アニメーションの間隔です。（単位はミリ秒）
売上高の値によって、商品ごとの色や店名の並び順を、dimple がいい感じに調整してくれますが、グラフのこのような部分なども制御することが可能です。続けてグラフの詳細な設定方法を見ていきましょう。
グラフの詳細設定
商品ごとの色の設定
chart.assignColor("リンゴ", "#ff7f7f");
chart.assignColor("メロン", "#7fff7f");
積上げ棒グラフの並び順（下から）
横軸(x)店名の並び順（左から）
横軸(x)のタイトル
横軸(x)のフォントサイズ
縦軸(y)のタイトル
縦軸(y)のォントサイズ
縦軸(y)の丸めの設定、null を指定するとON、空欄を指定するとOFF になります。（これはバッドノウハウぽいです）
以上の設定を行うと、下のようなグラフになります。
これらの設定の他にも、dimple には沢山のメソッドが用意されています。詳細は、dimple の公式ドキュメントをご参照ください。
サンンプルコード
もろもろまとめると、以下のようなコードになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>dimple.js で作った積上げ棒グラフ</title>
<script src="d3.v3.4.8.min.js"></script>
<script src="dimple.v2.1.6.min.js"></script>
</head>
<body>
<script>
var data = [
{"店名":"A店", "商品":"ミカン", "売上高":8000},
{"店名":"A店", "商品":"リンゴ", "売上高":12000},
{"店名":"A店", "商品":"メロン", "売上高":15000},
{"店名":"B店", "商品":"ミカン", "売上高":30000},
{"店名":"B店", "商品":"リンゴ", "売上高":20000},
{"店名":"B店", "商品":"メロン", "売上高":10000},
{"店名":"C店", "商品":"ミカン", "売上高":18000},
{"店名":"C店", "商品":"リンゴ", "売上高":5000},
{"店名":"C店", "商品":"メロン", "売上高":30000}
];
var svg = dimple.newSvg("body", 800, 600);
var chart = new dimple.chart(svg, data);
chart.setBounds(100, 10, 700, 500);
var xAxis = chart.addCategoryAxis("x", "店名");
var yAxis = chart.addMeasureAxis("y", "売上高");
var barAxis = chart.addSeries("商品", dimple.plot.bar);
chart.assignColor("ミカン", "#7fbfff");
chart.assignColor("リンゴ", "#ffff7f");
chart.assignColor("メロン", "#7fff7f");
barAxis.addOrderRule(["ミカン", "リンゴ", "メロン"]);
xAxis.addOrderRule(["A店", "B店", "C店"]);
xAxis.title = "店名（関東）";
xAxis.fontSize = "15px";
yAxis.title = "売上高（10月分）";
yAxis.fontSize = "13px";
yAxis.tickFormat = "";
chart.draw(2000);
</script>
</body>
</html>
おわりに
dimpleのサンプルを眺めてみると、積上げ棒グラフ以外にも、かなり複雑で面白いグラフも作成できそうです。開発コストも少なくて済みそうなので、これまで諦めていたグラフ表示機能に使ってみてはいかがでしょうか
コメント