dimple.js 積上げ棒グラフの作り方

dimple.js 積上げ棒グラフの作り方
あぱーブログ
2015年10月8日  カテゴリー:プログラム データ分析  タグ: , ,
Pocket
LINEで送る

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 の公式サイトから、ライブラリをダウンロードします。
dimple-01

ZIPファイルを解凍し、以下のフォルダに入っている「dimple.js」と「d3.js」を取り出します。(バージョンは 2015年10月8日時点のものです)
dimple-02

dimple-03

取り出した「dimple.js」と「d3.js」を、HTMLファイルにインクルードします。

以上で下準備は完了です。

積上げ棒グラフ用のデータの準備

店舗ごとの、ミカン、リンゴ、メロンの売上高の、積上げ棒グラフを作ってみたいと思います。
dimple-04

上のデータを1行づつ「"<属性名(カラム名)>" : "<値>"」の形式で、JavaScriptの配列データ(data)を作ります。(日本語も問題なく使えます)

データの準備も完了です。次はいよいよグラフの表示です。

積上げ棒グラフの表示

SVG要素(グラフの表示エリア)を作成します。オプションの意味は ("<セレクタ名>", <幅>, <高さ>) です。

var svg = dimple.newSvg("body", 800, 600);

SVG要素(svg)と、グラフ用データ(data)から、グラフオブジェクトを生成します。このオブジェクト(chart)に対して、グラフの表示設定を行い、最後にグラフを描画します。

var chart = new dimple.chart(svg, data);

グラフの大きさを設定します。dimple.newSvg で指定した、エリアサイズより小さくなるように指定します。オプションの意味は (左の余白, 上の余白, グラフ幅, グラフの高さ) です。

chart.setBounds(100, 10, 700, 500);

グラフの縦軸と横軸の設定です。今回は「店舗ごとの売上高」のグラフを作りたいので、横軸(x)に店名、縦軸(y)に売上高を指定します。xAxis や yAxis は、それぞれ軸ごとの詳細設定に使います。

var xAxis = chart.addCategoryAxis("x", "店名");
var yAxis = chart.addMeasureAxis("y", "売上高");

グラフの種類の設定です。棒グラフを作りたい場合は2つめのオプションに「dimple.plot.bar」を指定します。また「商品ごとの積上げ棒グラフ」を作りたいので、1つめのオプションには「商品」を指定します。(普通の棒グラフの場合は null を指定)

var barAxis = chart.addSeries("商品", dimple.plot.bar);

以上でグラフの基本的な設定は出来ました。最後に draw メソッドでグラフを表示します。オプションの値は、表示アニメーションの間隔です。(単位はミリ秒)

chart.draw(2000);

動作サンプル
dimple-05

売上高の値によって、商品ごとの色や店名の並び順を、dimple がいい感じに調整してくれますが、グラフのこのような部分なども制御することが可能です。続けてグラフの詳細な設定方法を見ていきましょう。

グラフの詳細設定

商品ごとの色の設定

chart.assignColor("ミカン", "#ffbf7f");
chart.assignColor("リンゴ", "#ff7f7f");
chart.assignColor("メロン", "#7fff7f");

積上げ棒グラフの並び順(下から)

barAxis.addOrderRule(["ミカン", "リンゴ", "メロン"]);

横軸(x)店名の並び順(左から)

xAxis.addOrderRule(["A店", "B店", "C店"]);

横軸(x)のタイトル

xAxis.title = "店名(関東)";

横軸(x)のフォントサイズ

xAxis.fontSize = "15px";

縦軸(y)のタイトル

yAxis.title = "売上高(10月分)"

縦軸(y)のォントサイズ

yAxis.fontSize = "13px";

縦軸(y)の丸めの設定、null を指定するとON、空欄を指定するとOFF になります。(これはバッドノウハウぽいです)

yAxis.tickFormat = "";

以上の設定を行うと、下のようなグラフになります。

動作サンプル
dimple-06

これらの設定の他にも、dimple には沢山のメソッドが用意されています。詳細は、dimple の公式ドキュメントをご参照ください。

サンンプルコード

もろもろまとめると、以下のようなコードになります。

おわりに

dimpleのサンプルを眺めてみると、積上げ棒グラフ以外にも、かなり複雑で面白いグラフも作成できそうです。開発コストも少なくて済みそうなので、これまで諦めていたグラフ表示機能に使ってみてはいかがでしょうか

スポンサーリンク
Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です