Zenn
🔰

Chart.jsでかんたんグラフ

2021/12/20に公開
JavaScript
初心者
初心者向け
グラフ
チャート
tech

Chart.jsとは!?

Chart.jsを利用することで、多機能でとても可愛いグラフを表示する事ができます。

Chart.js

今回は、このライブラリを利用してグラフを表示してみます。

プロジェクトを用意する

次の様にプロジェクトを作ります。

MyProject01/
　├ custom.css (スタイルシートを記述するファイルです)
　├ index.html (プログラムを起動するファイルです)
　├ main.js (メインのプログラムを記述するファイルです)

HTMLファイルを用意する

では、作っていきましょう。
HTMLファイルを用意して、下記コードを記述します。

index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"/>
	<!-- CSS -->
	<link rel="stylesheet" href="./custom.css"/>
	<!-- JavaScript -->
	<script src="//cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script>
	<script src="./main.js" defer></script>
</head>
<body>
	<!-- Chart -->
	<canvas id="my-chart" height="400"></canvas>
</body>
</html>

Chart.jsで必要なファイルはCDNを利用して読み込んでいます。

index.html(ライブラリ本体)
<!-- JavaScript -->
<script src="//cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script>

そして、グラフを表示させたい部分にcanvasを用意してidを付けておきます。
(ここでは"my-chart"としました)

"height"には、グラフ全体の高さを指定しておきます。

index.html(カルーセル部分)
<!-- Chart -->
<canvas id="my-chart" height="400"></canvas>

CSSファイルを用意する

次はCSSファイルです。

custom.css
/* CSS */
body{
	text-align: center;
}

今回は特に何もしてませんね。。。

JavaScriptファイルを用意する

最後はJavaScriptファイルです。
ソースコード自体はとてもシンプルでわかりやすくなっています。

main.js
console.log("custom.js!!");

window.onload = (e)=>{
	console.log("onload!!");

	// キャンバスの取得
	const ctx = document.getElementById("my-chart").getContext("2d");
	// チャートオブジェクト
	const myChart = new Chart(ctx, {
		type: "bar",// グラフの種類
		data: {
			labels: ["Switch", "3DS", "DS", "SFC", "GB", "FC"],// ラベル
			datasets: [{
				label: "任天堂ハード販売台数",// タイトル
				data: [2254, 2458, 3286, 1717, 3247, 1935],// データ
				backgroundColor: [
					"rgba(255, 100, 100, 0.2)",// 背景の色
					"rgba(100, 255, 100, 0.2)",
					"rgba(100, 100, 255, 0.2)",
					"rgba(255, 255, 100, 0.2)",
					"rgba(100, 255, 255, 0.2)",
					"rgba(255, 100, 255, 0.2)"
				],
				borderColor: [
					"rgba(255, 100, 100, 1)",// 枠線の色
					"rgba(100, 255, 100, 1)",
					"rgba(100, 100, 255, 1)",
					"rgba(255, 255, 100, 1)",
					"rgba(100, 255, 255, 1)",
					"rgba(255, 100, 255, 1)"
				],
				borderWidth: 1// 枠線の太さ
			}]
		},
		options: {
			responsive: true,
			maintainAspectRatio: false,
			scales: {
				y: {
					beginAtZero: true
				}
			}
		}
	});
}

HTMLに用意したcanvasを取得し、チャートオブジェクトを作ります。
第一引数には先程のキャンバスオブジェクト、
第二引数にはグラフに関するデータ等を指定します。

main.js(抜粋)
// キャンバスの取得
const ctx = document.getElementById("my-chart").getContext("2d");
// チャートオブジェクト
const myChart = new Chart(ctx, グラフに関するデータ);

"labels"には、格納するデータそれぞれにラベルを付与しています。
(ここでは6件のデータを用意していますね)

main.js(抜粋)
labels: ["Switch", "3DS", "DS", "SFC", "GB", "FC"],// ラベル

"data"には、数値そのものを指定します。

main.js(抜粋)
data: [2254, 2458, 3286, 1717, 3247, 1935],// データ

"backgroundColor","borderColor", "borderWidth"にはそれぞれ、
背景の色、枠線の色、枠線の太さを記述します。

main.js(抜粋)
backgroundColor: [
	"rgba(255, 100, 100, 0.2)",// 背景の色
	"rgba(100, 255, 100, 0.2)",
	"rgba(100, 100, 255, 0.2)",
	"rgba(255, 255, 100, 0.2)",
	"rgba(100, 255, 255, 0.2)",
	"rgba(255, 100, 255, 0.2)"
],
borderColor: [
	"rgba(255, 100, 100, 1)",// 枠線の色
	"rgba(100, 255, 100, 1)",
	"rgba(100, 100, 255, 1)",
	"rgba(255, 255, 100, 1)",
	"rgba(100, 255, 255, 1)",
	"rgba(255, 100, 255, 1)"
],
borderWidth: 1// 枠線の太さ

これだけで、棒グラフを簡単に表示することができます。(やりました!!)

グラフの種類を変更する

"type"の値を変更することで、グラフの種類を簡単に変更することができます。

main.js(抜粋)
type: "bar",// グラフの種類

折れ線グラフ

main.js(抜粋)
type: "line",// グラフの種類

円グラフ(正円)

main.js(抜粋)
type: "pie",// グラフの種類

円グラフ(ドーナツ)

main.js(抜粋)
type: "doughnut",// グラフの種類

レーダー

main.js(抜粋)
type: "radar",// グラフの種類

鶏頭図

main.js(抜粋)
type: "polarArea",// グラフの種類

最後に

今回は、Chart.jsを利用してグラフを表示するサンプルを作成してみました。
とても簡単にグラフを作ることが出来る事が伝われば幸いです。
ここまで読んでいただき有難うございました。

Discussion