Chart.js 적용법과 특징

이번 국비 최종 프로젝트 관리자 페이지에

메인 페이지에 차트로 대시보드로 보이도록 만들 예정이라 Chart.js 관련을 찾아보고자 찾아보았다.

적용법과 특징을 확인해서 작성해둔다.

 

Chart.js 특징

1. 간단하게 사용가능

사용자 친화적인 API를 제공

쉽게 차트를 생성하고 구성가능

 

2. 다양한 차트 유형

Chart.js는 다양한 차트 유형을 지원

차트 유형으로는 선 그래프, 막대 그래프, 원형 그래프, 꺾은선 그래프 등

 

3. 반응형 디자인

Chart.js는 반응형 디자인을 지원하여 다양한 디바이스와 화면 크기에 맞춰 차트가 자동으로 조정

 

4. 상호작용 가능

사용자가 차트를 클릭하거나 마우스 오버 이벤트 처리가능

사용자가 차트에 대한 추가 정보를 얻고 특정 데이터 강조 가능

 

5. 가벼운 라이브러리

Chart.js는 가벼운 라이브러리로 로딩 속도가 빠름

 

6. 오픈소스

Chart.js는 MIT 라이선스로 배포되어 있어 무료 사용이 가능

 

2. 적용법

CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.min.js" integrity="sha512-L0Shl7nXXzIlBSUUPpxrokqq4ojqgZFQczTYlGjzONGTDAcLremjwaWv5A+EDLnxhQzY5xUZPWLOLqYRkY0Cbw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

 

Spring, jsp 등을 사용하기 위해 Script cdn 으로 적용하기로 했다.

 

3. 샘플 적용해보기.

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  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>

 

 

 

이외에도 여러 차트가 있다 아래는 Chart.js 를 지원하는 사이트이다.

https://www.chartjs.org/

Chart.js

https://www.chartjs.org/docs/latest/

Chart.js | Chart.js