투케이2K

101. (javascript/자바스크립트) chart js 라이브러리 사용해 캔버스 막대형 bar 차트 그리기 실시 본문

JavaScript

101. (javascript/자바스크립트) chart js 라이브러리 사용해 캔버스 막대형 bar 차트 그리기 실시

투케이2K 2021. 7. 27. 14:55

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : javascript

[소스 코드]

​

<!DOCTYPE HTML>
<!-- 자바스크립트 차단된 콘텐츠 자동 허용 실시 -->
<!-- saved from url=(0013)about:internet -->

<!-- 표시 언어 지정 -->
<html lang="ko">

<!-- 헤더 정의 부분 -->
<head>
    <title>HTML TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    

    <!-- 내부 CSS 스타일 지정 -->
    <style>			    			 	    	

		/* html, body 영역 스타일 지정 */
		html, body{
			width : 100%;
			height : 100%;
			margin : 0;
			padding : 0;
			border : none;
			overflow : auto;					
		}
		
		

		/* [body 스크롤바 메인 스타일 지정] */
		body::-webkit-scrollbar {
			width: 10px;
			background-color: #c1c1c1;
		}
		/* [body 스크롤바 thumb 스타일 지정] */
		body::-webkit-scrollbar-thumb {					
			background-color: #444444;
		}



		/* [myBarHeightChart 막대 세로 캔버스 레이아웃] */
		#myBarHeightChart{
			/* 가로 width 크기에 따라서 차트 크기가 지정됩니다 */
			width: 70%;
			height: auto;
			margin: 0 auto;
			padding: 0;
			border: 1px solid #000000;
			border-radius: 20px;
			background-color: #eeeeee;

			position: relative;
			top: 5%;
			left: 0;

			display: block;
		}


  
		      				                          
    </style>


    <!-- Jquery CDN 로드 : 항상 최신 버전 사용 -->    
    <script src="https://code.jquery.com/jquery-latest.min.js"></script> 



    <!-- chart js 라이브러리 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"></script>



    <!-- 내부 JS 지정 -->
    <script>

    	/*
    	[JS 요약 설명]
    	1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 
    	2. chart js : <canvas> 사용해 차트를 렌더링 하며 단일 노드와 함께 페이지에 포함된 스크립트만 있으면 됩니다
    	3. chart js 공식 사이트 : https://www.chartjs.org/docs/latest/
    	4. chart js cdn 참고 사이트 : https://cdnjs.com/libraries/Chart.js
    	*/

   	
    	
    	/* [html 최초 로드 및 이벤트 상시 대기 실시] */
    	window.onload = function() {
    		console.log("");
    		console.log("[window onload] : [start]");
    		console.log("");

    		/* [bar 세로 막대 : 그리기 실시] */
    		drawBarHeight();
    		    		
    	};


    	/* [bar 세로 막대 : 그리기 함수] */
    	function drawBarHeight(){
    		console.log("");
    		console.log("[drawBarHeight] : [start]");
    		console.log("");

    		// [body 에 선언된 캔버스 id 지정 실시]
    		var ctx = document.getElementById('myBarHeightChart').getContext('2d');
    		var myChart = new Chart(ctx, {
    			type: 'bar', // [차트 타입 지정]
    			data: {
    				labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], // [데이터 라벨 (제목)]
    				datasets: [{
    					label: '# of Votes', // [데이터 시트 제목]
    					data: [20, 19, 3, 5, 2, 3], // [데이터 : Red ~ Orange]
    					backgroundColor: [ // [막대 배경 색상 : Red ~ Orange ]
    						'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: [ // [막대 테두리 색상 : Red ~ Orange ]
    						'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: {
    				legend: {
    					labels: {
    						fontColor: "red",
    						fontSize: 18
    					}
    				},
    				scales: {
    					y: {
    						beginAtZero: true
    					}
    				}
    			}
    		});
    	};
    	
    </script>


</head>


<body>

<!-- 레이아웃 : bar 세로 막대 -->
<canvas id="myBarHeightChart"></canvas>

</body>

</html>

[결과 출력]

​

[요약 설명]

​

/*

[JS 요약 설명]

1. window.onload : 브라우저 로드 완료 상태를 나타냅니다

2. chart js : <canvas> 사용해 차트를 렌더링 하며 단일 노드와 함께 페이지에 포함된 스크립트만 있으면 됩니다

3. chart js 공식 사이트 : https://www.chartjs.org/docs/latest/

4. chart js cdn 참고 사이트 : https://cdnjs.com/libraries/Chart.js

*/

 

반응형
저작자표시

'JavaScript' 카테고리의 다른 글

103. (javascript/자바스크립트) bar chart 반응형 및 커스텀 차트 작업 실시 - chart js 라이브러리 사용  (0) 2021.07.27
102. (javascript/자바스크립트) 차트 chart 라이브러리 모음 정리  (0) 2021.07.27
100. (javascript/자바스크립트) slice 사용해 원본 배열 (array) 데이터 복사해 새로운 배열 생성  (0) 2021.07.27
99. (javascript/자바스크립트) new Array 배열에서 splice 사용해 특정 데이터 전체 삭제 수행  (0) 2021.07.27
98. (javascript/자바스크립트) 두날짜 start date , end date 에 포함되는 날짜 리스트 출력 실시 - new Date , toISOString  (0) 2021.07.27
'JavaScript' Related Articles more
Comments