Chart.js는 웹 기반 데이터 시각화를 위한 강력한 JavaScript 라이브러리입니다. 이 글에서는 Chart.js를 사용하여 라인 차트를 생성하는 방법에 대해 알아보겠습니다.

Chart.js 설치

먼저, Chart.js를 사용하기 위해 프로젝트에 Chart.js를 설치해야 합니다. npm을 사용하는 경우, 아래 명령을 사용하여 Chart.js를 설치할 수 있습니다.

npm install chart.js

또는 아래 링크를 통해 Chart.js를 다운로드할 수도 있습니다.

Chart.js 다운로드

HTML 파일 설정

라인 차트를 생성하기 위해 HTML 파일에 필요한 요소들을 추가해야 합니다. 가장 간단한 예로, 아래와 같이 <canvas> 요소를 추가합니다.

<canvas id="lineChart"></canvas>

JavaScript 코드 작성

이제 라인 차트를 생성하는 JavaScript 코드를 작성해보겠습니다. 다음은 Chart.js를 사용하여 라인 차트를 생성하는 기본적인 코드입니다.

var ctx = document.getElementById('lineChart').getContext('2d');
var lineChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [{
            label: 'Example Dataset',
            data: [10, 20, 30, 40, 50, 60],
            backgroundColor: 'rgba(0, 0, 255, 0.5)', // 라인 아래 영역의 배경색
            borderColor: 'blue', // 라인 색
            borderWidth: 1
        }]
    },
    options: {
        // 추가적인 옵션 설정
    }
});

위 코드에서 labels는 x축에 표시될 라벨, datasets는 데이터의 배열을 나타냅니다. backgroundColor는 라인 아래의 색상, borderColor는 라인의 색상을 나타냅니다.

라인 차트의 옵션 설정

Chart.js를 사용하면 다양한 옵션을 설정하여 라인 차트의 모양을 조절할 수 있습니다. 예를 들어, 라인의 색상, 두께, 라벨의 크기 등을 조절할 수 있습니다. 자세한 옵션 설정은 공식 문서를 참조하세요.

라인 차트의 추가 기능

Chart.js를 사용하면 라인 차트에 대한 추가 기능도 구현할 수 있습니다. 예를 들어, 툴팁, 반응형 크기 조정, 애니메이션 등을 추가할 수 있습니다. 자세한 내용은 Chart.js의 공식 문서를 참조하세요.

마치며

Chart.js를 사용하면 간단하게 라인 차트를 생성하고 커스터마이징할 수 있습니다. Chart.js의 다양한 기능과 옵션을 활용하여 데이터를 시각적으로 표현해보세요!