[javascript] Chart.js의 다양한 차트 유형

27 Nov 2023

javascript

Chart.js는 웹 기반 데이터 시각화를 위한 JavaScript 라이브러리로, 다양한 차트 유형을 제공합니다. 이 블로그 포스트에서는 Chart.js 라이브러리에서 제공하는 몇 가지 주요 차트 유형에 대해 살펴보겠습니다.

1. 선 그래프(Line Chart)

선 그래프는 데이터 포인트를 선으로 연결하여 추세를 시각화하는 차트 유형입니다. 시간에 따른 데이터 변화를 보여줄 때 주로 사용됩니다.

const lineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
    datasets: [{
      label: 'Data',
      data: [50, 75, 60, 80, 70, 90],
      backgroundColor: 'rgba(0, 0, 0, 0)',
      borderColor: 'blue',
      borderWidth: 1
    }]
  }
});

2. 막대 그래프(Bar Chart)

막대 그래프는 각 데이터 포인트를 막대로 표현하여 비교하기 쉽게 만들어주는 차트 유형입니다. 여러 항목의 데이터를 비교하거나 분류별로 데이터를 표현할 때 주로 사용됩니다.

const barChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: 'Data',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ['red', 'blue', 'yellow', 'green', 'purple', 'orange']
    }]
  }
});

3. 원 그래프(Pie Chart)

원 그래프는 데이터의 비율을 부채꼴 모양으로 표현하여 전체 데이터에서 각 항목이 차지하는 비율을 보여주는 차트 유형입니다. 주로 비율을 시각화할 때 사용됩니다.

const pieChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: 'Data',
      data: [10, 20, 5, 15, 8, 12],
      backgroundColor: ['red', 'blue', 'yellow', 'green', 'purple', 'orange']
    }]
  }
});

4. 꺾은 선 그래프(Area Chart)

꺾은 선 그래프는 선 그래프와 유사하지만, 데이터 영역 아래를 강조하여 데이터의 크기를 더 명확하게 보여주는 차트 유형입니다. 데이터의 흐름과 영역의 채움 정도를 더 잘 표현할 수 있습니다.

const areaChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
    datasets: [{
      label: 'Data',
      data: [50, 75, 60, 80, 70, 90],
      backgroundColor: 'rgba(0, 0, 255, 0.4)',
      borderColor: 'blue',
      borderWidth: 1
    }]
  }
});

위에서 소개한 차트 유형 이외에도 Chart.js는 많은 다른 유형의 차트를 지원합니다. 더 자세한 정보를 얻으려면 공식 문서를 참조하세요.