[javascript] Chart.js에서의 대시보드 디자인 패턴

27 Nov 2023

javascript

대시보드는 데이터 시각화를 통해 사용자에게 기업의 현재 상태 또는 통계를 보여주는 유용한 도구입니다. Chart.js는 JavaScript로 구현된 강력한 데이터 시각화 도구입니다. 이번 블로그 포스트에서는 Chart.js를 사용하여 대시보드 디자인 패턴을 구축하는 방법에 대해 알아보겠습니다.

1. 준비하기

Chart.js를 사용하기 위해 먼저 해당 라이브러리를 다운로드하고 HTML 문서에 추가해야 합니다. 아래는 Chart.js를 다운로드하고 <head> 태그 내에 추가하는 예시 코드입니다.

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

2. 데이터 준비하기

대시보드에서 보여줄 데이터를 먼저 준비해야 합니다. Chart.js는 배열 형태의 데이터를 입력으로 받아 시각화를 수행합니다. 예를 들어, 월별 매출 데이터를 시각화하고 싶다면 아래와 같이 데이터 배열을 정의할 수 있습니다.

var salesData = [5000, 7000, 8000, 6000, 9000, 10000, 12000];

3. 차트 생성하기

Chart.js를 사용하여 차트를 생성하는 방법은 간단합니다. 먼저 <canvas> 요소를 HTML 문서에 추가하고, getContext('2d')를 호출하여 2D 그래픽 컨텍스트를 가져옵니다. 그런 다음, new Chart()를 사용하여 차트 인스턴스를 생성하고 데이터와 옵션을 설정합니다.

<canvas id="salesChart"></canvas>

<script>
var salesData = [5000, 7000, 8000, 6000, 9000, 10000, 12000];

var ctx = document.getElementById('salesChart').getContext('2d');

var chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
    datasets: [{
      label: 'Sales',
      data: salesData,
      backgroundColor: 'rgba(0, 123, 255, 0.5)',
      borderColor: 'rgba(0, 123, 255, 1)',
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false
  }
});
</script>

위 코드에서는 type에 line을 지정하여 선 그래프를 생성하고, data 객체에 labels와 datasets를 설정하여 데이터를 전달하였습니다. 이때, labels는 x축에 표시될 레이블을, datasets는 실제 데이터와 스타일을 설정하는 부분을 의미합니다.

4. 다양한 차트 사용하기

Chart.js는 다양한 차트 유형을 지원합니다. 위 예제에서는 선 그래프를 사용하였지만, 막대 그래프, 원 그래프 등 다양한 유형의 차트를 생성할 수 있습니다. 원하는 차트 유형을 type 속성에 지정해주면 됩니다.

예를 들어 막대 그래프를 생성하려면 type을 bar로 변경하면 됩니다.

var chart = new Chart(ctx, {
  type: 'bar',
  // ...
});

5. 추가적인 설정과 스타일링

Chart.js에는 다양한 추가적인 설정과 스타일링 옵션을 제공합니다. 예를 들어 축 레이블, 배경색, 축 눈금 등을 설정할 수 있습니다. 자세한 내용은 공식 문서를 참조하시기 바랍니다.

마무리

이번 포스트에서는 Chart.js를 사용하여 대시보드 디자인 패턴을 구현하는 방법에 대해 알아보았습니다. Chart.js는 사용하기 쉽고 다양한 차트 유형을 지원하기 때문에 데이터 시각화에 유용한 도구입니다. 많은 기능과 옵션이 있으니 공식 문서를 참고하여 원하는 대시보드를 구현해보세요.