[script] Chart.js 차트 사용

JavaScript Chart.js 차트 라이브러리
다양한 차트를 쉽게 사용할 수 있다.

예시

label =항목 명
data=차트에 표시될 숫자

<div class="graphtitle">[Chart]</div>
<canvas id="myChart" style="width:100%; height:30vh"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
	var myChart = new Chart(ctx, {
		type: 'horizontalBar',
	    data:{ 
	        
	        labels: [<?=$labels?>],
	        datasets: [
	                   {
	           			label : '페이지뷰',
			            data: [<?=$datas?>],
			            backgroundColor: colors.sort(function(){return Math.random() - Math.random();}),
			            borderWidth: 0
			        	}
	                   ]
	    }
	    ,
	    options: {
	        scales: {
	            yAxes: [{
	                ticks: {
	                    beginAtZero: true
	                }
	            }]
	        },
	        layout:{
		        padding:20
	        },
	        legend: {
	            display: false
	          }
	    }
	});

</script>

 

 

Chart.js 링크

https://www.chartjs.org/docs/latest/

 

 

참고사이트

https://superad.tistory.com/632