Chart.js로 간단한 차트를 작성하는 방법

데이터 기반 의사 결정이 중요해진 현대 사회에서, 데이터를 효과적으로 시각화하여 사람들이 쉽게 이해할 수 있도록 만드는 것은 매우 중요합니다. 차트와 그래프는 복잡한 정보, 경향 및 패턴을 명확하게 파악하는 데 매우 유용합니다.

본 문서에서는 데이터 시각화를 위한 널리 사용되는 자바스크립트 라이브러리 중 하나인 Chart.js를 활용하여 기본적인 차트를 생성하는 방법을 알아봅니다.

Chart.js란 무엇인가?

Chart.js는 웹 애플리케이션에서 인터랙티브한 차트를 제작할 수 있도록 개발자에게 제공되는 오픈 소스 도구입니다. HTML5 캔버스 요소를 사용하여 차트를 렌더링하므로 최신 브라우저에서 원활하게 작동합니다.

Chart.js의 주요 특징

Chart.js는 다음과 같은 장점을 제공합니다:

Chart.js는 사용하기 쉬운 인터페이스를 제공합니다. 최소한의 코딩으로 시각적으로 매력적이고 상호 작용 가능한 차트를 빠르게 생성할 수 있습니다.
이 라이브러리는 다재다능하며 선, 막대, 원, 레이더 등 다양한 차트 형식을 지원하여 다양한 데이터 표현 요구를 충족시킬 수 있습니다.
Chart.js는 데스크톱과 모바일 장치 모두에서 차트가 잘 보이도록 설계되었습니다. 반응형 디자인으로 다양한 화면 크기에 적응합니다.
Chart.js 차트는 기본 설정을 넘어 광범위한 사용자 정의 옵션을 제공합니다. 개발자는 특정 요구 사항에 맞게 차트를 세밀하게 조정할 수 있습니다.

개발 환경 설정

Chart.js 라이브러리는 다음과 같은 두 가지 방식으로 설정할 수 있습니다:

기본 HTML 구조

차트를 표시하려면 HTML 문서 내에 캔버스 요소가 필요합니다. 기본적인 HTML 구조는 다음과 같습니다.

<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>데이터 시각화</title>
    <link rel="stylesheet" href="https://wilku.top/how-to-build-a-simple-chart-with-chart-js/./style.css" />
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  </head>
  <body>
    <h2>데이터 시각화 예제</h2>
    <canvas id="myChart" width="400" height="150"></canvas>
  </body>
</html>

페이지 스타일을 조정하려면 style.css 파일을 만들고 다음 CSS 코드를 추가하십시오.

@import url("https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    font-family: "Tilt Neon", sans-serif;
    padding: 2rem 4rem;
}

h2 {
    font-size: 3rem;
    color: #333;
    text-align: center;
    padding: 3rem;
}

첫 번째 차트 만들기: 막대 차트 예제

여기서는 범주별 데이터 비교에 적합한 막대 차트를 예시로 사용합니다.

먼저 HTML 하단에 추가한 스크립트 태그에서 id 속성을 사용하여 캔버스 요소를 선택합니다.
```
 let canvas = document.getElementById('myChart'); 
```
다음으로, 차트를 렌더링하기 위한 2D 드로잉 컨텍스트를 얻습니다.
```
 let ctx = canvas.getContext('2d'); 
```
이제 Chart() 함수를 사용하여 캔버스에 새 차트를 초기화합니다. 이 함수는 캔버스 컨텍스트를 첫 번째 인자로, 차트에 표시할 데이터를 포함하는 옵션 객체를 두 번째 인자로 받습니다.
```
 let options = {};
let myChart = new Chart(canvas, options); 
```

마지막으로, 옵션 객체를 채워 차트 유형, 데이터 및 필요한 레이블을 지정합니다.

 let options = {
    type: "bar",

    data: {
      labels: ["빨강", "파랑", "노랑", "초록", "보라", "주황"],

      datasets: [{
        label: "선호하는 색상에 대한 총 투표 수",
        data: [12, 19, 3, 5, 2, 3],
      }],
    },
};

현재까지 생성된 차트는 다음과 같습니다:

차트 스타일 및 사용자 정의

Chart.js는 차트를 사용자 정의할 수 있는 다양한 옵션을 제공합니다.

색상: 막대 배경색에서 선 테두리 색상까지 Chart.js를 사용하여 차트 색상을 사용자 지정할 수 있습니다.
범례: 범례를 위쪽, 아래쪽, 왼쪽 또는 오른쪽에 배치하여 데이터 명확성을 향상시킬 수 있습니다.
도구 설명: 마우스 오버 시 데이터 포인트에 대한 자세한 통찰력을 제공하는 도구 설명을 사용할 수 있습니다.
애니메이션: 차트 애니메이션의 스타일과 속도를 설정하여 데이터 시각화를 더욱 매력적으로 만들 수 있습니다.

예를 들어, 다음 코드와 같이 옵션 객체를 수정하여 데이터 세트에 대한 몇 가지 기본적인 스타일을 지정할 수 있습니다.

let options = {
    type: "bar",

    data: {
      labels: ["빨강", "파랑", "노랑", "초록", "보라", "주황"],

      datasets: [{
        label: "선호하는 색상에 대한 총 투표 수",
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: "rgba(75, 192, 192, 0.2)",
        borderColor: "rgba(75, 192, 192, 1)",
        borderWidth: 1,
      }],
    },
};

이제 차트는 다음과 같이 나타납니다.

모범 사례 및 성능 팁

차트를 렌더링할 때 최적의 성능을 보장하기 위해 다음과 같은 사항을 고려하십시오:

더 빠른 렌더링과 사용자 경험 향상을 위해 Chart.js에서 사용되는 데이터 포인트 수를 제한합니다.
차트를 자주 업데이트해야 하는 경우 새 차트를 렌더링하기 전에 destroy() 메서드를 사용하여 이전 차트를 제거하십시오.

일반적인 실수 방지 팁

다음은 피해야 할 몇 가지 일반적인 실수입니다:

데이터 형식의 일관성을 유지하여 예기치 않은 오류를 방지합니다.
성능 향상을 위해 애니메이션 사용을 제한합니다. 과도한 애니메이션은 사용자 경험에 부정적인 영향을 줄 수 있습니다.

Chart.js: 웹 데이터 시각화 강화

Chart.js는 인터랙티브한 방식으로 데이터를 보여주고자 할 때 매우 유용한 도구입니다. 통찰력을 제공하고 의사 결정에 도움이 되는 아름다운 데이터 시각화를 간편하게 생성할 수 있습니다.

Chart.js는 개발 경험이 있든 없든 모든 사용자에게 강력한 데이터 시각화 솔루션을 제공합니다.