ตัวอย่างการสร้างกราฟแบบต่างๆ ด้วย Canvas

<script src="https://www.chartjs.org/dist/2.8.0/Chart.min.js" ></script>
<script src="https://www.chartjs.org/samples/latest/utils.js" ></script>
<canvas id="myChart" style="max-width: 500px;"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
	type: 'bar',
	data: {
		labels: ["ป.1", "ป.2", "ป.3", "ป.4", "ป.5", "ป.6"],
		datasets: [{
			label: 'จำนวนนักเรียนแต่ละชั้นเรียน',
			data: [17, 15, 22, 18, 21, 24],
			backgroundColor: [
				'rgba(255, 99, 132, 0.2)',
				'rgba(54, 162, 235, 0.2)',
				'rgba(255, 206, 86, 0.2)',
				'rgba(75, 192, 192, 0.2)',
				'rgba(153, 102, 255, 0.2)',
				'rgba(255, 159, 64, 0.2)'
			],
			borderColor: [
				'rgba(255,99,132,1)',
				'rgba(54, 162, 235, 1)',
				'rgba(255, 206, 86, 1)',
				'rgba(75, 192, 192, 1)',
				'rgba(153, 102, 255, 1)',
				'rgba(255, 159, 64, 1)'
			],
			borderWidth: 1
		}]
	},
	options: {
		scales: {
		yAxes: [{
			ticks: {
				beginAtZero: true
			}
		}]
		}
	}
});
</script>

ผลลัพธ์

<script src="https://www.chartjs.org/dist/2.8.0/Chart.min.js" ></script>
<script src="https://www.chartjs.org/samples/latest/utils.js" ></script>
<canvas id="lineChart"></canvas>
<script>
var ctxL = document.getElementById("lineChart").getContext('2d');
var myLineChart = new Chart(ctxL, {
	type: 'line',
	data: {
		labels: ["2557", "2558", "2559", "2560", "2561", "2562", "2563"],
		datasets: [{
			label: "นักเรียนเพศชาย",
			data: [49, 47, 53, 55, 52, 48, 50],
			backgroundColor: [
				'rgba(105, 0, 132, .2)',
			],
			borderColor: [
				'rgba(200, 99, 132, .7)',
			],
			borderWidth: 2
		},
		{
			label: "นักเรียนเพศหญิง",
			data: [57, 53, 68, 55, 62, 55, 67],
			backgroundColor: [
				'rgba(0, 137, 132, .2)',
			],
			borderColor: [
				'rgba(0, 10, 130, .7)',
			],
			borderWidth: 2
		}]
	},
	options: {
		responsive: true
	}
});
</script>

ผลลัพธ์

<script src="https://www.chartjs.org/dist/2.8.0/Chart.min.js" ></script>
<script src="https://www.chartjs.org/samples/latest/utils.js" ></script>
<canvas id="radarChart"></canvas>
<script>
var ctxR = document.getElementById("radarChart").getContext('2d');
var myRadarChart = new Chart(ctxR, {
	type: 'radar',
	data: {
		labels: ["คณิตศาสตร์", "ภาษาไทย", "สังคมศึกษา", "ภาษาต่างประเทศ"],
		datasets: [
			{
				label: "คะแนนเฉลี่ย",
				data: [62, 68, 65, 55],
				backgroundColor: [
					'rgba(105, 0, 132, .2)',
				],
				borderColor: [
					'rgba(200, 99, 132, .7)',
				],
				borderWidth: 2
			},
			{
				label: "คะแนนของ ด.ช. กอไก่ รักดี",
				data: [72, 65, 62, 48],
				backgroundColor: [
					'rgba(0, 250, 220, .2)',
				],
				borderColor: [
					'rgba(0, 213, 132, .7)',
				],
				borderWidth: 2
			}
		]
	},
	options: {
	responsive: true
	}
});
</script>

ผลลัพธ์

<script src="https://www.chartjs.org/dist/2.8.0/Chart.min.js" ></script>
<script src="https://www.chartjs.org/samples/latest/utils.js" ></script>
<canvas id="horizontalBar"></canvas>
<script>
new Chart(document.getElementById("horizontalBar"), {
	"type": "horizontalBar",
	"data": {
		"labels": ["คณิตศาสตร์", "ภาษาไทย", "สังคมศึกษา", "ภาษาต่างประเทศ"],
		"datasets": [{
			"label": "คะแนนเฉลี่ยการสอบแข่งขัน โรงเรียนมีดี",
			"data": [62, 68, 65, 55],
			"fill": false,
			"backgroundColor": [
				"rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)",
				"rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)",
				"rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"
			],
			"borderColor": [
				"rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)",
				"rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"
			],
			"borderWidth": 1
		}]
	},
	"options": {
		"scales": {
			"xAxes": [{
				"ticks": {
					"beginAtZero": true
				}
			}]
		}
	}
});
</script>

ผลลัพธ์

<script src="https://www.chartjs.org/dist/2.8.0/Chart.min.js" ></script>
<script src="https://www.chartjs.org/samples/latest/utils.js" ></script>
<canvas id="pieChart"></canvas>
<script>
var ctxP = document.getElementById("pieChart").getContext('2d');
var myPieChart = new Chart(ctxP, {
	type: 'pie',
	data: {
		labels: ["คณิตศาสตร์", "ภาษาไทย", "สังคมศึกษา", "ภาษาต่างประเทศ"],
		datasets: [{
			data: [62, 68, 65, 55],
			backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
			hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
		}]
	},
	options: {
		responsive: true
	}
});
</script>

ผลลัพธ์



จากกราฟแบบ Pie สามารถเปลี่ยนเป็น doughnut ได้โดยการเปลี่ยน type:'pie' เป็น type:'doughnut'