chartjs 사용하기

이전 글에서 만들었던 대시보드

여기서 보이는 저 꺾은선그래프와 막대그래프는 직접 만든 코드는 아니다.

그러나 데이터만 조금조금 수정하면 바로 뚝딱 만들어주는 사이트가 있다.

Chart.js

https://www.chartjs.org/ 이곳이 공식 사이트.

꺾은선, 막대, 파이, 버블 등 다양한 차트를 생성해주는 사이트다.

들어가자마자 get started에 들어가 cdn찾아 자기 코드에 연결해주면 반은 끝난다.

---

기본적인 형태는 자신의 js파일에

 var myChart = new Chart(
    document.getElementById('myChart'),
    config
  );

를 삽입하는 것으로 시작!
여기서 보이는 config에 차트의 옵션들이 담긴 객체를 삽입하는 것이다.

그건 어디서 찾냐 하면?
Chart Type메뉴에서 원하는 그래프형태를 찾아 그 하단에서 살펴보자

get started를 들어갔다면 저 메뉴가 보일 것이다.
형광펜 친 메뉴에 들어가 원하는 차트를 골라보자.

들어가면 크게 그래프가 있고 하단에 이런 게 있을 것.
저 congif탭과 setup탭에 있는 코드를 자신의 js코드에 삽입하면 된다.

이 위에있는 내용대로 넣어보자.

const config = {
  type: 'line',
  data: data,
  options: {}	//추가 옵션이 있을 경우
};

이 config변수에 할당된 객체를 저 위의 config에 삽입해도 된다.

대충 해석해보면 line 타입 의 그래프이고 data부분엔 당연히 그래프에 사용될 데이터들이 들어갈 것.
저 data는 이제 setup탭에서 확인해보면 있다.

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [{
    label: 'My First Dataset',
    data: [65, 59, 80, 81, 56, 55, 40],
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1
  }]
};

---

최종적인 코드 형태는 아래처럼

var myChart = new Chart(
    document.getElementById('myChart'),
    {
    type: 'line',
    data: {
        labels: "라벨이름들 입니다",
        datasets: [{
            label: 'My First Dataset',
            data: [65, 59, 80, 81, 56, 55, 40],
            fill: false,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
        }]
    },
    options: {}	//추가 옵션이 있을 경우
   }
);

이렇게 해도 좋다! (따로 쓸 사람은 따로 나눠써도 괜찮을 듯?)



직접 써봐야 저 하나하나의 속성들이 뭘 정의하는 지 알 것이다
(data는 차트에 나타낼 데이터일 것이고 fill이나 borderColor는 디자인일 것이고 등등)

어렵지 않게 손 쉽게 차트를 생성 가능한 것과 반응형 조절도 가능하다는 점이 꽤 좋았었다.

대시보드를 만들거나 자신만의 통계 화면을 만들어 보거나...
다양한 상황에서 잘 적용하면 멋진 화면을 만들 수 있어 보인다.