[javascript] Chart.js를 활용한 실제 예제 및 프로젝트

27 Nov 2023

javascript

소개

Chart.js는 JavaScript를 기반으로한 간단하고 유연한 차트 라이브러리입니다. 이 라이브러리를 사용하면 웹 페이지나 웹 애플리케이션에서 다양한 종류의 차트를 손쉽게 생성하고 제어할 수 있습니다. 이번 포스트에서는 Chart.js를 활용한 몇 가지 실제 예제와 프로젝트를 살펴보겠습니다.

예제 1: 막대 차트

const data = {
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [{
    label: 'My Dataset',
    data: [12, 19, 3, 5, 2, 3],
    backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(255, 206, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(255, 159, 64, 0.2)'
    ],
    borderColor: [
      'rgba(255, 99, 132, 1)',
      'rgba(54, 162, 235, 1)',
      'rgba(255, 206, 86, 1)',
      'rgba(75, 192, 192, 1)',
      'rgba(153, 102, 255, 1)',
      'rgba(255, 159, 64, 1)'
    ],
    borderWidth: 1
  }]
};

const config = {
  type: 'bar',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
};

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

해당 예제는 막대(Bar) 차트를 생성하는 예제입니다. ‘Red’, ‘Blue’, ‘Yellow’, ‘Green’, ‘Purple’, ‘Orange’ 라벨을 가진 데이터를 막대로 표시합니다.

예제 2: 원형 차트

const data = {
  labels: ['Red', 'Blue', 'Yellow'],
  datasets: [{
    label: 'My Dataset',
    data: [10, 20, 30],
    backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(255, 206, 86, 0.2)'
    ],
    borderColor: [
      'rgba(255, 99, 132, 1)',
      'rgba(54, 162, 235, 1)',
      'rgba(255, 206, 86, 1)'
    ],
    borderWidth: 1
  }]
};

const config = {
  type: 'pie',
  data: data
};

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

위 예제는 원형(Pie) 차트를 생성하는 예제입니다. ‘Red’, ‘Blue’, ‘Yellow’ 라벨을 가진 데이터를 원형으로 표시합니다.

프로젝트: 실시간 데이터 시각화

Chart.js를 활용하여 실시간 데이터를 표시하는 프로젝트를 만들어보겠습니다. 실시간으로 업데이트되는 데이터를 차트로 보여주는 것은 데이터 시각화에 많은 도움이 됩니다.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="realTimeChart"></canvas>
  <script>
    const data = {
      labels: [],
      datasets: [{
        label: 'Real-time Data',
        data: [],
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1
      }]
    };

    const config = {
      type: 'line',
      data: data,
      options: {
        scales: {
          x: {
            display: true
          },
          y: {
            display: true
          }
        }
      }
    };

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

    // 실시간 데이터 업데이트
    setInterval(() => {
      const randomValue = Math.floor(Math.random() * 100); // 0부터 100까지 랜덤 값 생성
      myChart.data.labels.push(Date.now());
      myChart.data.datasets[0].data.push(randomValue);
      myChart.update();
    }, 1000);
  </script>
</body>
</html>

위 프로젝트는 실시간으로 업데이트되는 랜덤 데이터를 선(Line) 차트로 표시하는 프로젝트입니다. 1초마다 데이터가 업데이트되고 차트가 갱신됩니다.

결론

Chart.js는 간단한 사용법과 다양한 차트 형식을 제공하므로 웹 개발에서 데이터 시각화에 유용하게 활용될 수 있습니다. 위의 예제와 프로젝트를 참고하여 다양한 차트를 만들어보세요. Chart.js 공식 문서에서 추가적인 예제와 기능을 확인할 수 있습니다. 출처: Chart.js 공식 문서