Chart.js

차트를 그리기 위해 라이브러리를 이용해보았다.
내가 사용한 차트는 line, bar, doughnut 모양이다.

공식문서를 참고해서 작업을 시작해보자.
https://www.chartjs.org/docs/latest/getting-started/

<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를 그릴 수 있다.
하지만 문제가 있다면 디자인에 맞춰야 한다는 것이다.
그냥 있는 그대로 표출만 한다면 5초만에 끝낼 수 있지만 디자인에 맞춰야하다보니 거의 하루종일 공식문서와 스텍오버플로우를 부여잡고 살았다.

그렇다면 내가 마주한 문제들과 해결해나간 과정들을 기록해보려한다.
나중에 다시 사용해야할 때 까먹을까봐 더 지나기 전에 기록해보자!

1. 두 개의 데이터를 하나의 툴팁에 넣기

https://velog.io/@yxxnhx/Chart.js-%EB%91%90-%EA%B0%9C%EC%9D%98-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%A5%BC-%ED%95%98%EB%82%98%EC%9D%98-%ED%88%B4%ED%8C%81%EC%97%90-%EB%84%A3%EA%B8%B0

2. 커스텀 툴팁 만들기

https://velog.io/@yxxnhx/Chartjs-%EC%BB%A4%EC%8A%A4%ED%85%80-%ED%88%B4%ED%8C%81-%EB%A7%8C%EB%93%A4%EA%B8%B0

3. 그래프 안의 그리드를 없애고 x축, y축만 컬러 넣기

https://velog.io/@yxxnhx/Chart.js-%EA%B7%B8%EB%9E%98%ED%94%84-%EC%95%88%EC%9D%98-%EA%B7%B8%EB%A6%AC%EB%93%9C%EB%A5%BC-%EC%97%86%EC%95%A0%EA%B3%A0-x%EC%B6%95-y%EC%B6%95%EB%A7%8C-%EC%BB%AC%EB%9F%AC-%EB%84%A3%EA%B8%B0

4. bar형 그래프 위에 값 넣기

https://velog.io/@yxxnhx/Chart.js-bar%ED%98%95-%EA%B7%B8%EB%9E%98%ED%94%84-%EC%9C%84%EC%97%90-%EA%B0%92-%EB%84%A3%EA%B8%B0

5. 그래프에 좌우 스크롤 넣기

https://velog.io/@yxxnhx/Chart.js-%EA%B7%B8%EB%9E%98%ED%94%84%EC%97%90-%EC%A2%8C%EC%9A%B0-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EB%84%A3%EA%B8%B0

6. 데이터 조건에 따라 그래프 새로 그리기

https://velog.io/@yxxnhx/Chart.js-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A1%B0%EA%B1%B4%EC%97%90-%EB%94%B0%EB%9D%BC-%EA%B7%B8%EB%9E%98%ED%94%84-%EC%83%88%EB%A1%9C-%EA%B7%B8%EB%A6%AC%EA%B8%B0

7. 그래프 스크롤에 따른 툴팁 에러 해결하기

https://velog.io/@yxxnhx/Chart.js-%EA%B7%B8%EB%9E%98%ED%94%84-%EC%8A%A4%ED%81%AC%EB%A1%A4%EC%97%90-%EB%94%B0%EB%A5%B8-%ED%88%B4%ED%8C%81-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0

8. CANVAS is already in use 에러 해결하기

https://velog.io/@yxxnhx/Chart.js-CANVAS-is-already-in-use-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0