【画像あり】Webページで表示できる綺麗なグラフ4つ

Webで表示できる美しいグラフを4つ紹介します。
美しいグラフは、ユーザーの興味を惹くことができるため、訴求力が高まります。
また、わかりやすさも向上するため、アプリケーションの使い勝手も向上します。


簡易比較表

	無料/有料	グラフの種類	サンプル	複合グラフ
High Charts	×	◎	◎	◎
Google Chart Tools	◯	◎	△	◎
Raphael.js	◯	◯	◯	△
ccchart	◎	△	◎	◎

各々長所と短所があるので、状況に合わせて使い分けてください。
上から順におすすめです。

---

High Charts

サンプルページ  
http://www.highcharts.com/demo/

長所

• 円グラフや棒グラフを簡単に組み合わせることができる
• アニメーションがきれい
• サンプルが豊富

短所

• 商用ライセンス

 ダウンロードページ
http://www.highcharts.com/download

---

Google Chart Tools

サンプルページ
https://developers.google.com/chart/interactive/docs/gallery
 
長所

• 無料
• HighChart並みの表現力、柔軟性がある

短所

• サンプルが貧弱

 ダウンロードページ
https://www.google.com/jsapi  

---

Raphael.js
 
サンプルページ 
http://raphaeljs.com/ 

長所

• 単体のグラフを作成するなら、これが一番きれい
• 無料

短所

• 複合グラフを作成するためには、elychartsというプラグインが必要
• elychartsのサンプルが汚い

 ダウンロードページ
http://raphaeljs.com/  

---

ccchart

サンプルページ 
http://jsgt.org/c/

長所

• ライセンスがpublic domain(無料)
• サンプルが豊富
• 複合グラフを簡単に作成できる

短所

• 円グラフを作成できない(現在実装中) 

 ダウンロードページ
http://jsgt.org/c/js/ccchart.js