Canvasを使ってグラフ作成ライブラリを自作してみました

グラフ作成ライブラリ

Web系のアプリに携わっていると、グラフ作成の機会も割と発生します。

そんなときはその開発環境に合わせて、既に公開されているライブラリを見つけて使う機会というのは多いと思います。

私もReactJSでのアプリ作成の際には「react-chartjs-2」を使ったりしています。

今回の勉強の経緯

課題

けっこうグラフのデザインは、作りたいものによってテイストを変えたいということが多いように感じます。

まだ、趣味で触っている分には許容されることでも、ビジネスの現場ではデザインにこだわりのあるお客様も往々に多いと思います。

もう１点の懸念事項としては、サイズの調整や、凡例の位置、メモリの表示などを調整するに当たってはけっこう苦戦した経験があります。

解決策

チャートライブラリはOSSのものが多いので、課題解決のためのカスタマイズというのが、第一に思いつく方法になります。

しかし、カスタマイズのためのソース分析や、そもそもそのライブラリを使うに当たっての学習コストという部分を踏まえると、実は作ってしまった方が早いという場面もあると思います。

これはあくまで時間や労力のコストメリットの話になりますので、明らかに時短になり、仕上がりとしてもそのままのデザインで許容が得られるのであれば、ライブラリを利用するというのはベストな選択になります。

ただ、デザインでの調整が入ることが懸念され、作ろうとしてるアプリの配置的にも苦慮しそうな懸念があれば、自作という選択肢も出てくると思いました。

グラフ作成ライブラリの自作方法

今回はCANVASを使って、Javascriptのライブラリとして作成しました。

CANVASはHTML5で扱えるタグ（機能）で特に追加のライブラリなどは不要です。

CANVASタグを配置し、そのタグに対してJavascriptで座標操作で線や多角形、円などを描画できる機能です。

現在、公開されているチャートライブラリの多くも、CANVASを使っているものが多いと思います。

なので、カスタマイズするにしてもCANVASの記述法の理解は必要です。

棒グラフ

まずは手始めに、単純な棒グラフの作成を行います。

ライブラリへのパラメータは、CANVASタグのエレメントとパラメータです。

パラメータには、データの他に、グラフのY軸となる最大値やメモリの単位、グラフの幅や色などを連想配列で渡します。

受け取ったパラメータ値で、Y軸とX軸を描画し、棒グラフを書いていきます。

パラメータのデータは複数要素を渡せるように多重配列で工夫します。

そうすることで、複数のデータを比較できるような棒グラフに仕上げます。

（出来上がりはこちら）

制作時間：約２時間

ミックスグラフ（積み上げ＋折れ線）

棒グラフで感覚を掴んだので、今度はもう少し複雑なグラフです。

積み上げグラフは、複数要素のデータを積み上げるようにしてグラフ化します。

次に折れ線グラフを描画しますが、こちらも複数要素に対応できるようにしました。

折れ線グラフは各値のプロット時に直前の線を引くようにして、それをループ処理で回しましたが、値のプロット（円）の周辺に白線を引くところで、すぐ後の線に上書きされてしまうため綺麗に描画されないというちょっとしたミスがありました。

結果、一旦線を引いて、その後にプロット（周囲白線）していくという形でループを別個にする工夫が入りました。

（出来上がりはこちら）

制作時間：約４時間

感想

簡単なチャートライブラリを自作してみました。

１つの種類のグラフであれば約２時間ほどで作れる印象です。

今回やれていないこととしては、以下の通りです。

• 凡例をつけてない
• レスポンシブ対応にしていない
• カーソルを当てた際にその点の値をチップ表示していない

凡例は時間があればつけるのは難しくない感触です。

レスポンシブとチップ表示はそれなりに実装には時間を要すると思います。

レスポンシブするには表示サイズに合わせてグラフを細くするとか、潰れ切った時にはどうするかなどの前提置きも発生しそうです。

チップ表示は単純にそのノウハウを身につけるところからですか。。。（これもできないことではないと思います）

そもそもビジネスで使うとすれば、より細かいオーダーが来ることが想定され、自作しているソースであれば、それも柔軟に対応できる感触です。

まずは、自作でチャート作成をするのにどの程度の時間を要するかという感覚を掴むための勉強でした。