121. (javascript/자바스크립트) chart js 라이브러리 사용해 커스텀...

121. (javascript/자바스크립트) chart js 라이브러리 사용해 커스텀...

728x90

반응형

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : javascript

[소스 코드]

​

/* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. chart.js 공식 사이트 : https://www.chartjs.org/docs/latest/ 3. chart.js 플러그인 datalabels : https://chartjs-plugin-datalabels.netlify.app/ 4. cdn 설치 사이트 : https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html#installation */ // [html 최초 로드 및 이벤트 상시 대기 실시] window.onload = function() { console.log(""); console.log("[window onload] : [start]"); console.log(""); }; // [차트 그리기에 사용할 전역 변수 지정 실시] var canvas; var ctx; var height = ""; var width = ""; var myChart; // [캔버스 크기 지정 실시] // type : [1 = bar 세로 막대 / 2 = bar 그룹 차트 / 3 = line 라인 차트 / 4 = scatter 분산 차트] function canvasSizeCheck(type){ console.log(""); console.log("[canvasSizeCheck] : [start]"); console.log(""); // [캔버스를 포함하고 있는 상위 부모 컨테이너 id 지정 >> 부모 컨테이너 크기에 맞춰서 캔버스 리사이즈] var tagId = document.getElementById("canvas_container"); height = window.getComputedStyle(tagId).height; width = window.getComputedStyle(tagId).width; console.log(""); console.log("[canvasSizeCheck] : [height] : " + height); console.log("[canvasSizeCheck] : [width] : " + width); console.log(""); // [화면 사이즈가 변경된 경우 기존 차트 삭제 실시] if(ctx != null){ canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); myChart.destroy(); } // [인풋으로 들어온 타입 값에 따라서 그래프 분기 표시 실시] if(type == 1){ createCheartBarVertical(); // bar 세로 막대 } if(type == 2){ createCheartBarGroup(); // bar 그룹 막대 } if(type == 3){ createCheartLineWave(); // line 꺽은선 } if(type == 4){ createCheartScatter(); // scatter 분산 } };

[결과 출력]

​

​

​

​

[요약 설명]

​

/*

[JS 요약 설명]

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

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

3. chart.js 플러그인 datalabels : https://chartjs-plugin-datalabels.netlify.app/

4. cdn 설치 사이트 : https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html#installation

*/

[파일 첨부]

​

전체 소스코드.txt 0.05MB

a_Test_Chart.html 0.05MB

728x90

반응형

from http://kkh0977.tistory.com/1216 by ccl(A) rewrite - 2021-09-15 13:27:07