JavaScriptでグラフを描くために
javascriptでグラフを描くときに、やはりライブラリを使用しないといろいろ苦労する。ので、当然、ライブラリを使うことになろうと思います。
しかしながら、意外にもグラフライブラリは数も多く、
- そもそもどんなライブラリが存在するのか
- ライセンス形態は？有料？無料？
- 描けるグラフの種類は？
- あわよくば、アニメーションとかしちゃう？
など、使うまでの道のりもちょっと面倒です。
しかし、そんな時に有用なサイトがありました。
書きたいグラフ、商用利用できるのかどうか、などを選択するだけで、選択肢が絞り込めます。そんな感じで、いくつか選んで触ってみたので、その感想を書きたいと思います。
graphライブラリを触ってみた。
基本的には、個人で触るので、無料で使えるものだけを触ってみました。一度に書くのは面倒なので、少しずつ書くことにします。
Canvasjs
良かった点
デザイン
Canvasjsを選んだ理由は、ズバリかっこよさです。フラットデザインでシンプル、そしてデフォルトの色使いがくどくない、ところがミソでした。
細かいチューニングもできて、グラフのアニメーションもできました。
軽量さ
グラフ描画が軽かった！
他のライブラリだと、ライセンスのこともあるのでしょうか、裏で通信したりしているようです。そのため、描画が重たいものも珍しくなかったです。
微妙な点
ライセンス
個人的には、ライセンスでした。ライセンスはCreative Commons Attribution-NonCommercial 3.0 となっています。詳細は、リンク先を読んでもらうとして、Canvasjsの公式サイト（2016/2/14時点）には、
- a non-profit
- student or an educational institute
なら無料で使えると明言されています。
アファリエイトは微妙ですね。そして、（製品やサービスへ組み込まないにしても）企業で使ってみるのもほぼ黒いグレーだな・・・というのが残念ポイントでした。
バグ
bootstrapと組み合わせて使っていた時、floatシステムの中で回りこみさせつつグラフが描画できないというバグがあったのです。
バグの内容は、以下です。
IndexSizeError: Index or size is negative or greater than the allowed amount
どうやらググってみると、canvasjsというよりcanvasのバグのような気がしますが、いずれにしろ、グラフ描画できなかったのは事実です。グラフが描きたいだけで、どうしてもこのライブラリである必要もないので、このライブラリを使うことをやめることにしました。
今日はここまで。
2016/2/18追記
上記のバグかも、と書いた内容ですが、回避策がありました。
どうやら、グラフを描画するためのpx数を算出するロジックで、widthを明示しておかないと、0の計算が発生するようです。これが原因で、グラフの描画ができなかったようです。
ので、cssでwidthを明示しておいてあげると、グラフの描画ができるようになりました。