D3.jsを使ってグラフを表示する

By | 2015年11月24日

d3js
GMOモバイルのT.Oです。
管理画面などで売上などのデータをグラフ表示したいという要望は多いのではないでしょうか?
そこでこの記事では以下のような棒グラフの実装手順をお伝えします。
グラフ描画にはJavaScriptライブラリであるD3.jsを利用します。

barchart
1.グラフデータを用意する
JSON形式にします。

2.グラフデータを描画するHTMLの用意
SVG要素を記述したHTMLを記述します。D3.jsで生成するグラフはSVG要素の部分に展開されることになります。

 

売上高

2.グラフデータ、表示する図形の設定
棒グラフを表示するのにSVGの矩形(rect)を使用します。

3.アニメーションを設定する
棒グラフが下から延びるような表示にします。
transitionメソッドなどを追加し、変化させたい属性の初期値と最終値を指定します。

4.グラフを完成させる
日付表示、凡例、スケール表示、マウスオーバーした時のツールチップなどのグラフ要素を追加して完成です。
D3.jsの場合、グラフデータに直接ひもづく要素を描画するのは容易なのですが、それ以外、例えば凡例などの要素は扱いにくいため、別途HTML要素として記述する方がお手軽です。
またグラフは期間中の傾向をざっくり把握することができるような表示内容にとどめ、詳細な数値などは表形式でグラフの下に表示するのがおすすめです。
D3.jsはもっと複雑なグラフや図形を描画するのも利用されています。ご興味のある方は以下のサイトで多くの事例が紹介されていますので是非参照してみてください。
D3.js – 日本語ドキュメント

 

 

売上高

The following two tabs change content below.

T.O

最新記事 by T.O (全て見る)