gistfile1.md

グラフ描画ライブラリ調査

d3.js

公式・ギャラリー

Github

SVG使用しているサンプルはIE8以下では動かない。

Angular.jsのdirective機能を利用したライブラリ２つ

• dangle.js、demo
• Radian

導入・サンプル

• d3.jsとAngular JS

所感

データを可視化をするライブラリとして昨今話題のd3.js。ただシンプルなグラフチャートをゴールにするとあまり使いやすくない。dangle.jsもRadianもデザインいいとは言えない。

Chart.js

公式・ギャラリー

Github

• IE8以上サポート？http://www.chartjs.org/docs/#generalIssues-browserSupport
• 日本語OK サンプル
• ライセンス MIT

導入・サンプル集

• 折れ線グラフ
• グラフを重ねる
• レスポンシブにするためには?
  • chartjs/Chart.js#56
  • http://jsfiddle.net/LHMRJ/

所感

実装もそんなに難しくない印象。事例集もまぁまぁ出てくるのでけっこうよいのでは。

Google Charts

公式

ギャラリー

導入・サンプル集

• ドットインストール

その他

• インタラクティブな動き

所感

文句なし。かなりサンプルコードも豊富。

amChart

公式

ギャラリー

その他

• グラフをimg画像、pdfにもexportできる!
  • サンプルコード
  • デモ
• リアルタイムでの描画に対応
  • http://jsfiddle.net/amcharts/ATQUm/
  • http://jsfiddle.net/amcharts/s6BnP/
• 商用でも無料。ただその場合は右上にリンクがついてるけど。

所感

デザインがきれい。コードも分かりやすい。サンプルコードも豊富。

その他ライブラリ

• Hightcharts.js
• gRaphaël
• jQuery Visualize Plugin

参考サイト

• http://tokkono.cute.coocan.jp/blog/slow/index.php/programming/javascript-data-visualization-libs/
• http://d.hatena.ne.jp/satosystems/20130910/1378784816
• http://qiita.com/hurutoriya/items/727296839a2ec638fdc4
• http://www.slideshare.net/kawada_hiroshi/js-20961633
• http://vallandingham.me/d3_without_svg.html