第15回「WEBシステムでのグラフの描画について」

更新日:

こんにちは、森川です。

はじめに

デザイン系の事例は書こうと思えばいくらでも書けるのだけど、システム系はなかなか公開できない。
さすがに、よその会社の社内システムを構築しました。でも、その内容を勝手に詳しく公開するわけにはいかない。

ということで今回はシステム構築の中でこういうグラフを作りましたということを事例紹介とさせていただくとともに、どうやってこういうものを作るのかという技術者向け情報をあわせて書こうと思う。

システム開発グラフ案件事例の紹介

これまでグラフ関係の案件は数々こなしてきたけれど、じっくり作り込んだものをあげるならば以下の2つかな。

事例1

これは株価とかにでてくるローソクチャートと呼ばれるものです。

事例2

詳細は言えないけど、要は売上を解析して折れ線グラフにしたもの。
特にこれは結構深く作っていると思う。
左側のチェックボックスで棒グラフの表示非表示をコントロールでき、折れ線グラフの各ポイントにマウスを合わせるとその詳細がポップアップで表示される。
デザインも、先方から指定されてそれと全く同じに仕上げている。

WEBでできるかどうかわからないので、できる範囲でお願いしますという話だったが、デザインも含めて結局すべてを仕様通りに盛り込んだので、ちょっと依頼者も驚いていた(鼻高々)。

技術者向情報

では続いて、WEBシステムでこういうグラフの案件はどういうように対処していけばよいかまとめておく。

グラフの部分は何でできているかというと、それは「canvas」や「svg」です。
canvasやsvgを使って一から全部作るというのは、なかなか大変なことなので何かしらのjsのライブラリを使うことになる。

しかし、始めての人は必ずここで迷うはず。
「WEB グラフ」で検索するとグラフ関係のライブラリがたくさん出てくる。結局どれを使えばいいのだろうか??と。

私は、WEBシステムでグラフを描画する方法は大きく分けて2つと認識しています。

グラフ描画方法その1

表示したいグラフ形式を指定して、グラフ化したいデータの値を放り込めば勝手にグラフ化してくれるという便利なライブラリを使用する。

代表的なライブラリ
・Charts.js
・Google Chart
・Canvas.js
などなど、他にもたくさん出てくると思う。

これらのライブラリを使ってグラフを描画した後、cssやjsで外部から操作してデザインをカスタマイズする。

メリット、デメリット
この方法のメリットは、グラフの形式を指定してグラフ化したいデータをはめ込むだけなので、とても簡単。小難しい知識がなくても描画できるし、開発工数がかなり削減できる。
逆のデメリットをあげると、決められた型枠にデータを放り込むだけなので、型枠から外れるような複雑な案件には対応できない。

グラフ描画方法その2

svgを操作して自分で一から自由にグラフを描画する。

使用するライブラリ
・D3.js

メリット、デメリット
この方法のメリットは、自分で自由に描画できるので、自由度がとても高い。おそらくおおよそどんな案件でも対応できると思う。
逆にデメリットは、svgの知識が必要であること、D3.jsのライブラリの使い方を習得しないといけないなど、「その1」と比べると技術的にはるかにハードルが高くなる。
値を入れたら勝手にグラフ化してくれるという類のものではない。
また、canvasではないのでレスポンシブ対応が難しいところではあるのだが、そこはjsで調整すればなんとかなる(私はなった)。

方法その1であげたライブラリ群は、グラフ描画に特化したものですが、D3.jsは、数値を視覚的に表現するために作られているライブラリで、グラフを描くことに特化されたライブラリではないです。
だからとても自由度が高い。

まとめ

「WEBグラフ」で検索するといろいろなJSのライブラリがたくさん出てきて迷うと思う。私の中では、これらを大別して「D3.js」と「それ以外」に分けている。

「それ以外」というのがここで言う「方法その1」のことで、グラフ描画に特化したライブラリ。
私も全部使ったわけではないので詳しくはわからないが、おそらくどれを選択しても大差はないと思う。
初めての人はそれぞれのライブラリをざっと眺めて、エイヤーでどれを使うか決めてしまえばよいと思う。

D3.jsは、それらのライブラリと異なり、グラフに特化したライブラリではない。だからとても自由度が高い。
D3.jsは、データのような数値を視覚的に表現するために使われるライブラリで、jQueryのようにDOMを操作することもできるのだけど、一番の強みはsvgを操作するときにでてくる。
座標計算が簡単にできたり、svgの要素を操作できる点が他にないところ。

svgの基礎知識は必須。
jQueryを使ってDOMを操作するとき、各要素にどういう属性があるのか、どういうプロパティがあるのかはわかってるはず。例えばaタグにはhrefという属性があるから、その属性をattrメソッド操作しようみたいに。
それと同じでD3.jsを使うときは、svgにどんな要素や属性があるのか知らないと使えない。

D3.jsの使い方は、jQueryと比べると難しいと思う。
私の使った感想としてはノンプログラマーの人は、これらを使いこなすのはちょっと難しいかもしれない。
逆にプログラマーの方であれば、D3.jsは勉強しておくことをお薦めする。
グラフ案件はそこそこ多いことと、D3.jsというライブラリは本当によく出来ていると思う。作りとかとても勉強になる。

D3.js初めての人への目安だけれども、jsに慣れている人でsvg、D3.jsの使い方をおおよそ把握するのに3日ぐらいかかるかな。
その後に実際の案件に組み込んでいくわけなので、初めての人でトータルで一週間ぐらいの工数を見込んでおいた方がよいと思う。

私の場合

実際に私がどうしているかというと、
Google Chart またはD3.jsの二択。
です。

簡単な案件は、Google Chartを使います、それでは対応できないと判断した場合にD3.jsを使うようにしています。
機能面の複雑さもそうですが、凝ったデザインを指定された場合は、ほぼ「方法その1」では無理になる場合が多い。
事例として紹介した案件は、D3.jsを使っています。

各ライブラリの使い方は、いろいろな人が書いていると思うので、時間の都合上割愛します。
私のやり方なので正しいかどうかわかりませんが、何かの参考になれば。

短時間で書いているので誤字脱字はご容赦をmOm。ではでは。