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を読み込みます。

HTML(基本形)

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

グラフを描く(基本形)

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

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

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

棒グラフ

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

棒グラフのサンプル

HTML

<canvas>を用意します。

JS

棒グラフを描きます。

解説

棒グラフを指定します。

  • 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>を用意します。

JS

棒グラフを描きます。

解説

棒グラフを指定します。

  • 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>を用意します。

JS

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

解説

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

  • 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>を用意します。

JS

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

解説

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

  • 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>を用意します。

JS

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

解説

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

  • 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>を用意します。

JS

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

解説

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

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

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

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

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

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

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

HTML

<canvas>を用意します。

JS

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

解説

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

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

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

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

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

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

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

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

スポンサーリンク
Chart.js – 棒グラフ、折れ線グラフ、レーダーチャート、円グラフを表示しよう!

人気の記事

2 Comments

コメントを投稿する

  • Posted on 2016.05.27
  • Views 21,565