自分用に作っているwebアプリで構成比率の円グラフ（Pie chart）を作りたいので、ライブラリについて調べて見た。
Requirements
- JavaScript
- Vue.js
記事
JavaScriptでグラフ描画入門！全８個のライブラリをコード付きで一挙に解説！ - paiza開発日誌
- Chart.js
- canvasJS
- Google Charts
- plotly.js
- Chartist
- C3.js
など。幅広くライブラリを紹介している。私の用途に合いそうなのは上記6つ。
【2018年】チャート/グラフ作成用JavaScriptライブラリを比較！おすすめ5選【無料】 - まろりかモンスター
項目は上の記事と被っているけれど、ライセンスや機能の比較表がついてて見やすい。
vue-c3という、C3をvueのコンポーネントに組み込めるライブラリらしい。
Vue.jsでカッコいいグラフを手軽に作るChart.jsのラッパー3つ - WPJ
「vue-charts」「vue-chartjs」「vue-chartkick」の3つのChart.jsラッパーについて。
【Vue.js】Vue.jsでChart.jsを使う - The sky is the limit
Vue.jsを使ったPie chartの実例。
ライブラリ
Chart.js
Chart.js | Open source HTML5 Charts for your website
8種類のchart typeが使えるみたい。サンプルがほんとに簡単そうに見える。
Google Charts
種類はたくさんありそう。
plotly.js
plotly.js | JavaScript Graphing Library
Chartist
Chartist - Simple responsive charts
サイトのビジュアルが可愛い。
C3.js
C3.js | D3-based reusable chart library
サンプルのPie chartが、マウスオーバーした時にハイライトしててかっこいい。
canvasJS
Beautiful HTML5 JavaScript Charts | CanvasJS
30種類のchart type。有償っぽい。
Highcharts
Interactive JavaScript charts for your webpage | Highcharts
canvasJSと雰囲気似てる。商用有償らしい。
別件だがGantt chartのライブラリがあって興味をそそられた。
jqPlot
jQueryのプラグイン。今回はVue使う予定なので外れちゃうけど、jQuery使うなら検討してもいいかも。
まとめ
JavaScriptでグラフを描くなんてめんどくさそうだなぁ、と思っていたけれど、サンプルコードを見た限り、どれもあっさりしていて簡単そう。生きる勇気が湧いてくる。
あまり複雑なことをするつもりもないのでどれを選ぶか迷うけれど、長いものには巻かれる方式でChart.jsかkaGoogleかなぁ。Vue.jsに使えるChart.jsのラッパーを試して見るのかな。
Chartistの（サイトの）ビジュアルとかも気になるけど。
参考記事
JavaScriptでグラフ描画入門！全８個のライブラリをコード付きで一挙に解説！ - paiza開発日誌
【2018年】チャート/グラフ作成用JavaScriptライブラリを比較！おすすめ5選【無料】 - まろりかモンスター
Vue.jsでカッコいいグラフを手軽に作るChart.jsのラッパー3つ - WPJ
【Vue.js】Vue.jsでChart.jsを使う - The sky is the limit
ライブラリ
Chart.js | Open source HTML5 Charts for your website
plotly.js | JavaScript Graphing Library
Chartist - Simple responsive charts
C3.js | D3-based reusable chart library
Beautiful HTML5 JavaScript Charts | CanvasJS
