高度情報化社会やビッグデータ時代と呼ばれている現代において、データビジュアライゼーション(データの視覚化)は注目されている分野の一つです。
アプリだけでなくWebサイトにおいても、ダッシュボード画面などで、大量のデータの中から意味のある情報を、分かりやすいUIを使って表示する機会が増えています。

ホームページにこのようなデータを表示するときに役立つのが、JavaScriptベースのチャート・グラフライブラリです。
操作性が優れていたり、さまざまな種類のチャートやグラフを表示したり、レスポンシブ対応していたりと、さまざまな機能を持つチャートライブラリが存在します。

今回は、2017年に試してみたい、いざという時に活躍するJavaScriptライブラリを集めました。
ほどんどのライブラリが商用利用も可能で、汎用性があります。
次のプロジェクトで採用できそうなライブラリをぜひ探してみてください。

いざというときに活躍するJavaScriptチャートライブラリ

1. D3.JS

01_d3.jpeg
https://d3js.org/

現在最も広く使われていて人気のあるJavaScriptの描画ライブラリのひとつが、D3.JSです。
D3.JSを使えば、HTML・SVG・CSSを使ってデータの描画を行うことができます。
実際にはD3.JSはデータビジュアライゼーションに特化しているというよりは2D・3Dのデータモデリングを行うライブラリですが、パワフルなビジュアライゼーションコンポーネントを兼ねそろえており、DOM操作を行うこともできるのでチャート作成にも便利です。

2. Recharts

02_recharts.jpeg
https://github.com/recharts/recharts

RechartsはReactとD3.JSを使ったチャートライブラリです。
複雑なコードを書くことなくReactの文法を使って簡単にグラフやチャートを作成することができます。
また、すでに50種類以上のすぐに使えるコンポーネントが用意されているので、グラフを再利用しながら作成することも可能です。

3. GraphicsJS

03_graphicsjs.jpeg
https://github.com/anychart/graphicsjs

GraphicsJSはSVG/VLMを用いてAPIで操作することができる軽量のJavaScriptグラフィックライブラリです。
GraphiscJSを使って作成したSVG/VLM中では、テキストインデントや字間・行間などを調整することができます。
また、クロスブラウザー・クロスプラットフォーム対応で、MacやiPhone、Windows PCやAndroidなどさまざまなデバイス、さらには驚くべきことにIE6まで標準でサポートしています。

4. Cesium

04_cesium.jpeg
http://cesiumjs.org/

Cesiumは高画質の3D地球儀・2Dマップを使ったWebGLベースのJavaScriptグラフィックライブラリです。
グラフとは異なりますが、気象シミュレーションやヒートマップなど、地図を使ったさまざまなグラフィックを作成することができます。

5. g9.js

05_g9js.jpeg
https://github.com/bijection/g9

g9.jsはインタラクティブなグラフィックを自動的に作成するJavaScriptライブラリです。
データを表す図形を描画する短いコードを書くだけで、ドラッグやマウスホバーで操作可能なチャートやグラフを作成できます。

6. Graphart

06_graphart.jpeg
https://github.com/styopdev/graphart

GraphartはHTML5 CanvasとJavaScriptを使ったライブラリで、あらゆるブラウザで完全にレスポンシブ表示できるリッチデータを表示することができます。
複数のグラフを重ねたりさまざまな指標を追加したりとさまざまなカスタマイズが可能なので、複雑なグラフを作成したい時に活躍します。

7. VivaGraphJS

07_vivagraph.jpeg
https://github.com/anvaka/VivaGraphJS

VivaGraphJSは高速で複雑な描画を実行できるJavaScriptライブラリです。
汎用性が高くさまざまなレンダリングエンジンに対応しており、他のライブラリにはない個性的なグラフを描くことができます。

8. MetricsGraphics.js

08_metrics.jpeg
http://www.metricsgraphicsjs.org/

MetricsGraphics.jsはグラフやチャートだけでなく時系列をもったデータの表示にも最適なD3JSを使ったJavaScriptライブラリです。
典型的なグラフをレスポンシブ対応で簡単に表示することができます。
棒グラフや線グラフ、散布図だけでなく、ヒストグラムやデータテーブルなどもサポートしています。

9. FancyGrid

09_fancygrid.jpeg
http://fancygrid.com/

FancyGridはテーブルを使った総合的なデータ整理を行うことができるJavaScriptのグリッドライブラリです。
ページングや並べ替え、Ajaxやファイルの読み込み、サーバーとのREST通信、タッチディスプレイ対応、Angular JS対応など、さまざまな機能をサポートしています。
データの項目が多い場合に最適なライブラリです。

10. Circles

10_circles.jpeg
http://www.lugolabs.com/circles

CirclesはシンプルなSVGベースの円グラフ描画に特化した軽量のJavaScriptライブラリです。
他のライブラリに依存することなく、短いコードで簡単な円グラフを作成することができます。
デザインも非常にシンプルで使いやすそうです。

11. cola.js

11_cola.jpeg
https://github.com/tgdwyer/WebCola

cola.jsはさまざまな要素を線でつなぐことができる、HTML5を活用したオープンソースのJavaScriptライブラリです。
D3JSやsvg.jsなど他のライブラリと組み合わせて使用することができます。

12. plotly.js

12_plotly.jpeg
https://github.com/plotly/plotly.js/

plotly.jsは3DチャートやSVGマップなどを含めた20種類ものチャートに対応したオープンソースのJavaScriptライブラリです。
ダウンロード版のほか、１行のコードを差し込むだけで使うことができるCDN版も用意されています。

13. CHARTIST.JS

13_chartist.jpeg
http://gionkunz.github.io/chartist-js/

CHARTIST.JSはSVGを使ったレスポンシブ対応のグラフを描画できるシンプルなJavaScriptライブラリです。
10KBと非常に軽量で、HTML・JavaScript・CSSで自由にデザインをカスタマイズすることができます。

14. Chart.js

14_chartjs.jpeg
http://www.chartjs.org/

Chart.jsはデザイン性に優れたクライアントサイドのオブジェクト指向のJavaScriptとHTML5のライブラリです。
IE7/8を含めたすべてのモダンブラウザに対応しています。
サイズも圧縮版なら4.5KBと軽量で、カスタマイズ可能なオプションもたくさんあります。

15. FusionCharts

15_fusioncharts.jpeg
http://www.fusioncharts.com/

FusionChartsは美しいインタラクティブなチャートを作成することができる軽量のJavaScriptライブラリです。
FusionChartsではSVGを使ってチャートを描画し、ガントチャートやファネルチャート、ウォーターフォールチャートなどあらゆる種類のユニークなチャートをサポートしています。
他のライブラリにはない複雑なグラフやチャートを作成したいときにオススメです。