Webサイトで簡単にグラフが作れる便利なJQueryプラグイン『Chart.js』を使ってみた

Excelだと簡単に棒グラフ、折れ線グラフを作ることができますが、Webサイトで自前でグラフを使おうとするとなかなか難しいですよね。そんなグラフが簡単に作れるJQueryプラグインは色々ありますが、その中の一つの『Chart.js』を使ってみました。

準備：JQueryとChart.jsの準備
実際にグラフを描画してみる
終わりに

準備：JQueryとChart.jsの準備

今回も簡単に準備をするために、CDNを使用してJavaScriptファイルを読み込みます。

<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
	</head>
</html>

実際にグラフを描画してみる

まずは簡単な棒グラフから

下記のコードを書いてブラウザで表示してみてください。

<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
	</head>
	<script>
		$(document).ready(function(){
			var ctx = $("#myChart");
			var myChart = new Chart(ctx, {
				type: 'bar',
				data: {
					labels: ['4月', '5月', '6月'],
					datasets: [{
						label: 'Male',
						data: [8, 5, 3],
						backgroundColor: "rgba(65,105,225,0.4)"
						}, {
						label: 'Female',
						data: [2, 10, 8],
						backgroundColor: "rgba(255,105,180,0.4)"
					}]
				}
			});
		});
	</script>
	<body>
    	<canvas id="myChart"></canvas>
	</body>
</html>

このようなグラフが表示されれば成功です。

基本的なところを簡単に説明していきます。

まず、これがグラフを描画する場所となる部分です。

<canvas id="myChart"></canvas>

次に、グラフに設定する内容の説明です。

type：グラフの種類

typeにグラフの種類を設定します。ここでは”bar”と記載していますが、これによって「棒グラフ」となります。

他に、”line”（折れ線グラフ）、”radar”（レーダーチャート）などがあります。また、棒グラフと折れ線グラフを組み合わせたグラフを作ることも可能です。

data：表示するデータ

dataの中に実際に表示するデータを記載します。今回は、「Male」と「Female」の二種類の棒グラフを作成しているので、それぞれ用意します。

ひとつめのデータを例に説明します。

label: 'Male',
data: [8, 5, 3],
backgroundColor: "rgba(65,105,225,0.4)"

label：データの判例を記載します。

data：実際のデータを記載します。

backgroundColor：グラフの色を記載します。

これを、「Female」でも同様に作成します。（さらに追加したい場合は、「Female」と同様のカタマリを後ろに追加していってください。）

折れ線グラフを作成してみる

先ほどの棒グラフのコードの「type: ‘bar’,」の「bar」部分を「line」に変えて実行してみてください。

<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
	</head>
	<script>
		$(document).ready(function(){
			var ctx = $("#myChart");
			var myChart = new Chart(ctx, {
				type: 'line',
				data: {
					labels: ['4月', '5月', '6月'],
					datasets: [{
						label: 'Male',
						data: [8, 5, 3],
						backgroundColor: "rgba(65,105,225,0.4)"
						}, {
						label: 'Female',
						data: [2, 10, 8],
						backgroundColor: "rgba(255,105,180,0.4)"
					}]
				}
			});
		});
	</script>
	<body>
    	<canvas id="myChart"></canvas>
	</body>
</html>

グラフがこのように変化したら成功です。

円グラフに挑戦

円グラフにするには、「type: ‘pie’」に変更します。円グラフは英語で「Pie Chart」と言うそうです。

<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
	</head>
	<script>
		$(document).ready(function(){
			var ctx = $("#myChart");
			var myChart = new Chart(ctx, {
				type: 'pie',
				data: {
					labels: ['4月', '5月', '6月'],
					datasets: [{
						backgroundColor: [
							"#ff7f7f",
							"#7f7fff",
							"#7fff7f"
						],
						data: [13, 5, 3],
						}]
				}
			});
		});
	</script>
	<body>
    	<canvas id="myChart"></canvas>
	</body>
</html>

今まで二種類のデータを表示していましたが、わかりやすく一種類にしました。（二種類表示することも可能です。）

オプションを加えてみる

今度は、オプションを追加してグラフに変化を付けていきます。

<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
	</head>
	<script>
		$(document).ready(function(){
			var ctx = $("#myChart");
			var myChart = new Chart(ctx, {
				type: 'line',
				data: {
					labels: ['4月', '5月', '6月'],
					datasets: [{
						label: 'Male',
						data: [8, 5, 3],
						borderColor: "rgba(65,105,225,0.4)",
						fill: false
						}, {
						label: 'Female',
						data: [2, 10, 8],
						borderColor: "rgba(255,105,180,0.4)",
						fill: false
					}]
				}
			});
		});
	</script>
	<body>
    	<canvas id="myChart"></canvas>
	</body>
</html>

「backgroundColor」を「borderColor」に変更し、下に「fill」を追加しました。

これを実行してみると下記のようになります。

グラフの塗りつぶしがなくなり、さらに折れ線グラフっぽくなりました。これは「fill」を「false」に設定したことで、塗りつぶしがなくなっています。

さらに、「backgroundColor」は、塗りつぶしの色を設定していたものなので、これを「borderColor」に変更することで、線の色を指定してます。

棒グラフと折れ線グラフを重ねてみる

棒グラフと折れ線グラフを重ねて表示させることも可能です。

その場合はメインは「type: ‘bar’」にして、その中のdatasetで「type: ‘line’」を定義します。

下記のようになります。

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
</head>
<script>
    $(document).ready(function () {
        var ctx = $("#myChart");
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['4月', '5月', '6月'],
                datasets: [{
                    label: 'Male',
                    data: [13, 5, 9],
                    backgroundColor: "rgba(65,105,225,0.4)",
                },
                {
                    label: 'Power',
                    type: 'line',
                    fill: false,
                    data: [10, 11, 7],
                    borderColor: "rgb(255,105,180)",
                }
                ]
            }
        });
    });
</script>

<body>
    <canvas id="myChart"></canvas>
</body>

</html>