[javascript] Chart.js에서의 다중 데이터 시각화

27 Nov 2023

javascript

소개

Chart.js는 웹 개발에서 데이터 시각화 작업을 할 때 널리 사용되는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 다양한 종류의 그래프와 차트를 만들 수 있으며, 특히 다중 데이터를 시각화할 때 매우 유용합니다.

이번 글에서는 Chart.js를 사용하여 다중 데이터를 시각화하는 방법에 대해 알아보겠습니다.

다중 데이터 시각화 예제

다음은 Chart.js를 사용하여 다중 데이터를 시각화하는 예제입니다.

// HTML에 차트를 그릴 캔버스 요소 추가
<canvas id="myChart" width="400" height="400"></canvas>

// 데이터 설정
let data = {
  labels: ['January', 'February', 'March', 'April', 'May'],
  datasets: [
    {
      label: 'Data 1',
      data: [10, 20, 30, 40, 50],
      borderWidth: 1
    },
    {
      label: 'Data 2',
      data: [20, 30, 40, 50, 60],
      borderWidth: 1
    },
    {
      label: 'Data 3',
      data: [30, 40, 50, 60, 70],
      borderWidth: 1
    }
  ]
};

// 차트 생성
let ctx = document.getElementById('myChart').getContext('2d');
let myChart = new Chart(ctx, {
  type: 'line', // 그래프 유형 설정
  data: data
});

이 코드는 선 그래프를 생성하며, labels 배열에 x축의 라벨을, datasets 배열에 여러 개의 데이터셋을 설정합니다. 각 데이터셋은 label 이름과 data 배열을 가지며, borderWidth로 그래프의 선 두께를 설정할 수 있습니다.

위의 예제에서는 data 배열에 세 개의 데이터셋을 설정하여 세 개의 선 그래프를 생성했습니다.

결론

Chart.js는 다중 데이터를 시각화하기 위한 강력한 도구로 사용될 수 있습니다. 이를 통해 간단한 코드 작성으로 다양한 종류의 그래프와 차트를 만들 수 있으며, 데이터를 시각화하여 더 명확하게 표현할 수 있습니다.

더 많은 정보를 원하시면 Chart.js 공식 문서를 참고하시기 바랍니다.