Chart.jsはWebサイトにグラフを表示することができる、便利なライブラリです。
グラフ表示用のライブラリは色々とありますが、Chart.jsは軽量で、高機能、安定していて、グラフのデザインも綺麗なのでおすすめです。もちろん、レスポンシブ対応です。
有名サイトや、アプリでもグラフ表示に使われているのを目にします。
使い方はシンプルで簡単です。グラフの色や軸のメモリ設定も自由に変更できます。
今回はChart.jsを使って、棒グラフ、折れ線グラフ、レーダーチャート、円グラフ（パイ型）、円グラフ（ドーナッツ型）を表示する方法を紹介します。
まずはこちらのサンプルをご覧ください。
棒グラフ
棒グラフ2
折れ線グラフ
折れ線グラフ2
レーダーチャート
円グラフ（パイ型）
円グラフ（ドーナッツ型）
実装方法
サンプルのグラフを実装する方法を紹介します。
今回使用するのは、Chart.jsの最新版、Version 2.0です。旧バージョンとは少し仕様が変わっているので注意してください。
ダウンロード
Chart.jsをダウンロードします。
右側の「Clone or download」から「Donwload ZIP」を選びます。
ファイルを解凍したら、「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つの棒グラフを作ります。
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つの折れ線グラフを作ります。
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 アニメーションの有無
以上、棒グラフ、折れ線グラフ、レーダーチャート、円グラフ（パイ型）、円グラフ（ドーナッツ型）の作り方でした。
他にも、様々なオプションを指定することができます。より詳しいオプションについては、公式サイトのドキュメントをご覧ください。