Amchartsとその他チャート系jsライブラリの比較

[All About Group（株式会社オールアバウト） Advent Calendar 2018](https://qiita.com/advent-calendar/2018/allabout) 10日目です（実質6日目）。
前日の[Nackの記事](https://qiita.com/NACK/items/65756819b5610d33c849)が面白いので、是非読んでみて下さい。

@Nackほど面白い記事も書けませんが、普段業務でも使用しているAmchartsというjsのチャートライブラリの紹介をします。
他のチャート系jsライブラリとの比較も少し交えながら、書き綴っていきますね。

# チャート系jsライブラリの紹介
### Amcharts
- 概要  
最新バージョンはv4（2018/12現在）ですが、v3までのバージョンであればGUIベースで簡単に多種多様なチャートが作成できます。  
各チャートの自由度も非常に高く、細かい設定が行えるのが魅力です。
- 関連リンク
  - [公式ドキュメント](https://www.amcharts.com/docs/v4/)
  - [サンプル](https://www.amcharts.com/demos/)
  - [ライセンス](https://www.amcharts.com/online-store/)
    
### Charts.js
- 概要  
jsの簡単なコードを記述するだけで、チャートが作成できます。  
主要なチャートはほとんど網羅されているので、サクッとグラフの描画がしたい方にオススメです。
- 関連リンク
    - [公式ドキュメント](https://www.chartjs.org/docs/latest/)
    - [サンプル](https://www.chartjs.org/samples/latest/)
    - [ライセンス](https://github.com/chartjs/Chart.js/blob/master/LICENSE.md)
    
### Highcharts.js
- 概要  
サンキーダイアグラムや、ボックスプロットなど非常に多くのチャートが作成できます。  
サンプルからCODEPENへのリンクが付いているので、気になるチャートのコードがすぐに確認できます。
- 関連リンク
    - [公式ドキュメント](https://www.highcharts.com/docs)
    - [サンプル](https://www.highcharts.com/demo)
    - [ライセンス](https://shop.highsoft.com/highcharts)
    
### D3.js
- 概要  
チャートの種類も多く、正直なんでも出来る無敵ライブラリです。  
欠点としては、初心者には難しいコードを書かねばならず、導入への障壁は高いです。
- 関連リンク
    - [公式ドキュメント](https://github.com/d3/d3/wiki)
    - [サンプル](https://github.com/d3/d3/wiki/Gallery)
    - [ライセンス](https://github.com/d3/d3/blob/master/LICENSE)
    
### C3.js
- 概要  
D3.jsベースのチャート作成に特化したライブラリです。  
D3よりも導入は簡単に行えるようになっています。
- 関連リンク
    - [公式ドキュメント](https://c3js.org/reference.html)
    - [サンプル](https://c3js.org/examples.html)
    - [ライセンス](https://github.com/c3js/c3/blob/master/LICENSE)
    
# Amchartsで描画できるチャート種類
https://www.amcharts.com/demos/
めっちゃ多いです、、、


   - 棒グラフ
   - ラインチャート
   - ドーナツチャート
   - エリアチャート
   - バブルチャート
   - キャンドルスティック
   - ラダーチャート
   - ツリーマップ  

上記の様々なチャートに加え、v4になりこれまで表現できなかったサンキーダイヤグラムや、ぶっちゃけどう使えば良いのか分からない様々なチャートも追加されています。
さらにそれらのチャートを自由に複数組み合わせることも可能です。

# Amchartsとその他チャート系jsライブラリの比較
|   | Amcharts | Charts.js | Highchart.js | D3.js | C3.JS |
|:-:|:--------:|:---------:|:---------:|:-----:|:-----:|
|無償|○※1|○|×|○|○|
|GUI|○|×|×|×|×|
|svg/canvas|svg|canvas|svg|svg|svg|
|導入しやすさ|◎|○|○|×|△|
|チャート種類|○|△|○|◎|◎|

※１：ロゴを表示しない場合には有償になります。
# Amcharts使ってみる
[https://live.amcharts.com/](https://live.amcharts.com/)
v3までのバージョンであれば、こちらからGUIベースでチャート作成が可能です。
画面内の**Make a Chart**から作成画面に遷移できます。
多くのメニューから選べるのが魅力ですね。
![amcharts01.png](https://qiita-image-store.s3.amazonaws.com/0/314190/b36a48dd-2167-0f32-0d50-4ae820fb4d15.png)
次に棒グラフとライングラフの複合チャートを作成してみます。
英語ベースのGUIになりますが、直感的なので、どこを変更すれば良いのかなどはすぐに習得できます。（本音は日本語化して欲しいですが、、、）
![amcharts02.png](https://qiita-image-store.s3.amazonaws.com/0/314190/629f4074-8ab7-5c8b-1c5f-77307180987d.png)
ある程度GUIで作成し、細かい部分などは直接jsのコードを編集することも可能です。
![amcharts03.png](https://qiita-image-store.s3.amazonaws.com/0/314190/381b1808-7ea8-16d4-a471-a5d5322c2922.png)
作成し終わったらそのままコードをコピーでき、 html上に貼り付ければすぐに動作の確認も行えます。
![amcharts04.png](https://qiita-image-store.s3.amazonaws.com/0/314190/6a8e8184-dd2f-57b5-50fd-52ee1af9f507.png)


# 終わり
オールアバウトでも広告の効果検証のために、様々なチャートライブラリを比較、検討しました。
現在はamchartsのv3を利用していますが、導入の理由は以下の4点です。

- 導入が容易（エンジニアじゃなくてもグラフが作れる）
- チャートの種類が豊富（ローソクチャートが作れるライブラリって結構少ないです。。）
- 単純に綺麗
- 細かい調整も楽チン（レジェンドやバルーン、細かい色や線の太さの調整も可能です）

今後v4もGUIで作成できるようになるのを祈りつつ、より良いUIUXを実現できるライブラリを探し求めています。
オススメのものなどあればぜひコメントお願いします。