본문 바로가기

그 땐 IT활동했지/그 땐 영일영 근무했지

[010/JS Library] chart.js | 기본적인 사용법

728x90

문제 상황

사이트를 리뉴얼하면서 중요 페이지 중 핸드폰 시세를 알려주는 페이지가 있었다. 그리고 이 페이지는 핸드폰 시세를 그래프 형식으로 보여주기로 되어있었는데 그래프를 어떻게 그려야할 지 참 막막했다. 그래서 구글링하다 발견한 chart.js!

사용법을 잘 이해하면 참말로 유용한 녀석이다!

 

아래 공식문서 사이트 참조!(공식문서가 꽤나 친절한편..ㅎㅎ)

https://www.chartjs.org/

 

Chart.js | Open source HTML5 Charts for your website

New in 2.0 New chart axis types Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease.

www.chartjs.org

chart.js 세팅하기

1️⃣설치하기

설치하는 방법이 총 3가지 있다.

  1. npm
  2. GitHub releases
  3. 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