대시보드 페이지를 퍼블리싱하면서 차트를 만지작 해야하는 순간이 왔다.
지난 번에는 굉장히 얕게 파악을 해서 완전 새로 다시 파보는거나 다름없던 chart.js !
이번엔 개발자분들의 도움을 받아 데이터를 뿌리면서 화면을 그리다보니
다른 부분도 좀 더 공부가 됐다😊
무튼 나중에도 수월하게 사용하기 위해 chart.js 사용법 기록하기🥸
시작
프로젝트 특성을 고려해 cdn, install 등 상황에 맞는 방법을 적용하면 된다.
// cdn
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>차트삽입
차트를 넣을 영역에 canvas 태그를 넣어주시고 스크립트 태그 안에 차트를 불러온다.
반응형 작업을 위해 이미 크기가 정의된 컨테이너 안에 넣어주시면 좋다.
<div class="chartWrap">
// id 값은 원하는대로 지정해주어도 됩니다.
<canvas id="myChart"></canvas>
</div>
<script>
// 선언한 id값을 입력합니다.
const ctx = document.getElementById('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],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>차트 타입별 예시
차트를 그려내는 각각 옵션이 무엇을 의지하는지 정리해보기.
Bar(X축)
const ctx = document.getElementById('myChart');
new Chart(ctx, {
// 차트를 어떤 모양으로 그려낼지 정의합니다.
type: 'bar',
data: {
// 차트에 들어온 데이터 각각의 이름을 정의합니다.
// 직접 데이터를 넣어야한다면 아래와 같은 배열로 필터링해 넣어주면 됩니다.
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
// 어떤 데이터를 지칭하는지 정의합니다.
label: '데이터1',
// 데이터 수치를 나타내기 위한 값들을 넣습니다.
// 직접 데이터를 넣어야한다면 아래와 같은 배열로 필터링해 넣어주면 됩니다.
data: [1,2,3,4,5,6],
// 데이터의 시각적 색상을 지정합니다.
backgroundColor: "pink",
// 데이터의 border 두께를 정합니다.
borderWidth: 3,
// border 컬러를 지정합니다.
borderColor: '#e64c65',
}
]
},
options: {
plugins: {
legend: {
// label의 노출여부를 정합니다.(기본값은 true)
display: true,
// label의 위치값을 지정합니다.(top, bottom, right, left)
position: 'bottom',
labels: {
// label의 컬러를 지정합니다.
color: '#e64c65',
}
},
}
}
});특정 속성 명세참고
위 코드의 결과물예시🤓
Bar(Y축)
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: '데이터2',
data: [10,2,3,4,5,6],
// 각 데이터의 컬러를 배열안에 넣어 지정할 수 있습니다.
backgroundColor: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
}
]
},
options: {
// 차트의 축을 지정합니다. 기본값은 'x'이며 bar, line차트에서만 유효합니다.
indexAxis: 'y',
plugins: {
legend: {
display: true,
},
},
scales: {
y: {
ticks: {
// y축 폰트컬러를 설정합니다.
color: "red",
},
},
x : {
ticks: {
// x축 폰트컬러를 설정합니다.
color: "blue",
},
}
}
}
});특정 속성 명세참고
위 코드의 결과물예시🤓
Line
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: '라인차트',
data: [1,4,3,6,2,5],
backgroundColor: 'rgba(230, 76, 101, 0.5)',
borderWidth: 1,
borderColor: 'green',
// 포인트위치의 스타일을 지정합니다.
pointStyle: 'rect',
// 포인트의 크기를 지정합니다.
pointRadius: 10,
// 포인트에 마우스오버를 하면 커지는 크기를 지정합니다.
pointHoverRadius: 15
}
]
},
options: {
plugins: {
legend: {
display: false,
},
},
scales: {
y: {
ticks: {
color: "gray",
},
grid: {
// 눈금선 노출여부를 결정합니다. 기본값은 true입니다.
display: false,
}
},
x : {
ticks: {
color: "gray",
},
grid: {
// 눈금선의 두께를 지정합니다.
lineWidth: 3,
}
}
}
}
});특정 속성 명세참고
위 코드의 결과물예시🤓
doughnut
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: '도넛차트',
data: [1,4,3,6,2,5],
backgroundColor: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
borderWidth: 1,
}
]
},
options: {
layout : {
// 도넛차트의 내부 여백을 지정합니다. 방향지정도 가능합니다.
padding: 80,
},
plugins: {
legend: {
position: 'top',
},
title: {
// 도넛차트의 타이틀이름 노출여부를 지정합니다. 기본값은 true입니다.
display: true,
// 도넛차트의 타이틀을 지정합니다.
text: '도넛차트입니다.',
// 차트 타이틀의 위치를 수정할 때 사용합니다.
align: 'start',
// 차트 타이틀의 컬러를 수정할 때 사용합니다.
color: 'red',
font: {
// 타이틀의 폰트를 수정할 때 사용합니다.
size: 20,
}
}
}
}
});위 코드의 결과물예시🤓
차트에 플러그인 사용하기
차트에 플러그인을 사용해 스타일 기능을 확장 할 수 있다. 그 중에서도 데이터를 호버하지 않고도 값을 표기하는 법을 알아보자. (해당 글은 script태그를 사용해 불러오는 법 기준으로 설명)
// 기존의 chart.js cdn외에 추가 cdn을 연결해 주어야 합니다.
// chart.js cdn주소 하단에 등록해주세요.
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>// 여기는 script 영역입니다. 필수 추가요소를 넣어주세요
/*
* script 태그를 통해 플러그인을 불러올 경우 전역에 반드시 해당 선언을 해주어야 합니다.
*/
Chart.register(ChartDataLabels);
new Chart(ctx, {
차트코드...
}데이터 값 노출하기(도넛차트 기준으로 작성!)
const ctx = document.getElementById('myChart');
Chart.register(ChartDataLabels);
new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: '도넛차트',
data: [1,4,3,6,2,5],
backgroundColor: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
borderWidth: 1,
}
]
},
options: {
plugins: {
legend: {
position: 'left',
labels: {
color: 'green'
}
},
title: {
display: false,
},
// 불러온 플러그인 속성을 지정해줍니다.
datalabels: {
// 노출되는 데이터 값의 색상을 지정합니다.
color: '#fff',
font : {
// 폰트 사이즈를 지정합니다.
size: 20,
// 폰트 스타일을 지정합니다.
family: "'SCoreDream'",
}
}
}
}
});위 코드의 결과물예시🤓
노출된 데이터 값 스타일링하기
const ctx = document.getElementById('myChart');
Chart.register(ChartDataLabels);
new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: '도넛차트',
data: [1,4,3,6,2,5],
backgroundColor: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
borderWidth: 0,
}
]
},
options: {
layout: {
// 데이터값 노출 스타일링을 할때에는 값이 잘리므로 패딩값을 주는것을 권장합니다.
padding: 80,
},
plugins: {
legend: {
display: false,
},
title: {
display: false,
},
datalabels: {
formatter: function(value, context) {
// 단순히 값만이 아닌 label과 값을 함께 불러오고 단위를 지정해줄 수도 있습니다.
return context.chart.data.labels[context.dataIndex] + ':\n ' + value + '%';
},
// 값의 위치를 원하는 방향으로 정렬합니다.
textAlign: 'right',
// 값의 위치를 조정합니다. 차트별로 위치가 다르니 명세를 참고하세요.
anchor: 'end',
// 값의 위치를 조정합니다. 이 역시 명세를 참고하세요.
align: 'end',
// 값의 위치를 조정합니다. 이 역시 명세를 참고하세요.
offset: 10,
// 각각의 배경색을 배열로 지정할 수 있습니다.
backgroundColor: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
// border-radius값을 지정합니다.
borderRadius: 5,
color: '#fff',
font : {
size: 12,
family: "'SCoreDream'",
}
}
}
}
});- options > plugins > datalabels > formatter
- options > plugins > datalabels > textAlign
- options > plugins > datalabels > anchor
- options > plugins > datalabels > align
- options > plugins > datalabels > offset
위 코드의 결과물예시🤓
padding의 필요성을 시각적으로 확인하기 위해 차트를 감싼 태그에 배경색을 주었습니다.
이밖에도 다양한 커스텀을 필요로 한다면!
필기하고 기록하고