Canvas関係のグラフを描くライブラリを使ってみた
<概要>
Canvasの練習です.
前回、"Canvasで、任意長の配列で折れ線を描いてみる"してみました.
次は、軸を描いてみて、グラフにしたいと思ったわけです.
そういえば、ライブラリが無いわけがないと思いまして、探して使ってみました.
今回使ってみたのは、次の2つ.
・Chart.js
・CanvasJS
他にも色々ある中でこれらに目をつけたのは、とりあえずはフリーだから.
それでいて、比較的データ自体の入力以外が少なそう...と思ったから.
しかし、いざやってみると細々としたオプションを設定したくなってしまったのでした.
↓とりあえず、同じデータで同じようなオプションを設定してみました↓
・Chart.js
・CanvasJS
Chart.jsは、凡例をクリックしたらそのデータの表示がトグルできるんですね！デフォルトで！これは素敵です.
しかし、デフォルトで表示時のアニメーションと線の下の塗りつぶしがついているのはイマイチです、チャーミングですけれども。
また、デフォルトで折れ線部分が丸くなるんです.これを外すのにしばらく悩みました.
CanvasJSは、とりあえず凝ったことをやろうとしたら有料らしいです.怖くて使いづらいです.
データ入力が単純な配列じゃなくて、{y:value}って具合にいちいち格納しないといけません.特定の値だけにlabelをつけられるのは良さそうですが.
今回はまだ使っていませんが、Spline Chartが用意されているのが気になるところです.
<結論>
どちらを使っていくのか全然悩む程度には、どちらも今ひとつでした.
<参考文献>
Chart.js | Open source HTML5 Charts for your website
