2020. 7. 29. 00:02ㆍ캐리의 데이터 세상/캐리의 데이터 공부 기록
파이썬/pandas/numpy/matplotlib 등으로 데이터 추출, 전처리, 그래프를 Jupyter로 만든걸 flask를 통해서 웹페이지로 구축하는 단기 프로젝트를 진행중에 오늘 처음 접한 Chart.js 훨씬 그래프가 웹에서 시각적으로 보기도 좋고 선명해서 좀더 디테일하게 문법을 파봐야 겠습니다.
간단하게 html로 기본 포맷만 만들어서 script 한번에 적용시킨 코드입니다. js 파일로 그래프마다 따로 빼서 해도 무방하겠으나 오늘 처음 접한 만큼 글자 사이즈, 색깔 고치고 x축, y축,라벨 수정 정도만 적용시켜 보았습니다. 팀플 할때는 Bootstrap으로 페이지 디자인 해놓고 그래프가 들어갈 자리를 만들어 놓은 상태에서 Chart.js 적용했었는데요 연습코드를 올리는 터라 아무런 효과 안준 기본 코드인점 참고해주세요!
Chart.js 개요
구글에서 chart.js 키워드와 함께 적용시키고 싶은 효과를 영어로 검색하면 정말 많은 코드들이 결과그래프와 함께 나오는데요, 공식문서도 참고하시고 구글링으로 표현하고 싶은 그래프들 만들어보세요! 예시라서 숫자값 그대로 몇 개만 집어 넣었습니다.
제 블로그 희망 방문자 수를 월별로 표시해 봤습니다(어디까지나 희망사항).
저는 막대별로 색깔을 다르게 주고 (나름 투명도와 윤곽선도 설정), label과 labels 색상도 변경, 타이틀 폰트 사이즈 및 y축 최소값 지정 등을 옵션에 추가했습니다.
Chart.js 로 그래프 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 캐리의 데이터 세상</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</head>
<body>
<div class="main">
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
<canvas id="test1"></canvas>
</div>
<script>
var ctx = document.getElementById('test1').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'bar',
// The data for our dataset
data: {
labels: ['7월', '8월', '9월', '10월', '11월', '12월'],
datasets: [{
label: '티스토리 블로그 희망 방문자 수',
backgroundColor: [
'rgba(255, 99, 132, 0.5)',
'rgba(54, 162, 235, 0.5)',
'rgba(255, 206, 86, 0.5)',
'rgba(75, 192, 192, 0.5)',
'rgba(153, 102, 255, 0.5)',
'rgba(255, 159, 64, 0.5)'],
borderColor: ['rgb(255, 99, 132,1.5)',
'rgba(54, 162, 235, 1.5)',
'rgba(255, 206, 86, 1.5)',
'rgba(75, 192, 192, 1.5)',
'rgba(153, 102, 255, 1.5)',
'rgba(255, 159, 64, 1.5)'],
data: [1000, 1600, 2700, 3400, 4900, 6000]
}]
},
// Configuration options go here
options: {
title: {
display: true,
text: '★방문해 주셔서 감사합니다★',
fontSize: 30,
fontColor: 'rgba(46, 49, 49, 1)'
},
legend: {
labels: {
fontColor: 'rgba(83, 51, 237, 1)',
fontSize: 15
}
},
scales: {
xAxes: [{
ticks: {
fontColor: 'rgba(27, 163, 156, 1)',
fontSize: '15'
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
fontColor: 'rgba(246, 36, 89, 1)',
fontSize: '15'
}
}]
}
}
});
</script>
</div>
</div>
</body>
</html>
색상값은 사이트 참고 사이트 바로가기 에서 색상 보고 마음에 드는 걸로 골랐는데요, type 에 가장 간단한 Bar로 표현해 본 그래프라 Pie도 넣어 보시고 변수가 3개 이상이라면 다차원 그래프도 만들어 보시길.
Chart.js 주요사항
- <head></head> 사이에 Chart.js 기본 링크 입력 (
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>- 그래프 넣을 위치에 <canvas id=""> 선언하기. 각 그래프별로 고유 id값을 지정해 주고 구분해서 편집! "myChart"부분에 원하는 id값을 넣어줍니다.
<canvas id="myChart"></canvas>- type에 그래프 종류만 바꿔주면서 나머지 옵션들은 정리해 주면 되는데요, 공식문서에 나와있는 이 폼에서 각종 효과들 주면서 연습해 보기
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
// Configuration options go here
options: {}
});- labels 리스트 값과 data 값 개수가 같은지 확인!
- 중괄호, 대괄호 등등 괄호 열고 닫기 쌍 맞춰지는지 확인! (하나라도 안맞으면 바로 오류가ㅠㅠ)
'캐리의 데이터 세상 > 캐리의 데이터 공부 기록' 카테고리의 다른 글
| 군집화 (Clustering) (0) | 2020.08.25 |
|---|---|
| 랜덤 포레스트 (Random Forest) 정리 (0) | 2020.08.15 |
| 비전공자 머신러닝 혼자 공부하기 커리큘럼(feat.선형대수) (0) | 2020.08.13 |
| 머신러닝(Machine Learning) 분류 (0) | 2020.08.10 |
| Python 프레임워크 - Flask (0) | 2020.07.14 |
| 데이터베이스 - SQLite / MariaDB / ORACLE (0) | 2020.07.13 |
| 비전공자 데이터 공부 입문 - 학습 사이트 정리 (0) | 2020.07.08 |