WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： ノムさん
カテゴリー： プログラム >JavaScript

WEBサイトでデータを視覚的に表現するなら、グラフや表があると一目で分かりやすくなりますよね。もしそれにちょっとしたアニメーションが加われば、よりスタイリッシュで魅力的な印象を与えることができます！
でも、「グラフを作るってなんだか大変そう…」「どこから手をつければいいんだろう？」と感じることも。
そんなときに頼れる、手軽にグラフを実装できる便利なライブラリをご紹介します。

Chart.js

Chart.js

初心者向けに設計された、JavaScript入門編的なライブラリです。

＜特徴＞

• コードの記述がシンプルで実装が簡単
• 折れ線グラフ、棒、円、レーダー等8種類のグラフに対応
• グラフは自動的にアニメーションする
• レスポンシブ対応
• MITライセンスで、商用・私用を問わず無償で利用可能
• オープンソースで活発に更新されている

Highcharts

Highcharts

柔軟性と使いやすさを兼ね備えたグラフ作成ライブラリです。先ほど紹介したChart.jsよりもカスタマイズ性が高いです。

＜特徴＞

• コードの記述がシンプルで実装が簡単
• 多様なグラフの実装が可能
• レスポンシブ対応
• オプションが豊富で細かい設定ができる
• 商用利用の場合、ライセンス料が必要

Google Charts

Google Charts

Googleが提供するライブラリです。

＜特徴＞

• 完全に無料で使用でき、商用利用も可能
• 様々なグラフの作成が出来る
• Google Mapと連携した図も作成可能
• Highchartsなどと比べると、高度なカスタマイズに制限あり
• JavaScriptの書き方が他のライブラリと比べて特徴的で、慣れが必要

実装例

最初に紹介したChart.jsで縦棒グラフを描画してみます。
以下サンプルになります。

See the Pen
Chart.js 縦棒グラフ by qam (@qam)
on CodePen.

手順1

HTMLファイルのheadタグ内にCDNを読み込むための記述を追加します。

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

手順2

HTML内のグラフを描画したい場所に以下記述を追加します。

<canvas id="myBarChart"></canvas>

※サンプルでは親要素のdivで余白や幅の調整をしています。

手順3

JavaScriptファイル内で、細かい設定を記述していきます。

const myChart = new Chart("myChart", {
  type: "bar",//グラフの種類を指定 (bar, line, pieなど)
  data: {},//グラフに表示するデータとラベルを指定（数値や棒の色、カテゴリの設定など）
  options: {}//グラフに表示するデータとラベルを指定（X軸、Y軸、凡例やツールチップの設定など）
});

まとめ

いかがでしたでしょうか？今回ご紹介したライブラリは、どれも魅力的で、素敵なグラフを簡単に作れる便利なツールばかりです。ぜひ、いろいろ試して自分にピッタリのものを見つけてみてください。