2023-09-12(화)
1. CASE
데이터가 표로만 나타나 있는 화면에 차트를 넣었어야 했다.
수많은 차트 라이브러리 중, 동적이고 interactive 하게 데이터를 시각화할 수 있는 chart.min.js를 사용하기로 했다.
2. How to Use
*참고 ) https://www.chartjs.org/ https://www.chartjs.org/docs/latest/ - 공식 사이트
1) 세팅
다양한 세팅 방법 중, GitHub에 올라와 있는 라이브러리를 releases 하여 사용했다.
2) HTML 기본 코드 (*공식 사이트 참고)
<canvas id="myChart" width="1200" height="400"> </canvas>
*차트의 크기를 반응형으로 설정하고 싶다면 아래와 같이 사용하면 된다.
<canvas id="myChart" style="height:40vh; width:80vw"> </canvas>
3) JavaScripts 기본 코드 (*공식 사이트 참고)
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const 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 : {
y : {
beginAtZero : true
}
}
}
});
</script>
간단하게 설명을 해보자면,
① 그릴 canvas 가져오기
const ctx = document.getElementById('myChart').getContext('2d');
② 차트 기본 색상 지정
backgroundColor : [ ]
borderColor : [ ]
'rgba(255, 99, 132, 0.2)' // 여기서 맨 뒤 0.2는 투명도
// *참고 ) 그래프 랜덤 컬러 지정하는 법
var arrRgb = new Array(); // 전체 색상을 담을 변수
var arrRgb_1 = new Array(); // 첫 번째 색상을 담을 변수
var arrRgb_2 = new Array(); // 두 번째 색상을 담을 변수
var arrRgb_3 = new Array(); // 세 번째 색상을 담을 변수
arrRgb_1.push(Math.floor(Math.random() * 255 + 1));
arrRgb_2.push(Math.floor(Math.random() * 255 + 1));
arrRgb_3.push(Math.floor(Math.random() * 255 + 1));
arrRgb.push('rgba(' + rgb_arr_1 + ',' + rgb_arr_2 + ',' + rgb_arr_3 + ',.85)');
3. Used Code (보안상 코드를 각색함)
var ctx = document.getElementById('myChart').getContext('2d');
var arrRgb = new Array();
arrRgb.push("rgb(255, 230, 153, .60)", "rgb(255, 211, 79)"); // 금액, 비율
var arrLabel = new Array(); // 그래프에 보여줄 라벨 배열
var arrData1 = new Array(); // 그래프에 보여줄 데이터1 배열 : 금액
var arrData2 = new Array(); // 그래프에 보여줄 데이터2 배열 : 비율
var totalCnt = parseInt(result.list.length - 1); // 총 건수
// SP에서 받아온 값 배열에 push
for (let i = 0; i < result.list.length - 1; i++) {
arrLabel.push(result.list[i].LABEL); // 라벨
arrData1.push(result.list[i].CNT); // 금액
arrData2.push(result.list[i].RATE); // 비율
}
// 차트 그리기
var labels = arrLabel;
var data = {
labels : labels,
datasets : [
{
label : '금액',
data : arrData1,
borderColor : arrRgb[0],
backgroundColor : arrRgb[0],
stack : 'combined',
type : 'bar'
},
{
label : '비율',
data : arrData2,
borderColor : arrRgb[1],
backgroundColor : arrRgb[1],
stack : 'combined',
type : 'line'
}
]
};
4. Reviewww
입사 후, 첫 업무였다.
기본 코드를 활용해 직접 하나하나 적용해 봄으로써 데이터를 좀 더 시각적으로 나타낼 수 있다는 점이 흥미로웠다.
차트뿐만 아니라 라이브러리들은 다양한 기능이 있는 만큼 이것저것 건드려보는 게 좋은 것 같다는 생각이 들었다.