chart.jsは公式のページで詳しく使い方が書いてあるし、紹介している記事も大変多い。
ただ、さくっと使うには目を通す量が多すぎるのと、古いバージョンでの紹介記事が混在しているため、備忘録としてメモ。
chart.jsを使うための最低限の設定
ただグラフが書ければいい程度であればこの章のみでできる。
chart.jsの読み込み
下記リンクからバージョンを選んでクリックし、copy script tagを選択し、自分のHTMLのhead内にコピペ
（現時点での最新バージョンは2.7.1）
https://cdnjs.com/libraries/Chart.js
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
</head>
<body>
</body>
</html>上記はCDNを利用し簡単に設定する方法。GITからダウンロードもできる。
https://github.com/chartjs/Chart.js
かなりバージョンが豊富なため、後述するプロパティの設定がうまくいかない場合はまずバージョンの確認をオススメ。
canvas要素の記述
HTMLのbodyの中で、任意の場所にcanvas要素を記述し、IDをふる。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
</head>
<body>
<canvas id="chart"></canvas>
</body>
</html>JavaScriptの記述
/body直前などに以下のjsをコピペする。
このとき、canvas要素に当てたID名と、jsのgetElementBy~の後の名称を合わせる。
以下は公式のサンプルをより簡易的にしたもの。
<script>
var ctx = document.getElementById("chart").getContext(‘2d’);
var myChart = new Chart(ctx, {
type: ‘bar’,
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: ‘# of Votes’,
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]},
});
</script>グラフの完成
以上の簡単な記述ををするだけで、このようなチャートの作成ができる。
chart.jsで使えるグラフの種類
chart.jsでグラフの種類を指定するときは、以下のように「type:」に表示したいグラフの種類を指定する。
ライン
var myLineChart = new Chart(ctx, {
type: ‘line’,
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: ‘# of Votes’,
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]},
});
バー
var myLineChart = new Chart(ctx, {
type: ‘bar’,
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: ‘# of Votes’,
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]},
});
レーダー
var myLineChart = new Chart(ctx, {
type: ‘rader’,
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: ‘# of Votes’,
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]},
});
極域
var myLineChart = new Chart(ctx, {
type: ‘polarArea’,
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: ‘# of Votes’,
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]},
});
パイ
var myLineChart = new Chart(ctx, {
type: ‘pie’,
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: ‘# of Votes’,
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]},
});
ドーナツ
var myLineChart = new Chart(ctx, {
type: ‘doughnut’,
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: ‘# of Votes’,
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]},
});
オプションの設定
chart.jsでは細かくオプションの指定ができるが、公式のドキュメントは少しだけわかりにくいのでいくつか例を紹介。
アニメーションの設定
options: {
animation: {
// アニメーションにかかる秒数(ミリ秒)
duration: 2000,
// アニメーションの種類
easing: ‘easeOutBounce’,
}
}easing:で指定できるアニメーションの種類は以下のパターン。
‘linear’
‘easeInQuad’
‘easeOutQuad’
‘easeInOutQuad’
‘easeInCubic’
‘easeOutCubic’
‘easeInOutCubic’
‘easeInQuart’
‘easeOutQuart’
‘easeInOutQuart’
‘easeInQuint’
‘easeOutQuint’
‘easeInOutQuint’
‘easeInSine’
‘easeOutSine’
‘easeInOutSine’
‘easeInExpo’
‘easeOutExpo’
‘easeInOutExpo’
‘easeInCirc’
‘easeOutCirc’
‘easeInOutCirc’
‘easeInElastic’
‘easeOutElastic’
‘easeInOutElastic’
‘easeInBack’
‘easeOutBack’
‘easeInOutBack’
‘easeInBounce’
‘easeOutBounce’
‘easeInOutBounce’
凡例の表示・非表示
options: {
legend: {
// true or faise で切り替え
display: false,
}グラフにタイトルを表示させる
デフォルトはfalseになっている
options: {
title: {
display: true,
text: ‘Custom Chart Title’
}
}レーダーチャートでの最小値・最大値の指定
options: {
scale: {
ticks: {
beginAtZero: true,
max: 5,
min: 0
}
}
}
