101. (javascript/자바스크립트) chart js 라이브러리 사용해 캔버스...

101. (javascript/자바스크립트) chart js 라이브러리 사용해 캔버스...

728x90

반응형

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : javascript

[소스 코드]

​

HTML TEST /* 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; } /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. chart js : 사용해 차트를 렌더링 하며 단일 노드와 함께 페이지에 포함된 스크립트만 있으면 됩니다 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 } } } }); };

[결과 출력]

​

[요약 설명]

​

/*

[JS 요약 설명]

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

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

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

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

*/

728x90

반응형

from http://kkh0977.tistory.com/1050 by ccl(A) rewrite - 2021-07-27 15:00:18