[자바스크립트] chart.js 사용법, 예제, 차트 그리기

차트를 그리기 위해 많은분들이 사용하고 있는 Chart.js 라이브러리를 소개 합니다.
canvas 태그를 사용하고, id를 지정 해줍니다.

 

스크립트는 다운받을 수 있으며, CDN으로 사용하실수도 있습니다.

 

x축은 monthList로 최근 6개월을 나타냈으며, y축은 monthData로 표현 했습니다.

chart type은 line으로 표현하고 label은 노출시키지 않았습니다.

<canvas id="myChart" width="500" height="150"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
	function addZero(i) {
		var rtn = i + 100;
		return rtn.toString().substr(1, 3);
	}

	var monthList = [];
	var monthData = [50,60,70,45,50,66];

	var dt = new Date();
	var year = dt.getFullYear();
	var mon = addZero(eval(dt.getMonth()+1));		
	var now = year+mon;

	for(var i = (now - 5); i <= now; i++){
		var format =  i;
		monthList.push(format);
	}

	const ctx = document.getElementById('myChart').getContext('2d');
	const myChart = new Chart(ctx, {
		type: 'line',
		data: {
			labels: monthList,
			datasets: [{
				data: monthData,
				borderColor:'rgba(255, 99, 132, 1)',
				borderWidth: 1
			}]
		},

		options: {
		  responsive: true,
		  plugins: {
			legend: {
			  display: false
			}
		  }
		}
	});
</script>

 

 

 

 

다양한 예제는 아래 사이트에서 확인 하실 수 있습니다.

https://www.chartjs.org/

Chart.js | Open source HTML5 Charts for your website