Chart.js 어떻게 사용하지?

https://www.chartjs.org/docs/latest/
사이트를 대강 훑어봤다.
기본 구조는 기본 html 스니펫에 (VSCode에 ! + Enter 하면 나오는)
밑에 내용을 body에 추가하면 된다. (지금은 config 변수가 없어서 실행하면 에러 뜬다.)

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

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

<script>
  const ctx = document.querySelector('#myChart');
  new Chart(ctx, config);
</script>

Chart.js, D3.js는 canvas 기반이다.
그래서 역시 태그는 canvas 하나만 적어주면 된다.
ctx는 context 줄인말이다.
요소를 가져오고, new Chart()로 인스턴스를 생성했을 뿐인데, 왜 차트가 그려지는가? Chart.js를 더 깊게 파봐야 알 듯하다.

const a = new Chart(ctx, config);

이렇게 해도 잘 그려진다.

https://www.chartjs.org/docs/latest/charts/bar.html 여기서 Config, Setup 코드 다 긁어와서 실행했다. 에러가 뜬다.

Uncaught ReferenceError: Utils is not defined

Utils가 정의되지 않았다고 한다.

Ctrl + F 누르고, Utils 다 찾아본다.
어디에도 선언된 적 없다..!

사이트에서 단서를 못 찾아, 깃헙에 들어갔다. 파일명에 검색해보니 Utils.md가 있다.
Utils 파일에는 ~가 있고, 바뀔 수 있으니 프로덕션 환경에 사용하지 말라고 한다.
실제로 사용할 땐 Utils.이 들어가는 데에 딴 걸 넣어야 하나 보다.

위 링크의 코드엔

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  // 중략
};

여기에만 사용되고 있었다.
Getting Started - Getting Started 페이지를 보니,
labels 프로퍼티의 값은 배열로 주고 있다.

labels: ['Red', 'Blue', 'Yellow', 'Green']

labels 상수에 배열을 할당하니, 잘 동작한다.