이전 해커톤을 할 때 chart.js를 잠깐 쓴적이 있다. 아주 잠깐. 코로나 감염자 api를 이용하여 지역별로 감염된 사람들을 보여주는 간단한 차트였는데
이렇게 현재까지 감염된 사람들을 보여주는 차트였다. 짧은 시간동안 진행하는 해커톤이어서 chart.js를 정확히 이해하고 사용한 것이 아니라 그냥 튜토리얼 정도 보고 따라한 수준이라 나중에 chart.js뿐 아니라 d3.js같은 유명 차트 라이브러리에 대해서 공부해 보고 싶었다. 그리고 그게 오늘이다.
chart라이브러리
chart.js
먼저 chart.js를 봐보자. 이 라이브러리 개발자들의 주장
"Simple yet flexible JavaScript charting for designers & developers"
간단하면서 유연한 자바스크립트 차트 란다. 일단 간단하다는 점에서 복잡한 걸 구현하기엔 힘든건가 라는 생각을 하면서 documentation을 읽어보도록 하자.
소개에서 chart.js는 html5의 canvas를 이용한다고 한다. 그러면 해당 canvas노드를 선택할 selector가 필요하고 또 canvas니까 context를 가져오는 등의 과정이 필요하겠거니 생각한다.
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'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: [
'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: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});chart.js의 documentation에서 볼 수 있는 예제 코드이다. 확실히 좀 직관적인 느낌이다. type은 그래프의 타입을, data는 차트를 그리는 정보들을 나타내고 배열인 것을 보니 label에 그래프에 호버하면 나타날 라벨 정보, datasets는 그래프를 그릴 정보들이 들어갈 것이구나 알수 있다.
datasets는 객체를 요소로 가지는 배열로 구성되어서 label은 이 그래프의 라벨을, data는 그래프를 그릴 데이터, bgc나 border-color는 데이터 배열의 순서에 따라 적용될 스타일이라는 것을 예상해본다. option에서는 글꼴, 애니메이션 등의 css를 설정할 수 있는 파트로 보인다.
여기 까지 대강 느낌은 잡았으니 좀더 깊이 알아보자.
type
chart.js는 다음과 같은 기본 차트 타입을 지원해준다.
line - 선형 type="line"
bar - 막대 type="bar"
radar - 레이더 type = "radar"
doughnut and pie - 도넛,파이 type="doughnut" or type="pie"
polar area - 빙하 같은 느낌 type="polatArea"
bubble - 거품 type="bubble"
scatter - 꺽은 선 그래프 type="scatter";
이런 기본 타입의 그래프에 애니메이션만 조금 추가해주면 유려한 느낌의 데이터 시각화를 해낼 수 있을 것 같다.
구글에 chart라고 쳐서 자주 쓰일 것 같은 차트를 하나 만들어보기로 한다.
이정도면 나름 성공적인 시작이 아닐까 생각한다. 다음은 d3를 공부해보자
