Chart.jsで複数軸対応のグラフを描画してみる

posted in: JavaScript | 0

こんにちは、大川です。
データをグラフ化する機会があったのですが、複数軸対応のグラフ描画で悩まされたので、
備忘も兼ねて共有です。

縦軸が左右にある2軸のグラフを作成したい!

今回使用したのはJavascriptの描画用ライブラリ「Chart.js」
混合グラフはVer.2.0からの新機能のため、使用の際はバージョンに注意です。

Chart.jsとは?

  • 折れ線グラフ(line)
  • 棒グラフ(bar)
  • レーダーチャート(radar)
  • 円グラフ(pie/doughnut)
  • 鶏頭図(polarArea)
  • バブルチャート(bubble)
  • 散布図(scatter)
  • エリアチャート

これら8種類のグラフと、その複合グラフの描画が可能です。
表示したいデータとオプションを渡すだけで描画してくれるので、非常にシンプルで簡単です。

基本的な書き方

  1. canvasを用意
  2. chart.jsを取り込む
  3. グラフの種類(type)を設定
  4. データ(data)をセットする
  5. オプション(options)を設定する

実際に描画してみる

早速簡単な棒グラフ×折れ線グラフを描いてみます。

上記の通り、色、形、サイズ、なども自由に設定できます。
アニメーション効果、ツールチップもついており、オシャレです。
chartjs_multi_axis_graph

複数軸対応のグラフを書きたい!
複数のグラフを簡単に組み合わせて書きたい!!
シンプルで簡単なオシャレなグラフを作成したい!!!

そんなときにオススメの描画ツールの紹介でした

LINEで送る
Pocket