コピペで！「Chart.js」を使って折れ線グラフを表示する
軽量で簡単に実装できる「Chart.js」を使った折れ線グラフの表示方法についてです。
「Chart.js」では、棒グラフや円グラフ、折れ線グラフ、レイダーチャートなど多彩なグラフを好きな色に設定して表示する事が出来ます。
それらを組み合わせた混合チャートも可能です。
様々なグラフのサンプルは公式サイトで見る事が出来ます。
Chart.js（公式サイト）
Chart.js ドキュメント
チャートの設定方法
- type：描画するグラフの種類
- data：ラベルとデータセット
- options：オプション設定
グラフの種類は「type」で指定します。
それぞれの詳細な使い方記事は、以下の表内リンクから。
| 表示サンプル | type | グラフの種類 |
|---|---|---|
 |
radar | レーダーチャート |
|
line | 折れ線グラフ |
 |
bar | 棒グラフ |
 |
pie | 円グラフ |
 |
polarArea | ポーラーチャート |
 |
doughnut | ドーナツ |
 |
scatter | 散布図 |
 |
bubble | バブルチャート |
棒＋折れ線の複合チャート の 詳細はこちら
https://sec.ayaito.net/web/16587/
折れ線グラフ
今回は、折れ線グラフ type: 'line’ の実装方法です。
コピペで使って頂けるようにコードを紹介します。
手順
- Chart.jsを読み込むコードを記述（１行のみ<head>または<body>内に）
- JavaScriptを記述（データやデザイン設定）
- HTMLを記述（１行のみのグラフ表示用タグ）
これだけです！
では順番に・・
Chart.jsを読み込む
サイト内の色々なページでグラフ表示する
特定のページのみでしか利用しない場合
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
JavaScriptを記述
注意点
１種のグラフ
コードを表示
<script>
var ctx = document.getElementById("myLineChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
//データ項目のラベル
labels: ['8月1日', '8月2日', '8月3日', '8月4日', '8月5日'],
datasets: [
{
//凡例のラベル
label: '最高気温(度）',
data: [35, 34, 37, 35, 34], //グラフのデータ
borderColor: "rgba(200,112,126,1)",
backgroundColor: "rgba(0,0,0,0)"
}
],
},
options: {
title: {
display: true,
//グラフタイトル
text: '気温（8月1日～8月5日）'
},
scales: {
yAxes: [{
ticks: {
suggestedMax: 40, //最大値
suggestedMin: 20, //最小値
stepSize: 10, //縦ラベルの数値単位
callback: function(value, index, values){
return value + '度' //縦軸の単位
}
}
}]
},
}
});
</script>
複数のグラフ
コードを表示
<script>
var ctx = document.getElementById("myLineChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
//データ項目のラベル
labels: ['8月1日', '8月2日', '8月3日', '8月4日', '8月5日'],
datasets: [
{
//凡例のラベル
label: '最高気温(度）',
data: [35, 34, 37, 35, 34], //グラフのデータ
borderColor: "rgba(200,112,126,1)",
backgroundColor: "rgba(0,0,0,0)"
},
{
//凡例のラベル
label: '最低気温(度）',
data: [23, 24, 27, 25, 26], //グラフのデータ
borderColor: "rgba(80,126,164,1)",
backgroundColor: "rgba(0,0,0,0)"
}
],
},
options: {
title: {
display: true,
//グラフタイトル
text: '気温（8月1日~8月5日）'
},
scales: {
yAxes: [{
ticks: {
suggestedMax: 40, //最大値
suggestedMin: 20, //最小値
stepSize: 10, //縦ラベルの数値単位
callback: function(value, index, values){
return value + '度' //縦軸の単位
}
}
}]
},
}
});
</script>
簡単解説
chart.js Line（折れ線グラフ）解説 ※外部リンク
１行目で記述している「myLineChart」は、任意の名称です。
同一ページ内に複数のグラフを表示する際には、この名称をそれぞれに設定します。
例：折れ線グラフを２つ表示
myLineChart1
myLineChart2
データ項目ラベル
labels: ['8月1日’, '8月2日’, '8月3日’, '8月4日’, '8月5日’]
設定した項目は、グラフ下部に設定順に左側から表示されます。
項目数はいくつでもOKです。増やした場合は、データ内容も同数にする事をお忘れなく！
チャートの対象ラベル
label: “〇〇"
複数の比較の場合、色分けしたどちらが何かを表示するラベルです。
１つしか表示しない場合は、要らない気もしますが、何も設定をしなくても四角い枠は出てしまうので、何かしら設定した方が良さそう。
色の設定について
それぞれの色指定は、透過割合を指定出来るRGBAで指定しています。
もちろん透過が必要なければ１６進コードでの指定も可能。
RGBAについては以下をご覧ください。
https://ayaito.net/webtips/color_code/15421/
グラフデータ
実際の数値を設定します。
オプション
グラフ上に表示するテキスト（グラフタイトル）と、チャートの最小値、最大値、単位を設定します。
title: {
display: true,
//グラフタイトル
text: '気温（8月1日～8月5日）’
},
scales: {
yAxes: [{
ticks: {
suggestedMax: 40, //最大値
suggestedMin: 20, //最小値
stepSize: 10, //縦ラベルの数値単位
callback: function(value, index, values){
return value + '度’
}
}
}]
},
}
HTMLを記述
<canvas id="myLineChart">
</canvas>注意点
表示する為のHTMLはこれだけですが、上記コードのように、
WordPressの場合、タグのみの行はビジュアルエディタとテキストエディタを行き来するだけで消えてしまうのを防ぐ為です。
何かしらの文字を入れれば消えませんが、今回は文字の必要がない為、一番楽な「改行」で対応しています。
以上で完了です。
グラフが表示されない時
記述したJavaScriptとHTMLを見直して下さい。
JavaScript
１～２行目
var ctx = document.getElementById(“myLineChart“);
var myLineChart= new Chart(ctx, {
HTML
<canvas id="myLineChart“>
上記の解説にも書きましたが、複数のグラフを同一ページ内で表示する場合は、名称を変える必要がありますのでご注意下さい。
例：折れ線グラフを２つ表示
myLineChart1
myLineChart2
JavaScript、HTMLのそれぞれに対応して名称が間違えていないか確認。
