Because We Love Happy Coding

フリーライターからエンジニアへ。発信力だけあり余ってる感じ

JavaScriptまたはVue.jsでグラフを描くためのライブラリを探した

自分用に作っているwebアプリで構成比率の円グラフ(Pie chart)を作りたいので、ライブラリについて調べて見た。

Requirements

記事

JavaScriptでグラフ描画入門!全8個のライブラリをコード付きで一挙に解説! - paiza開発日誌

  • Chart.js
  • canvasJS
  • Google Charts
  • plotly.js
  • Chartist
  • C3.js

など。幅広くライブラリを紹介している。私の用途に合いそうなのは上記6つ。

【2018年】チャート/グラフ作成用JavaScriptライブラリを比較!おすすめ5選【無料】 - まろりかモンスター

項目は上の記事と被っているけれど、ライセンスや機能の比較表がついてて見やすい。

vue-c3 でグラフをぐいぐい描く - Qiita

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

Charts  |  Google Developers

種類はたくさんありそう。

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

jqPlot - jQuery プラグイン

jQueryプラグイン。今回はVue使う予定なので外れちゃうけど、jQuery使うなら検討してもいいかも。

まとめ

JavaScriptでグラフを描くなんてめんどくさそうだなぁ、と思っていたけれど、サンプルコードを見た限り、どれもあっさりしていて簡単そう。生きる勇気が湧いてくる。

あまり複雑なことをするつもりもないのでどれを選ぶか迷うけれど、長いものには巻かれる方式でChart.jsかkaGoogleかなぁ。Vue.jsに使えるChart.jsのラッパーを試して見るのかな。

Chartistの(サイトの)ビジュアルとかも気になるけど。

参考記事

JavaScriptでグラフ描画入門!全8個のライブラリをコード付きで一挙に解説! - paiza開発日誌

【2018年】チャート/グラフ作成用JavaScriptライブラリを比較!おすすめ5選【無料】 - まろりかモンスター

vue-c3 でグラフをぐいぐい描く - Qiita

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

Charts  |  Google Developers

plotly.js | JavaScript Graphing Library

Chartist - Simple responsive charts

C3.js | D3-based reusable chart library

Beautiful HTML5 JavaScript Charts | CanvasJS

Interactive JavaScript charts for your webpage | Highcharts

jqPlot - jQuery プラグイン