[javascript] Chart.js에서의 선형 차트 생성 방법

27 Nov 2023

javascript

Chart.js는 JavaScript에서 사용할 수 있는 유명한 차트 라이브러리입니다. Chart.js를 사용하면 간단하게 선형 차트를 생성할 수 있습니다. 이번 포스트에서는 Chart.js를 사용하여 선형 차트를 만드는 방법에 대해 알아보겠습니다.

1. Chart.js 라이브러리 추가

Chart.js를 사용하기 위해서는 먼저 해당 라이브러리를 웹 페이지에 추가해야 합니다. 아래의 코드를 <head> 태그 안에 추가하세요.

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

2. HTML 요소 추가

선형 차트가 표시될 HTML 요소를 추가해야 합니다. 아래의 코드는 <canvas> 태그를 사용하여 차트를 표시할 영역을 만드는 예시입니다.

<canvas id="myChart"></canvas>

3. JavaScript 코드 작성

선형 차트를 생성하기 위해 JavaScript 코드를 작성해야 합니다. 아래의 코드는 Chart.js를 사용하여 선형 차트를 생성하는 예시입니다.

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'Sales',
            data: [100, 200, 150, 250, 300, 200, 400],
            backgroundColor: 'rgba(0, 123, 255, 0.5)',
            borderColor: 'rgba(0, 123, 255, 1)'
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

4. 선형 차트 커스터마이징

Chart.js를 사용하면 다양한 옵션을 설정하여 선형 차트를 커스터마이징할 수 있습니다. 예를 들어, 차트의 타이틀, 축의 레이블, 색상 등을 변경할 수 있습니다. 자세한 내용은 Chart.js 공식 문서를 참고하세요.

결론

Chart.js는 간단하면서도 유연한 선형 차트 생성 라이브러리입니다. 위의 단계를 따라가면 쉽게 선형 차트를 만들 수 있습니다. Chart.js에는 다양한 차트 유형과 커스터마이징 옵션들이 있으므로 원하는 차트를 만들어 나갈 수 있습니다.