JavaScript 차트 플러그인 Chartjs

PARKSM3095·2023년 3월 28일

plugin

목록 보기

1/1

회사 고도화 프로젝트 작업을 하면서 Chartjs 를 접하게 되었다.
사용해보니 매우 유용하고 부드러운 자바스크립트 차트 플러그인 이다.

Chartjs

<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, {
  	plugins: [ChartDataLabels],
    type: 'bar', // 'bar', 'bubble', 'doughnut','line','polarArea','radar','scatter'
    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>

Chartjs 는 canvas에 javascript 기반으로 차트를 그리는 형식이다.
여러가지 custom이 가능하며 chartjs datalabels plugin를 이용한 유연한 data를 표현할 수 있다.

Chartjs 구성

type , data , options 로 구성이 되어있다.

- type

차트에 보여지는 막대요소 스타일을 선정한다.

bar / bubble / doughnut / line / polarArea / radar / scatter

- data

차트를 그릴 때 필요한 data를 넣는다.

labels : 차트의 구성 데이터들의 제목
datalabels.label : 차트의 타이틀
datalabels.data : 차트의 구성 데이터들의 값
datalabels.borderWidth : 차트 막대의 border값
datalabels.backgroundColor : 배경컬러
datalabels.barThickness : 각 bar의 두께 조절
.....

외에도 다양한 기능이 많습니다.

- options

차트에 다양한 options을 추가해 스타일링과 구성을 만들 수 있다.

indexAxis: 'y' // bar차트를 가로로 변경
maintainAspectRatio: false // false 시 감싼 div의 크기를 무시하고 고정값의 크기를 설정

scales // 차트의 grid 값을 스타일링 
scales.x.display: false // false 시 grid 제거
scales.x.stepSize: 10 // grid 10 간격으로 생성
scales.x.min: 0 // grid 시작점
scales.x.max: 100 // grid 끝나는점

layout // 차트를 감싼 layout 설정
layout.padding.[left, right, top, bottom] // 원하는 값의 padding 혹은 margin 설정가능


plugins // 여러가지 plugin을 담을 수 있는 공간
plugins.datalabels.anchor // datalabels 시작지점 start , center , end 사용가능
plugins.datalabels.align // datalabels 정렬 start , center , end 사용가능
plugins.datalabels.offset // 차트의 bar와 datalabels의 간격 :number
plugins.datalabels.font // datalabels의 폰트 스타일링 family , size , weight 등 설정가능
        formatter: function(value, context) { // datalabels 출력에 추가적인 커스텀을 넣을 수 있다.
          return value + '%';
        }

chart background 에 이미지를 넣어 패턴형식의 그래프를 생성 할 수도 있다.

  let bgGraphImg = new Image(); // img 변수 선언
  bgGraphImg.src = location.origin + 'url'; // img url 연결
  
  bgGraphImg.onload = function() { // img load시 실행시킴
    myChart = new Chart(ctx, {
      plugins: [ChartDataLabels],
      type: 'bar',
      data: {
        datasets: [
          {
            backgroundColor: [ctx.createPattern(bgGraphImg, 'repeat')], // background에 bgGraphImg 를 삽입
            borderColor: '#333',
            borderWidth: 1
          }
        ]
      },
      .....
    }
  }

이 밖에 여러가지 기능들이 많다.
차트에 관련된 기능이 필요하다면 chartjs 만한게 없는거 같다.

PARKSM3095

FrontEnd