Chart.js는 JavaScript를 사용하여 다양한 종류의 차트를 생성하기 위한 강력한 도구입니다. 꺾은선 차트(line chart)는 데이터 흐름이나 추이를 시각적으로 나타내는데 매우 유용합니다. 이번 포스트에서는 Chart.js를 이용하여 꺾은선 차트를 생성하는 방법을 알아보겠습니다.

1. Chart.js 라이브러리 가져오기

먼저, Chart.js 라이브러리를 프로젝트에 추가해야 합니다. CDN을 사용하거나 로컬에 저장된 파일을 포함하면 됩니다. 다음은 CDN을 사용한 예입니다.

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

2. HTML 요소 추가하기

꺾은선 차트를 보여줄 HTML 요소를 준비해야 합니다. <canvas> 요소를 사용하면 됩니다. 다음은 예시입니다.

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

3. JavaScript 코드 작성하기

위의 HTML 요소를 참조하여 JavaScript 코드를 작성해야 합니다. Chart.js를 이용하여 차트를 생성하고 데이터를 설정하는 코드입니다.

var ctx = document.getElementById('lineChart').getContext('2d');
var lineChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['1월', '2월', '3월', '4월', '5월'],
        datasets: [{
            label: '판매량',
            data: [50, 75, 80, 65, 90],
            backgroundColor: 'rgba(0, 123, 255, 0.4)',
            borderColor: 'rgba(0, 123, 255, 1)',
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

위 코드에서 getElementById를 사용하여 <canvas> 요소를 가져옵니다. Chart.js를 이용하여 차트를 생성할 때 Chart 객체를 생성하고, 해당 객체를 통해 차트의 종류, 데이터, 옵션을 설정합니다. 위의 예시 코드에서는 꺾은선 차트를 생성하고 판매량 데이터를 설정하였습니다.

4. 꺾은선 차트 스타일링

Chart.js를 이용하여 생성한 꺾은선 차트의 스타일을 원하는대로 변경할 수 있습니다. 위의 코드에서 backgroundColor, borderColor, borderWidth 등의 속성을 수정하여 차트의 색상과 두께를 조절할 수 있습니다. 또한, options 객체 내부에서 다양한 옵션을 설정하여 차트를 세부적으로 커스터마이즈할 수도 있습니다.

마무리

위에서 설명한 방법을 참고하여 Chart.js를 사용하여 꺾은선 차트를 생성하는 방법에 대해 알아보았습니다. Chart.js를 이용하면 상당히 간단하게 다양한 종류의 차트를 생성할 수 있으므로, 데이터 시각화에 많이 활용되고 있습니다. 추가적인 정보는 Chart.js 공식 문서를 참고하시기 바랍니다.