簡単！chart.jsでグラフをつくる方法

2019年11月18日2024年3月6日

こんにちは。

今日はグラフを簡単につくることができる「chart.js」についてご紹介したいと思います！

chart.jsでは

・線グラフ
・棒グラフ
・レーダーチャート
・ドーナツ/ 円グラフ
・散布図

.. など、様々な種類のグラフを描画することができます！

サンプル

使い方

挿入したい箇所に<canvas>を記述する

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>chart.jsサンプル</title>
</head>

<body>
	<h1>グラフ例</h1>
	<canvas id="myChart"></canvas> <!--グラフを挿入する場所-->
</body>
</html>

<body>内でグラフを描画したい箇所に、<canvas id="myChart"></canvas>

を追加します。その際、idをつけます。

Chart.jsを読み込む

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>chart.jsサンプル</title>
</head>

<body>
	<h1>グラフ例</h1>
	<canvas id="myChart"></canvas>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script> <!--cdnファイルの読み込み-->
	 <script> //chart描画用記述
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
      type: タイプ,
      data: データ,
      options: オプション
    });
    </script>
</body>
</html>

CDNに公開されているファイルを読み込み、chartを描画する設定の記述を追加します。

グラフを描画するのに必要な情報を入れていく

先ほどの記述内にあった、
type: タイプ,
data: データ,
options: オプション
のところに、実際の値を指定してみます。

type: 描画するグラフの種類を指定します。
data: グラフの数値や凡例、グラフの色を指定します。
options: グラフの種類によって異なる様々なオプションを指定します。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>chart.jsサンプル</title>
</head>

<body>
	<h1>グラフ例</h1>	
	<canvas id="myChart" width="200" height="200"></canvas>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
	 <script>
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
      type: 'doughnut', //ドーナツグラフ
      data: {
				labels: ["20代","30代","40代","50代以上"],　//ラベル名
				datasets: [{
					borderColor: 'transparent',　//デフォルトではグラフに白い枠線がつくので、それを消す
					backgroundColor: [ //各グラフの背景色
						"#E6AF2E",
						"#3D348B",
						"#BEB7A4",
						"#F06543",
					],
					data: [38, 31, 21, 10] //グラフの数値
				}]
			},
      options: {
				cutoutPercentage: 76, //どのぐらい細いドーナツグラフにしたいか
				title: {
					display: true, //グラフのタイトルを表示させるかどうか
					text: '年齢層' //グラフのタイトル
				}
			}
    });
    </script>
</body>
</html>

上記のように、具体的な数値やグラフの見た目などの設定を入力します。