고정 헤더 영역
상세 컨텐츠
본문
일반적으로 데이타베이스를 쓰는 프로젝트에서 통계 페이지를 구현 하지 않는다면
그거슨 프로젝트를 하다가 중간에 그만 둔 것과 같이 평가 절하된당.
데이타베이스에 저장된 거슬 데이타라 부르고, 쌓인 데이타를 가지고 통계를 낸다면
그거슬 Information(정보)라 부른당. 정보화하지 않고 쌓아만 둔다면 그게 뭐다낭!
통계 결과를 냈다고 해도 그거슬 sql의 select문 결과나 그저 숫자 가득한 엑셀 파일등으로
준다면 의미 파악이 어려울 수 있당. (사장님은 벌써 오래전에 노안이당. 숫자가 안보인당)
의미도 그렇지만 흐름(추세) 파악도 단순 숫자 나열로는 어려울 수 있당.
요따구 상황에서 차트를 사용하고, 요런 테크닉을 데이터 시각화라 부른당.(오켕?)
웹에서 데이터 시각화의 최고봉은 단연 D3.JS 당 ( 멋지당!, 1~2개 클릭해 보장)
D3.JS는 멋지고 화려하공, 자바스크립트를 꽤 하는 사람이라면, 그렇게 어렵지도
않지만, 과학이나 학술연구등의 특수분야가 아니라면, 일반적인 회사 업무기준으로는
코드에 손도 많이 가고,그 결과물도 의미 전달에 과하고 과하당. 일반기준 탈락이당!.
D3.JS가 과하다 싶으니, D3.JS 기반으로 쉬운 C3.JS 가 나왔당.
개인적으로 좋아하는 차트 라이브러리는 chart.js 당.
정말 잘 만들었당. 한번만 보면 그 사용법을 잊어버리기는 게 더 어렵당.!
chart.js 시작페이지 보고 이제 그 내막을 알아보장!(아래 소스 복사/붙여넣기 실행)
chartSample.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chart.js 샘플페이징</title>
<!-- chart.js 설치 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<!-- 차트 크기는 부모 크기를 조절하면 거기에 맞게 자동으로 맹글어짐-->
<div style="width:600px;height:400px;border:2px solid black">
<!-- 차트 그릴 위치 지정 canvas webGL(그래픽엔진) 사용 -->
<canvas id="myChart"></canvas>
</div>
<script>
const ctx = document.querySelector('#myChart');
//만들위치, 설정값객체
new Chart(ctx, {
type: 'bar', // bar, line, pie, doughnut, radar 등등...
data: {
labels: ['구두', '스니커즈', '캔버스화', '워커', '운동화', '크록스', '샌들'],
datasets: [
{
label: '작년 매출',
data: [10, 19, 13, 15, 12, 13, 9],
borderWidth: 1,
},
{
label: '올해 매출',
data: [9, 14, 10, 19, 22, 11, 16],
borderWidth: 1
}
]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>
아래 실행화면과 소스를 매칭시켜 보면 , 소스의 의미가 절로 뼈까지 침투한당.
type:'bar' 부분을 'line' ,'pie', 'doughnut', 'radar' 로 개별 바꾸어 모양을 확인하장
비교 할때 bar, 흐름은 line, 영역포션을 보고플 때 pie, doughnut,
MBTI 같은 특성을 구분해서 보고플 땐 radar, 요정도 기본적으로 많이 사용되는 type이당!
script 태그 안의 내용만 아래처럼 생성객체를 변수로 받는 부분과
console.log 부분만 추가되도록 수정하고, console.log 결과를 누느로 확인하장.
<script>
const ctx = document.querySelector('#myChart');
// 생성 객체를 변수로 받으면, 요기에 생성시 사용된 옵션값들이 거의 다 담겨있당.
// chart.js는 이거 덕분에 사용이 아주 쉽당. 누니 쫓아만 가면 된당.
const mChart = new Chart(ctx, {
/*
코드 생략
*/
});
// mChart에 담긴 값 확인, 누느로 꼬옥 화긴하장!
console.log("labels:", mChart.data.labels);
console.log("labels:", mChart.data.datasets[0]);
console.log("labels:", mChart.data.datasets[1].label);
console.log("labels:", mChart.data.datasets[1].data);
</script>new Chart에 옵션으로 주었던 값들이 mChart변수 기준으로 JSON 형식의 계층구조로
읽을 수 있음을 절로 알게된당.(느낌이 안 온다공?, 무조건 왔을꺼당!)
이제 정리하는 느낌으로 아래 소스를 카피/붙여넣기 실행 결과를 확인하장!
chartSample.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chart.js 샘플페이징</title>
<!-- chart.js 설치 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<button onclick="fChg()">여러번 눌러방</button>
<button onclick="fChgType()">Type Mix</button>
<!-- 차트 크기는 부모 크기를 조절하면 거기에 맞게 자동으로 맹글어짐-->
<div style="width:600px;height:400px;border:2px solid black">
<!-- 차트 그릴 위치 지정 canvas webGL(그래픽엔진) 사용 -->
<canvas id="myChart"></canvas>
</div>
<script>
// 7개 랜덤데이터 배열 리턴 함수
function fRanArrData() {
let ranArr = [];
for (let i = 1; i <= 7; i++) {
ranArr.push(Math.round(Math.random() * 70) + 30); // 30~100
}
return ranArr;
}
// 버튼 눌렀을 때 실행
function fChg() {
//값 재 할당!
mChart.data.datasets[0].data = fRanArrData();
mChart.data.datasets[1].data = fRanArrData();
//chart.js에서 가장 중요한 메소드, 다시 그려랑(re rendering)
mChart.update();
}
let isToggle = false;
function fChgType() {
// 오직 bar와 line만 믹스 가능(생각해 보면 그냥 이해됨)
if (isToggle) {
mChart.data.datasets[0].type = "bar";
mChart.data.datasets[1].type = "line";
} else {
mChart.data.datasets[0].type = "line";
mChart.data.datasets[1].type = "bar";
}
mChart.update();
isToggle = !isToggle;
}
const ctx = document.querySelector('#myChart');
const mChart = new Chart(ctx, {
type: 'bar', // bar, line, pie, doughnut, radar 등등...
data: {
labels: ['구두', '스니커즈', '캔버스화', '워커', '운동화', '크록스', '샌들'],
datasets: [
{
label: '작년 매출',
data: [10, 19, 13, 15, 12, 13, 9],
borderWidth: 1,
},
{
label: '올해 매출',
data: [9, 14, 10, 19, 22, 11, 16],
borderWidth: 1
}
]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
// mChart에 담긴 값 확인, 누느로 꼬옥 화긴하장!
console.log("labels:", mChart.data.labels);
console.log("labels:", mChart.data.datasets[0]);
console.log("labels:", mChart.data.datasets[1].label);
console.log("labels:", mChart.data.datasets[1].data);
</script>
</body>
</html>
실행해 보았다면 "오호" 라는 말과 함께 저절롱 뼈속까지 느낌이 온당.
update() 메소드는 차트를 다시 그려랑(rendering) 명령이당. 넘 편하당.
bar 타입과 line타입은 믹스가 가능하당!
데이터 갯수를 늘릴때는 labels(label아님)의 값 갯수를 늘려야 맞추어 나온당.
분명 느낌이 왔을거라고 믿어본당!
이제 기본이 되었으닝, 확장은 당신 몫이당!(당신은 아주 뛰어나당!)
보너스로 위 차트를 수평(horizontal) 차트로 맹그는 법을 보장
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chart.js 샘플페이징</title>
<!-- chart.js 설치 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<button onclick="fChg()">여러번 눌러방</button>
<button onclick="fChgType()">Type Mix</button>
<!-- 차트 크기는 부모 크기를 조절하면 거기에 맞게 자동으로 맹글어짐-->
<div style="width:600px;height:300px;border:2px solid black">
<!-- 차트 그릴 위치 지정 canvas webGL(그래픽엔진) 사용 -->
<canvas id="myChart"></canvas>
</div>
<script>
// 7개 랜덤데이터 배열 리턴 함수
function fRanArrData() {
let ranArr = [];
for (let i = 1; i <= 7; i++) {
ranArr.push(Math.round(Math.random() * 70) + 30); // 30~100
}
return ranArr;
}
// 버튼 눌렀을 때 실행
function fChg() {
//값 재 할당!
mChart.data.datasets[0].data = fRanArrData();
mChart.data.datasets[1].data = fRanArrData();
//chart.js에서 가장 중요한 메소드, 다시 그려랑(re rendering)
mChart.update();
}
let isToggle = false;
function fChgType() {
// 오직 bar와 line만 믹스 가능(생각해 보면 그냥 이해됨)
if (isToggle) {
mChart.data.datasets[0].type = "bar";
mChart.data.datasets[1].type = "line";
} else {
mChart.data.datasets[0].type = "line";
mChart.data.datasets[1].type = "bar";
}
mChart.update();
isToggle = !isToggle;
}
const ctx = document.querySelector('#myChart');
const mChart = new Chart(ctx, {
type: 'bar', // bar, line, pie, doughnut, radar 등등...
data: {
labels: ['구두', '스니커즈', '캔버스화', '워커', '운동화', '크록스', '샌들'],
datasets: [
{
label: '작년 매출',
data: [10, 19, 13, 15, 12, 13, 9],
borderWidth: 1,
},
{
label: '올해 매출',
data: [9, 14, 10, 19, 22, 11, 16],
borderWidth: 1
}
]
},
options: {
indexAxis:'y', // 요것만 넣으면 수평차트가 됨!
scales: {
x: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>
찾았는강?, options에 한줄 indexAxis:'y' 만 넣어주면 된당(기준 축을 Y로 하겠단의미!)
options: {
indexAxis:'y', // 요것만 넣으면 수평차트가 됨!
scales: {
x: {
beginAtZero: true
}
}
}전에 누가 물었는뎅, 답변하지 못했당.(오늘 괘니 문서를 뒤척였당. ~~ ㅋㅋㅋ)
Chart.js 같이 잘 만들어진(사용법이 직관적이어서 한번 해보는 것만으로 충분한) 라이브러리를
사용하는 것은 마치 새로운 춤(New Dance)을 마구 추는 것 처럼 즐거운 일이당.
XG의 NEW DANCE를 같이 추어 보장!
https://www.youtube.com/watch?v=cQTo9O85Zro
'자바스크립트' 카테고리의 다른 글
| FullCalendar(풀캘린더) 어거지 사용법 (6) | 2023.09.06 |
|---|---|
| 브라우져에서 자바스크립트 Module 사용하당 (0) | 2023.09.06 |
| 노션에 등장 블록 에디터 (editor.js) (0) | 2023.07.30 |
| 혀니 네이버 날씽 가져오깅 (2) | 2023.07.28 |
| 너 참 계산 자알 하여랑~ (1) | 2023.07.28 |
