Chart.jsを使って、棒グラフ、折れ線グラフ、レーダーチャート、円グラフを表示しよう!(サンプル・解説付き)

Chart.jsを使って、棒グラフ、折れ線グラフ、円グラフを表示してみよう!(サンプルあり)

Chart.jsはWebサイトにグラフを表示することができる、便利なライブラリです。

グラフ表示用のライブラリは色々とありますが、Chart.jsは軽量で、高機能、安定していて、グラフのデザインも綺麗なのでおすすめです。もちろん、レスポンシブ対応です。

有名サイトや、アプリでもグラフ表示に使われているのを目にします。

使い方はシンプルで簡単です。グラフの色や軸のメモリ設定も自由に変更できます。

今回はChart.jsを使って、棒グラフ、折れ線グラフ、レーダーチャート、円グラフ(パイ型)、円グラフ(ドーナッツ型)を表示する方法を紹介します。

まずはこちらのサンプルをご覧ください。

棒グラフ

棒グラフのサンプル

棒グラフ2

棒グラフ2のサンプル

折れ線グラフ

折れ線グラフのサンプル

折れ線グラフ2

折れ線グラフ2のサンプル

レーダーチャート

レーダーチャートのサンプル

円グラフ(パイ型)

円グラフ(パイ型)のサンプル

円グラフ(ドーナッツ型)

円グラフ(ドーナッツ型)のサンプル

実装方法

サンプルのグラフを実装する方法を紹介します。

今回使用するのは、Chart.jsの最新版、Version 2.0です。旧バージョンとは少し仕様が変わっているので注意してください。

ダウンロード

Chart.jsをダウンロードします。

右側の「Clone or download」から「Donwload ZIP」を選びます。

chart.jsのダウンロード

ファイルを解凍したら、「dist」フォルダに入っている「Chart.js」を使用します。今回使うのは、このファイルだけです。

JS

Chart.jsを読み込みます。

<script src="js/Chart.js"></script>

HTML(基本形)

<canvas>を用意します。基本となるHTMLはこれだけです。

<canvas id="myChart" width="800" height="400"></canvas>

グラフを描く(基本形)

</body>閉じタグの直前などで、スクリプトを実行してグラフを描きます。以下のコードが基本形になります(これをコピペしても動きません)。

<script>
var ctx = document.getElementById("myChart");
var myChart= new Chart(ctx, {
  type: type,
  data: data,
  options: options
});
</script>

typeにはグラフのタイプ、dataにはグラフのデータ、optionsには各種オプションを設定します。

それでは、この基本形をベースにして、棒グラフ、折れ線グラフ、レーダーチャート、円グラフ(パイ型)、円グラフ(ドーナッツ型)を描いていきます。

棒グラフ

基本的な棒グラフの作り方です。

棒グラフのサンプル

HTML

<canvas>を用意します。

<canvas id="myBarChart" width="800" height="400"></canvas>

JS

棒グラフを描きます。

//棒グラフ
var ctx = document.getElementById("myBarChart");
var myBarChart = new Chart(ctx, {
  //グラフの種類
  type: 'bar',
  //データの設定
  data: {
      //データ項目のラベル
      labels: ["1月", "2月", "3月", "4月", "5月", "6月"],
      //データセット
      datasets: [{
          //凡例
          label: "契約数",
          //背景色
          backgroundColor: "rgba(75,192,192,0.4)",
          //枠線の色
          borderColor: "rgba(75,192,192,1)",
          //グラフのデータ
          data: [12, 19, 3, 5, 2, 3]
      }]
  },
  //オプションの設定
  options: {
      //軸の設定
      scales: {
          //縦軸の設定
          yAxes: [{
         //目盛りの設定
              ticks: {
                  //開始値を0にする
                  beginAtZero:true,
              }
          }]
      }
  }
});

解説

棒グラフを指定します。

  • type: グラフの種類。棒グラフは「bar」

データセットは1セット、背景色などを指定します。

  • data
    • labels データ項目のラベル
    • datasets データセット
    • datasets > label 凡例
    • datasets > backgroundColor 背景色
    • datasets > borderColor 枠線の色
    • datasets > data グラフのデータ

Y軸の開始値を0にしました。

  • options
    • scales 軸の設定
    • scales > yAxes 縦軸の設定
    • scales > yAxes > ticks 目盛りの設定
    • scales > yAxes > ticks > beginAtZero 開始値を0にする

棒グラフ2

データセットが2つの棒グラフを作ります。

棒グラフ2のサンプル

HTML

<canvas>を用意します。

<canvas id="myBar2Chart" width="800" height="400"></canvas>

JS

棒グラフを描きます。

//棒グラフ2
var ctx = document.getElementById("myBar2Chart");
var myBar2Chart = new Chart(ctx, {
  //グラフの種類
  type: 'bar',
  //データの設定
  data: {
      //データ項目のラベル
      labels: ["1月", "2月", "3月", "4月", "5月", "6月"],
      //データセット
      datasets: [
          {
              //凡例
              label: "1年目",
              //背景色
              backgroundColor: "rgba(179,181,198,0.2)",
              //枠線の色
              borderColor: "rgba(179,181,198,1)",
              //枠線の太さ
              borderWidth: 1,
              //背景色(ホバーしたときに)
              hoverBackgroundColor: "rgba(179,181,198,0.4)",
              //枠線の色(ホバーしたときに)
              hoverBorderColor: "rgba(179,181,198,1)",
              //グラフのデータ
              data: [12, 19, 3, 5, 2, 3]
          },
          {
              //凡例
              label: "2年目",
              //背景色
              backgroundColor: "rgba(255,99,132,0.2)",
              //枠線の色
              borderColor: "rgba(255,99,132,1)",
              //枠線の太さ
              borderWidth: 1,
              //背景色(ホバーしたときに)
              hoverBackgroundColor: "rgba(255,99,132,0.4)",
              //枠線の色(ホバーしたときに)
              hoverBorderColor: "rgba(255,99,132,1)",
              //グラフのデータ
              data: [15, 15, 6, 8, 5, 6]
          }
      ]
  },
  //オプションの設定
  options: {
      //軸の設定
      scales: {
          //縦軸の設定
          yAxes: [{
              //目盛りの設定
              ticks: {
                  //開始値を0にする
                  beginAtZero:true,
              }
          }]
      },
      //ホバーの設定
      hover: {
          //ホバー時の動作(single, label, dataset)
          mode: 'single'
      }
  }
});

解説

棒グラフを指定します。

  • type: グラフの種類。棒グラフは「bar」

データセットは2セット、背景色や、マウスホバーしたときのスタイルなどを指定します。

  • data
    • labels データ項目のラベル
    • datasets データセット
    • datasets > label 凡例
    • datasets > backgroundColor 背景色
    • datasets > borderColor 枠線の色
    • datasets > borderWidth 枠線の太さ
    • datasets > hoverBackgroundColor 背景色(ホバーしたときに)
    • datasets > hoverBorderColor 枠線の色(ホバーしたときに)
    • datasets > data グラフのデータ

Y軸の開始値を0にしました。また、棒グラフにマウスホバーした際の動作を「single」にして、それぞれの棒グラフごとにホバー表示するようにしました。

  • options
    • scales 軸の設定
    • scales > yAxes 縦軸の設定
    • scales > yAxes > ticks 目盛りの設定
    • scales > yAxes > ticks > beginAtZero 開始値を0にする
    • hover ホバーの設定
    • hover > mode ホバー時の動作(single, label, datasetから選択)

折れ線グラフ

折れ線グラフを作ります。

折れ線グラフのサンプル

HTML

<canvas>を用意します。

<canvas id="myLineChart" width="800" height="400"></canvas>

JS

折れ線グラフを描きます。

//折れ線グラフ
var ctx = document.getElementById("myLineChart");
var myLineChart = new Chart(ctx, {
  //グラフの種類
  type: 'line',
  //データの設定
  data: {
      //データ項目のラベル
      labels: ["1月", "2月", "3月", "4月", "5月", "6月"],
      //データセット
      datasets: [{
          //凡例
          label: "契約数",
          //背景色
          backgroundColor: "rgba(75,192,192,0.4)",
          //枠線の色
          borderColor: "rgba(75,192,192,1)",
          //グラフのデータ
          data: [12, 19, 3, 5, 2, 3]
      }]
  },
  //オプションの設定
  options: {
      scales: {
          //縦軸の設定
          yAxes: [{
              ticks: {
                  //最小値を0にする
                  beginAtZero: true
              }
          }]
      }
  }
});

解説

折れ線グラフを指定します。

  • type: グラフの種類。折れ線グラフは「line」

データセットは1セット、背景色などを指定します。

  • data
    • labels データ項目のラベル
    • datasets データセット
    • datasets > label 凡例
    • datasets > backgroundColor 背景色
    • datasets > borderColor 枠線の色
    • datasets > data グラフのデータ

Y軸の開始値を0にしました。

  • options
    • scales 軸の設定
    • scales > yAxes 縦軸の設定
    • scales > yAxes > ticks 目盛りの設定
    • scales > yAxes > ticks > beginAtZero 開始値を0にする

折れ線グラフ2

データセットが2つの折れ線グラフを作ります。

折れ線グラフ2のサンプル

HTML

<canvas>を用意します。

<canvas id="myLine2Chart" width="800" height="400"></canvas>

JS

折れ線グラフを描きます。

//折れ線グラフ2
var ctx = document.getElementById("myLine2Chart");
var myLine2Chart = new Chart(ctx, {
  //グラフの種類
  type: 'line',
  //データの設定
  data: {
      //データ項目のラベル
      labels: ["1月", "2月", "3月", "4月", "5月", "6月"],
      //データセット
      datasets: [
          {
              //凡例
              label: "1年目",
              //面の表示
              fill: false,
              //線のカーブ
              lineTension: 0,
              //背景色
              backgroundColor: "rgba(179,181,198,0.2)",
              //枠線の色
              borderColor: "rgba(179,181,198,1)",
              //結合点の枠線の色
              pointBorderColor: "rgba(179,181,198,1)",
              //結合点の背景色
              pointBackgroundColor: "#fff",
              //結合点のサイズ
              pointRadius: 5,
              //結合点のサイズ(ホバーしたとき)
              pointHoverRadius: 8,
              //結合点の背景色(ホバーしたとき)
              pointHoverBackgroundColor: "rgba(179,181,198,1)",
              //結合点の枠線の色(ホバーしたとき)
              pointHoverBorderColor: "rgba(220,220,220,1)",
              //結合点より外でマウスホバーを認識する範囲(ピクセル単位)
              pointHitRadius: 15,
              //グラフのデータ
              data: [12, 19, 3, 5, 2, 3]
          },
          {
              //凡例
              label: "2年目",
              //面の表示
              fill: false,
              //線のカーブ
              lineTension: 0,
              //背景色
              backgroundColor: "rgba(75,192,192,0.4)",
              //枠線の色
              borderColor: "rgba(75,192,192,1)",
              //結合点の枠線の色
              pointBorderColor: "rgba(75,192,192,1)",
              //結合点の背景色
              pointBackgroundColor: "#fff",
              //結合点のサイズ
              pointRadius: 5,
              //結合点のサイズ(ホバーしたとき)
              pointHoverRadius: 8,
              //結合点の背景色(ホバーしたとき)
              pointHoverBackgroundColor: "rgba(75,192,192,1)",
              //結合点の枠線の色(ホバーしたとき)
              pointHoverBorderColor: "rgba(220,220,220,1)",
              //結合点より外でマウスホバーを認識する範囲(ピクセル単位)
              pointHitRadius: 10,
              //グラフのデータ
              data: [15, 15, 6, 8, 5, 6]
          }
      ]
  },
  //オプションの設定
  options: {
      //軸の設定
      scales: {
          //縦軸の設定
          yAxes: [{
              //目盛りの設定
              ticks: {
                  //最小値を0にする
                  beginAtZero: true
              }
          }]
      },
      //ホバーの設定
      hover: {
          //ホバー時の動作(single, label, dataset)
          mode: 'single'
      }
  }
});

解説

折れ線グラフを指定します。

  • type: グラフの種類。折れ線グラフは「line」

データセットは2セットです。折れ線グラフの面は表示せず、線のみの表示にしました。また、線のカーブを無くし、曲線ではなく、真っ直ぐな直線にしました。その他に、背景色や、結合点にマウスホバーしたときのスタイルなどを指定します。結合点にマウスホバーした際にツールチップが表示されますが、「pointHitRadius」を指定しておくと、マウスホバーを認識する範囲が結合点の周りまで広がり、ユーザビリティーが向上します。

  • data
    • labels データ項目のラベル
    • datasets データセット
    • datasets > label 凡例
    • datasets > fill 面の表示
    • datasets > lineTension 線のカーブ
    • datasets > backgroundColor 背景色
    • datasets > borderColor 枠線の色
    • datasets > pointBorderColor 結合点の枠線の色
    • datasets > pointBackgroundColor 結合点の背景色
    • datasets > pointRadius 結合点のサイズ
    • datasets > pointHoverRadius 結合点のサイズ(ホバーしたとき)
    • datasets > pointHoverBackgroundColor 結合点の背景色(ホバーしたとき)
    • datasets > pointHoverBorderColor 結合点の枠線の色(ホバーしたとき)
    • datasets > pointHitRadius 結合点より外でマウスホバーを認識する範囲(ピクセル単位)
    • datasets > data グラフのデータ

Y軸の開始値を0にしました。また、結合点にマウスホバーした際の動作を「single」にして、それぞれの結合点ごとにホバー表示するようにしました。

  • options
    • scales 軸の設定
    • scales > yAxes 縦軸の設定
    • scales > yAxes > ticks 目盛りの設定
    • scales > yAxes > ticks > beginAtZero 開始値を0にする
    • hover ホバーの設定
    • mode > hover ホバー時の動作(single, label, datasetから選択)

レーダーチャート

データセットが2つのレーダーチャートを作ります。

レーダーチャートのサンプル

HTML

<canvas>を用意します。

<canvas id="myRadarChart" width="600" height="600"></canvas>

JS

レーダーチャートを描きます。

//レーダーチャート
var ctx = document.getElementById("myRadarChart");
var myRadarChart = new Chart(ctx, {
  //グラフの種類
  type: 'radar',
  //データの設定
  data: {
      //データ項目のラベル
      labels: ["デザイン", "オリジナリティ", "コンテンツ", "アクセサビリティ", "写真", "文章力", "ブランド"],
      //データセット
      datasets: [
          {
              //凡例
              label: "A社",
              //背景色
              backgroundColor: "rgba(179,181,198,0.2)",
              //枠線の色
              borderColor: "rgba(179,181,198,1)",
              //結合点の背景色
              pointBackgroundColor: "rgba(179,181,198,1)",
              //結合点の枠線の色
              pointBorderColor: "#fff",
              //結合点の背景色(ホバーしたとき)
              pointHoverBackgroundColor: "#fff",
              //結合点の枠線の色(ホバーしたとき)
              pointHoverBorderColor: "rgba(179,181,198,1)",
              //結合点より外でマウスホバーを認識する範囲(ピクセル単位)
              hitRadius: 5,
              //グラフのデータ
              data: [65, 59, 90, 81, 56, 55, 40]
          },
          {
              //凡例
              label: "B社",
              //背景色
              backgroundColor: "rgba(255,99,132,0.2)",
              //枠線の色
              borderColor: "rgba(255,99,132,1)",
              //結合点の背景色
              pointBackgroundColor: "rgba(255,99,132,1)",
              //結合点の枠線の色
              pointBorderColor: "#fff",
              //結合点の背景色(ホバーしたとき)
              pointHoverBackgroundColor: "#fff",
              //結合点の枠線の色(ホバーしたとき)
              pointHoverBorderColor: "rgba(255,99,132,1)",
              //結合点より外でマウスホバーを認識する範囲(ピクセル単位)
              hitRadius: 5,
              //グラフのデータ
              data: [28, 48, 40, 19, 96, 27, 100]
          }
      ]
  }
});

解説

レーダーチャートを指定します。

  • type: グラフの種類。レーダーチャートは「radar」

データセットは2セットです。背景色や、結合点にマウスホバーしたときのスタイルなどを指定します。結合点にマウスホバーした際にツールチップが表示されますが、「pointHitRadius」を指定しておくと、マウスホバーを認識する範囲が結合点の周りまで広がり、ユーザビリティーが向上します。

  • data
    • labels データ項目のラベル
    • datasets データセット
    • datasets > label 凡例
    • datasets > backgroundColor 背景色
    • datasets > borderColor 枠線の色
    • datasets > pointBorderColor 結合点の枠線の色
    • datasets > pointBackgroundColor 結合点の背景色
    • datasets > pointHoverBackgroundColor 結合点の背景色(ホバーしたとき)
    • datasets > pointHoverBorderColor 結合点の枠線の色(ホバーしたとき)
    • datasets > pointHitRadius 結合点より外でマウスホバーを認識する範囲(ピクセル単位)
    • datasets > data グラフのデータ

円グラフ(パイ型)

パイ型の円グラフを作ります。

円グラフ(パイ型)のサンプル

HTML

<canvas>を用意します。

<canvas id="myPieChart" width="400" height="400"></canvas>

JS

パイ型の円グラフを描きます。

//円グラフ(パイ型)
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
  //グラフの種類
  type: 'pie',
  //データの設定
  data: {
      //データ項目のラベル
      labels: ["Red", "Green", "Yellow"],
      //データセット
      datasets: [{
          //背景色
          backgroundColor: [
              "#FF6384",
              "#36A2EB",
              "#FFCE56"
          ],
          //背景色(ホバーしたとき)
          hoverBackgroundColor: [
              "#FF6384",
              "#36A2EB",
              "#FFCE56"
          ],
          //グラフのデータ
          data: [300, 50, 100]
      }]
  }
});

解説

パイ型の円グラフを指定します。

  • type: グラフの種類。パイ型の円グラフは「pie」

データセットは1セットです。背景色や、マウスホバーしたときの背景色を指定します。

  • data
    • labels データ項目のラベル
    • datasets データセット
    • datasets > backgroundColor 背景色
    • datasets > hoverBackgroundColor 背景色(ホバーしたとき)
    • datasets > data グラフのデータ

円グラフ(ドーナッツ型)

ドーナッツ型の円グラフを作ります。

円グラフ(ドーナッツ型)のサンプル

HTML

<canvas>を用意します。

<canvas id="myDoughnutChart" width="400" height="400"></canvas>

JS

ドーナッツ型の円グラフを描きます。

//円グラフ(ドーナッツ型)
var ctx = document.getElementById("myDoughnutChart");
var myDoughnutChart = new Chart(ctx, {
  //グラフの種類
  type: 'doughnut',
  //データの設定
  data: {
      //データ項目のラベル
      labels: ["Red", "Green", "Yellow"],
      //データセット
      datasets: [{
          //背景色
          backgroundColor: [
              "#FF6384",
              "#36A2EB",
              "#FFCE56"
          ],
          //背景色(ホバーしたとき)
          hoverBackgroundColor: [
              "#FF6384",
              "#36A2EB",
              "#FFCE56"
          ],
          //グラフのデータ
          data: [300, 50, 100]
      }]
  },options: {
      //アニメーションの設定
      animation: {
          //アニメーションの有無
          animateRotate: false
      }
  }
});

解説

ドーナッツ型の円グラフを指定します。

  • type: グラフの種類。ドーナッツ型の円グラフは「doughnut」

データセットは1セットです。背景色や、マウスホバーしたときの背景色を指定します。

  • data
    • labels データ項目のラベル
    • datasets データセット
    • datasets > backgroundColor 背景色
    • datasets > hoverBackgroundColor 背景色(ホバーしたとき)
    • datasets > data グラフのデータ

グラフを表示する際の描画アニメーションを無しにしました。

  • options
    • animation アニメーションの設定
    • animation > animateRotate アニメーションの有無

以上、棒グラフ、折れ線グラフ、レーダーチャート、円グラフ(パイ型)、円グラフ(ドーナッツ型)の作り方でした。

他にも、様々なオプションを指定することができます。より詳しいオプションについては、公式サイトのドキュメントをご覧ください。

人気の記事

2017年、人気の無料WordPressテーマ100選
2017年、人気の無料WordPressテーマ100選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選

フリーランスITエンジニアの案件・求人情報サイト

フリーランスWebクリエイター大募集!「ギークスジョブ」

2 Comments

コメント

  • Posted on
  • Updated on
  • Views 27,131