|
第5号（2022年04月20日）
Chart.jsによるグラフ作成
はじめに
「Chart.js」はJavaScript でグラフを描画するためのライブラリです。
今回は「Chart.js」でのグラフの描画方法について紹介していきたいと思います。
インストール
CDNを用いる場合はheadタグ内にscriptタグで読み込みます。
ネットワークのない環境で使用したい場合は、GitHubのサイトからダウンロードして使用することもできます。（ダウンロードサイト）
基本の使い方
Chart.jsを使用できるようにするため、ヘッダに以下の記述を追加します。（今回はCDNを利用）
<script src=
"https://cdnjs.cloudflare.com
/ajax/libs/Chart.js/3.7.1/chart.min.js">
</script>
基本の描画方法は、HTMLでグラフを表示するためのcanvasとscriptを記述するだけです。
今回は、シンプルな棒グラフを作成してみます。
HTML
<div style="width:90%">
<canvas id="myChart"></canvas>
</div>
<script>
var ctx
=document.getElementById("myChart")
.getContext('2d');
var data1=[20,35,40,30,45,35,40];//ﾃﾞｰﾀ準備1
var data2=[20,15,30,25,30,40,35];//ﾃﾞｰﾀ準備2
var data3=[30,25,10,5,25,30,20]; //ﾃﾞｰﾀ準備3
var myChart = new Chart(ctx, {
type: 'line', //折線ｸﾞﾗﾌ
data: {
labels: ['0:00', '4:00', '8:00'
, '12:00', '16:00'
, '20:00', '24:00'], //X軸表示
datasets: [{
label: 'Red(キュービック補完)',//ﾗﾍﾞﾙ
data: data1, //ﾃﾞｰﾀ
//折線の色
borderColor: '#FF3399',
//折線の見え方(キュービック補完)
cubicInterpolationMode:'monotone',
}, {
label: 'Green(ベジェ曲線)',
data: data2,
borderColor: '#33CC99',
/*折線の見え方(ベジェ曲線)*/
tension: 0.4
}, {
label: 'Blue(デフォルト)',
data: data3,
borderColor: '#0099FF',
}],
},
options: {
plugins: {
title: {
display: true,
text: 'サンプル' //ｸﾞﾗﾌﾀｲﾄﾙ
},
},
y: {
min: 0, //Y軸の最小値
max: 60, //Y軸の最大値
},
scales: {
y: {
display: true,
title: {
display: true,
text: 'Value' //Y軸のﾗﾍﾞﾙ
},
}
}
},
});
</script>
2行目はグラフを表示するためのcanvasを記述しています。
11行目のnew Chart();の第一引数に記述したcanvasを指定し、
第二引数に描画させたいグラフのデータ・パラメーターを設定するだけで、簡単にきれいなグラフを描画することができます。
12行目「type：」には、グラフの形態を記述します。
折れ線グラフのほかにも棒グラフや円グラフ、組み合わせた複合グラフ等も作成することができます。（後述のサンプル参照）
13行目「data：」には、グラフのデータの詳細を記述します。
ここでは表示するデータ(折れ線)も記述によって増やすことができます。X軸に表示する値もここで指定します。
折れ線の色や見え方を変える場合も、ここのパラメーターの設定を変更します。（21，23行目）
36行目「options：」には、グラフの表示の設定を記述します。
グラフタイトルやY軸の最大値・最小値などグラフの表示設定はここで指定します。
他にも、デフォルトで折れ線にカーソルを当てて具体的な値を見ることや、ラベルをクリックし任意の折れ線を非表示に切り替えることもできます。
サンプル
折れ線以外にも様々なグラフを描画できます。
グラフの種類やカスタマイズもとても豊富です。詳しくはChart.jsのサンプルページを参照してください。
<div style="width:90%">
<canvas id="myChartBar"></canvas>
</div>
<script>
var ctxBar
=document.getElementById("myChartBar")
.getContext('2d');
var data1B=[20,35,40,30,45,35,40];
var data2B=[20,15,30,25,30,40,35];
var data3B=[30,25,10,5,25,30,20];
var myChartBar = new Chart(ctxBar, {
type: 'bar', //折線グラフ
data: {
labels: ['0:00', '4:00', '8:00'
, '12:00', '16:00'
, '20:00', '24:00'], //X軸表示
datasets: [{
label: 'Red', //ﾗﾍﾞﾙ
data: data1B, //ﾃﾞｰﾀ
//折線の色
backgroundColor: '#FF3399',
}, {
label: 'Green',
data: data2B,
backgroundColor: '#33CC99',
}, {
label: 'Blue',
data: data3B,
backgroundColor: '#0099FF',
}],
},
options: {
plugins: {
title: {
display: true,
//ｸﾞﾗﾌﾀｲﾄﾙ
text: '棒グラフサンプル'
},
},
y: {
min: 0, //Y軸の最小値
max: 60, //Y軸の最大値
},
scales: {
y: {
display: true,
title: {
display: true,
//Y軸のﾗﾍﾞﾙ
text: 'Value'
},
}
}
},
});
</script>
<div style="width:300px">
<canvas id="myChartBar"></canvas>
</div>
<script>
var ctx
=document.getElementById("myChartPie")
.getContext('2d');
const dataP = {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [
{
label: 'Dataset 1',
data:[200,100,400],
backgroundColor: [
"rgb(255, 99, 132)",
"rgb(54, 162, 235)",
"rgb(255, 205, 86)"
]
}
]
};
var myChartPie = new Chart(ctx, {
type: 'pie', //円ｸﾞﾗﾌ
data: dataP,
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: '円グラフサンプル'
}
}
},
});
</script>
<div style="width:90%">
<canvas id="myChartBubble"></canvas>
</div>
<script>
var ctx
= document.getElementById("myChartBubble")
.getContext('2d');
const dataBU = {
datasets: [
{
data: [{x:10 ,y:40, r:30} ,],
backgroundColor:["rgba(255, 99, 132,0.6)"],
label: ["Red"]
},
{
data: [{x:45 ,y:20, r:40} ,],
backgroundColor:["rgba(54, 162, 235,0.6)"],
label: ["Blue"]
},
{
data: [{x:60 ,y:30, r:15} ,],
backgroundColor:["rgba(255, 205, 86,0.6)"],
label: ["Yellow"]
},
{
data: [{x:30 ,y:30, r:35} ,],
backgroundColor:["rgba(30, 250, 154,0.6)"],
label: ["Green"]
}
]};
myChartBubble = new Chart(ctx, {
type: 'bubble', //バブルチャート
data: dataBU,
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'バブルチャートサンプル'
}
}
},
});
</script>
<div style="width:90%">
<canvas id="myChartBubble"></canvas>
</div>
<script>
//棒ｸﾞﾗﾌ
const dataBar=[100,200,50,400,500,300,450];
//折線ｸﾞﾗﾌ1
const dataLine1=[10,45,20,35,5,15,30];
//折線ｸﾞﾗﾌ2
const dataLine2=[50,25,35,55,5,25,20];
var ctx
= document.getElementById("myChartBubble")
.getContext('2d');
myChartBubble = new Chart(ctx, {
type: "bar", //ベースは棒グラフ
data: {
labels: ["0:00", "4:00", "8:00"
, "12:00", "16:00"
, "20:00", "24:00"],
datasets: [{
yAxisID: "y1", //対応するY軸の指定
label: "Line Data1",
data: dataLine1,
type: "line", //折線ｸﾞﾗﾌのﾃﾞｰﾀを追加
fill: false,
borderColor: "rgb(255, 99, 132)",
cubicInterpolationMode: 'monotone',
}, {
yAxisID: "y1",
label: "Line Data2",
data: dataLine2,
type: "line",
fill: false,
borderColor: "rgb(30, 250, 154)",
cubicInterpolationMode: 'monotone',
},
{
yAxisID: "y2",
label: "Bar Data",
data: dataBar,
type: "bar",
backgroundColor:
"rgba(255, 205, 86,0.6)",
},]
},
options: {
responsive: true,
scales: {
//複数のY軸を作成
y1: {
type: 'linear',
position: "left", //左右表示
beginAtZero: true,
max: 60,
min: 0
},
y2: {
type: 'linear',
position: "right",
beginAtZero: true,
max: 600,
min: 0
}
}
}
});
</script>
※複合グラフのY軸の記述方法はバージョン3以降で変更となったので注意が必要です。
まとめ
今回は「Chart.js」でのグラフの表示方法を紹介しました。
このライブラリを使用すれば、シンプルなデザインで直感的に理解しやすいグラフが描画できることが分かったと思います。
すべてのグラフで自動的にアニメーション表示される仕掛けになっており、シンプルながら単調な印象にならない点も魅力です。
簡単に見栄えの良いグラフを作成したいときにオススメです。
|
|