[JavaScript] chart.js Line Chart 사용법

프로젝트를 진행 중에 chart.js를 써야하는 상황이 발생하였다.
막대 그래프인 bar Chart는 완성을 하였는데

-> 그래프 데이터는 thymeleaf를 사용하여 동적으로 넣어주었다.

---

이번엔 Line Chart를 구현해야 하는 상황이 발생...ㅠ으흉

↓ chart.js 공식 사이트
https://www.chartjs.org/docs/latest/charts/line.html

한번 알아보자

Chart.js의 Line Chart

Line Chart는 데이터를 선으로 연결해 시계열 데이터나 연속적인 데이터 변화를 시각화 하는 데 유용한 차트이다.
Line Chart를 사용하려면, 반드시 포함해야 하는 속성과 기본 속성에 대해 설명하겠다.

필수 속성

Chart.js에서 Line Chart를 생성하려면, 반드시 다음의 필수 속성들이 필요하다.

1. type: 차트의 유형을 정의한다. Line Chart에서는 "line"으로 설정해야 한다.

type: 'line'

2. data: 차트에 표시할 실제 데이터를 포함한다. lebels와 datasets 두 가지 주요 속성이 필요하다.

• lebels: 차트의 X축 레이블을 설정한다. 이 레이블은 X축에 표시되는 값들이다.
• datasets: 데이터셋은 Y축에 표시되는 데이터를 정의한다. 각 데이터셋은 하나의 라인을 나타내며, data 속성에 Y축 값들을 배열로 설정해야 한다.

data: {
  labels: ['January', 'February', 'March'],
  datasets: [{
    label: 'My First dataset',
    data: [65, 59, 80],
  }]
}

기본 속성

1. options: 차트의 동작과 스타일을 제어하는 설정이다. Line Chart의 options에는 다양한 속성이 있으며, 주로 차트의 상호작용이나 모양을 조절한다.

• responsive: 기본적으로 true로 설정되어 있으며, 차트가 반응형으로 동작하도록 한다.
• scales: 차트의 축을 제어한다. x와 y 축의 설정을 정의할 수 있다.

options: {
  responsive: true,
  scales: {
    x: {
      beginAtZero: true // X축 시작점을 0으로 설정
    },
    y: {
      beginAtZero: true // Y축 시작점을 0으로 설정
    }
  }
}

2. datasets 속성 내부의 기본 속성들:

• lebel: 데이터셋의 이름으로, 차트 상단에 범례로 표시된다.
• data: 데이터를 배열로 정의하며, 각각의 값은 y축에 대응된다.
• borderColor: 선의 색상을 정의한다.
• fill: 영역을 채울 것인지 여부를 결정한다. 기본값은 false이다. 이를 true로 설정하면 선 아래의 영역이 채워진다.
• backgroundColor: 선 아래를 채울 때 사용할 색상이다. fill이나 true일 경우 사용된다.
  
  

3. lineTension: 선의 곡률을 정의하는 속성이다. 0에 가까울수록 직선에 가깝고, 1에 가까울수록 부드러운 곡선이 된다.
   
   
4. pointRadius: 데이터 포인트에 표시될 원의 크기를 지정한다. 기본값은 3이다.
   
   
5. hover: 사용자가 차트 위에 마우스를 올렸을 때의 동작을 설정한다. 예를 들어, hover.mode는 "nearest"로 설정되어 있을 경우, 가장 가까운 데이터 포인트에 반응한다.
   
   
   
   

기본적인 예제

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'Dataset 1',
      data: [65, 59, 80, 81, 56, 55, 40],
      borderColor: 'rgba(75, 192, 192, 1)',
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      fill: true,
      tension: 0.4,
    }]
  },
  options: {
    responsive: true,
    scales: {
      x: {
        beginAtZero: true
      },
      y: {
        beginAtZero: true
      }
    }
  }
});

---

자바스크립트는.......언제 공부해도 너므 어렵다~~ㅠㅠㅠㅠ.ㅠ.ㅠ.ㅠ.ㅠ