Javascriptでグラフを表現する方法【Chart.jsを利用】

画面で折れ線グラフや棒グラフを表現するのは一見難しそうですが、実はChart.jsというライブラリを利用することで簡単に実装できます。 円グラフやレダーチャートといった表現も可能で便利なため、特に作りたいグラフが無い方も、エクセルなどで管理している資料をJavascriptで実装してみてください！ 注意：本投稿を作成した時点で最新であったver2.7.1を用いています。

Chart.jsの仕様

Chart.jsを利用したグラフ描画は、Chartクラスに適切な引数を渡してコンストラクタを呼び出すだけです。 よって、どういった引数を作成して渡してあげないといけないのか？という点がポイントとなります。

Chartクラスのコンストラクタの引数

引数と概要を以下にまとめます。

• type：グラフの種類を指定します。
  • line：折れ線グラフ
  • bar/horizontalBar：棒グラフ
  • radar：レダーチャート
  • doughnut/pie：円グラフ
  • polarArea：極座標グラフ
  • bubble：バブルチャート
  • scatter：散布図
• data：グラフ描画に必要な情報を指定します。（グラフ作成のためのデータや、グラフの色など）。ここで指定する属性は、指定したtypeによって異なるため、後述します。
• options：スタイル情報などを指定します。こちらも、typeによって異なります。

実装してみる

今回は、以下のようなフォルダ・ファイルをローカル環境に作成して実施してみます。

sample/
└ index.html

こちらの、index.htmlをテキストエディタなどで編集し、ブラウザで表示して確認してください。

折れ線グラフ(type=line)の実装

まずは折れ線グラフからです。

HTMLタグの定義

bodyタグ内で、グラフを表示したい箇所に以下の実装を行います。

HTMLの記述はこの1行のみでOKです。 canvasタグのwidth属性には横幅をpx単位で、heightには高さを同じくpx単位で記述します。

Javascript関数の定義

Javascriptの記述を行います。 まずは、ライブラリの読み込み。

次に、実際にグラフにプロットする値を設定したり、グラフのタイプを設定したりする処理を実装します。 以下は、解説のためコメントを記載していますが、うまく動かなければコメント部分を削除して試してみてください。

画面確認

実際に記述してみると、こんな感じになります。 プロットする値は変えず、fillをtrue、lineTensionを0.5にすると、こんな感じです。

棒グラフの実装

続いて棒グラフです。 HTMLの記述については相違ないため割愛します。 javascriptの記述は以下の通りです。 今回は例として1つ目は横向きの棒グラフ（typeが"horizontalBar"）を表示しています。 typeを"bar"にすれば、縦向きの棒グラフを作成可能です。

実際にグラフを表示するとこんな感じです。

円グラフの実装

円グラフも棒グラフと同様に、Chartクラスを生成する処理を紹介します。

実際に表示してみるとこんな感じ。

レダーチャートの実装

レダーチャートはこんな感じ。

グラフはこんな感じになります。

参考文献

1. Chart.jsのレファレンス