커리큘럼 상에 시각화 도구는 없습니다. 간단하게 방향성만 잡아드리기 위해 넣은 예제입니다.
여기 명시된 것 말고도 Plotly, Google Chart, leaflet 등이 더 있습니다.
이력서를 받아보았을 때 시각화 경험을 묻는 경우가 많아 준비한 것입니다.
chartjs 내용이 좀 더 궁금하시다면 아래 영상을 참고해주세요.
Canvas 내용이 더 궁금하다면 아래 영상을 참고해주세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="<https://cdn.jsdelivr.net/npm/chart.js>"></script>
<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet">
</head>
<body>
<!-- 1. 기본 chartjs 셈플 -->
<!-- 2. chartjs.html -> AdminLTE 사이트 셈플 -->
<!-- 3. livecorona sample -->
<div class="container">
<div class="row">
<div class="col-md-6">
<canvas id="myChartOne"></canvas>
</div>
<div class="col-md-6">
<canvas id="myChartTwo"></canvas>
</div>
<div class="col-md-6">
<canvas id="myChartThree"></canvas>
</div>
<div class="col-md-6">
<canvas id="myChartFour"></canvas>
</div>
</div>
</div>
<script>
const labels = [
'1월',
'2월',
'3월',
'4월',
'5월',
'6월',
];
const data = {
labels: labels,
datasets: [{
label: '월별 매출액 현황(억원)',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [1, 2, 5, 2, 2, 3, 4],
}]
};
const data2 = {
labels: labels,
datasets: [{
label: '월별 매출액 현황(억원)',
backgroundColor: ['red', 'green', 'blue'], // rgba(255, 0, 0, 0.5), #000000
borderWidth: 5,
borderColor: 'black',
hoverBorderWidth: 8,
data: [1, 2, 5, 2, 2, 3, 4],
}]
};
const data3 = {
labels: labels,
datasets: [{
label: '월별 매출액 현황(억원)',
backgroundColor: ['red', 'green', 'blue'], // rgba(255, 0, 0, 0.5), #000000
borderWidth: 5,
borderColor: 'black',
hoverBorderWidth: 8,
data: [1, 2, 5, 2, 2, 3, 4],
}]
};
const data4 = {
labels: labels,
datasets: [{
label: '월별 매출액 현황(억원)',
backgroundColor: ['red', 'green', 'blue', 'pink', 'dodgerblue', 'gray', 'hotpink'], // rgba(255, 0, 0, 0.5), #000000
borderWidth: 5,
borderColor: 'black',
hoverBorderWidth: 8,
data: [1, 2, 5, 2, 2, 3, 4],
}]
};
const config = {
type: 'line', //pie, line, doughnut, polarArea...
data: data,
options: {}
};
const config2 = {
type: 'bar', //pie, line, doughnut, polarArea...
data: data2,
options: {}
};
const config3 = {
type: 'bar', //pie, line, doughnut, polarArea...
data: data3,
options: {
plugins: {
title: {
display: true,
text: '매출액!!',
color: 'red',
position : 'bottom',
padding: {
top: 10,
bottom: 30
}
},
legend: {
display: true,
position: 'right',
labels: {
color: 'blue'
}
}
}
}
};
const config4 = {
type: 'pie', //pie, line, doughnut, polarArea...
data: data4,
options: {}
};
</script>
<script>
const myChartOne = new Chart(
document.getElementById('myChartOne'),
config
);
const myChartTwo = new Chart(
document.getElementById('myChartTwo'),
config2
);
const myChartThree = new Chart(
document.getElementById('myChartThree'),
config3
);
const myChartFour = new Chart(
document.getElementById('myChartFour'),
config4
);
</script>
</body>
</html>
Canvas는 HTML5부터 지원되었습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas tutorial</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
// 태그 선택
const canvas = document.getElementById('canvas');
// 캔버스에서 어떻게 그릴지(랜더링) 컨텍스트를 받아옵니다.
const ctx = canvas.getContext('2d');
// 그림을 그려줍니다.
function drawRect(ctx){
// x, y 좌측 상단 기준 x, y 좌표
// w는 넓이, h는 높이
let x = 10,
y = 50,
w = 200,
h = 100;
ctx.fillStyle = 'green';
ctx.fillRect(x, y, w, h);
}
drawRect(ctx);
</script>
</body>
</html>
실행결과
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas tutorial</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
// 태그 선택
const canvas = document.getElementById('canvas');
// 캔버스에서 어떻게 그릴지(랜더링) 컨텍스트를 받아옵니다.
const ctx = canvas.getContext('2d');
// 그림을 그려줍니다.
function drawRect(ctx){
// x, y 좌측 상단 기준 x, y 좌표
// w는 너비, h는 높이
let x = 10,
y = 50,
w = 100,
h = 100;
ctx.fillStyle = 'green';
ctx.fillRect(x, y, w, h);
}
// drawRect(ctx);
function 삼각형(ctx){
//점을 하나씩 찍는 방식입니다. moveTo, lineTo를 바꾸면 삼각형 모양이 바뀝니다
ctx.beginPath()
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fillStyle = 'red';
ctx.fill();
}
삼각형(ctx);
</script>
</body>
</html>
실행결과
참고사이트 : https://github.com/zziuni/d3/wiki/Gallery (공식 D3의 한국어 번역)
https://github.com/d3/d3/blob/main/API.md (API 전체)