728x90
문제 상황
사이트를 리뉴얼하면서 중요 페이지 중 핸드폰 시세를 알려주는 페이지가 있었다. 그리고 이 페이지는 핸드폰 시세를 그래프 형식으로 보여주기로 되어있었는데 그래프를 어떻게 그려야할 지 참 막막했다. 그래서 구글링하다 발견한 chart.js!
사용법을 잘 이해하면 참말로 유용한 녀석이다!
아래 공식문서 사이트 참조!(공식문서가 꽤나 친절한편..ㅎㅎ)
chart.js 세팅하기
1️⃣설치하기
설치하는 방법이 총 3가지 있다.
- npm
- GitHub releases
- Chart.js CDN
👉🏻나는 가장 편한 CDN을 이용하도록 하겠다ㅎㅎ 아래처럼 script만 적으면 된다!
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
👉🏻현재 기준 가장 최신 버전이다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
👉🏻이건 당시 내가 작성했던 옛날 버전! 최신 버전을 추천한다ㅎ
2️⃣HTML 기본 코드
<canvas id="myChart" width="400" height="400"></canvas>
👉🏻chart.js는 canvas tag를 이용한다. id와 너비, 높이는 본인 상황에 맞게 지정해준다.
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>
👉🏻공식문서에 있는 예시 코드이다!
✍🏻new Chart를 통해 차트를 생성한다.
- type: 차트 종류를 지정한다. bar, bubble, doughnut, line등 종류가 다양하다.
- data: 차트 데이터를 넣어준다.
- labels: 축제목이다.
- datasets: 각 축에 들어갈 데이터를 넣어주고 색이나 두께 같은 꾸밈 요소도 지정할 수 있다.
- options: 차트 모양을 꾸밀 수 있다. 다양한 옵션이 있는데 후에 포스팅에서 더 자세히 소개하겠다!
👉🏻해당 데이터를 바탕으로 잘 출력되는 그래프!
🐰여기까지 chart.js 기본 끝!
728x90
'그 땐 IT활동했지 > 그 땐 영일영 근무했지' 카테고리의 다른 글
[010/JS Library] chart.js | 범례 커스텀하기(3.7.1 version) (0) | 2022.03.21 |
---|---|
[010/JS Library] chart.js | 범례 커스텀하기(2.4.0 version) (0) | 2022.03.20 |
[010/Django] django-import-export | Widget | ManyToManyWidget (0) | 2022.03.14 |
[010/Django] django-import-export | Widget | DateTimeWidget (0) | 2022.03.12 |
[010/Django] django-import-export | Widget | ForeignKeyWidget (0) | 2022.03.11 |