[javascript] Chart.js를 이용한 교통 데이터 시각화

27 Nov 2023

javascript

많은 사람들이 교통 데이터를 시각화하는 데에는 Chart.js를 사용하는 것을 선호합니다. Chart.js는 JavaScript로 작성된 강력한 오픈 소스 라이브러리로, 다양한 차트 유형을 지원하며 사용하기 쉽습니다. 이번 블로그 포스트에서는 Chart.js를 사용하여 교통 데이터를 시각화하는 방법을 살펴보겠습니다.

1. Chart.js 설치

먼저 Chart.js를 설치해야 합니다. npm을 사용하여 설치하려면 다음 명령을 실행하세요:

npm install chart.js --save

Chart.js를 HTML 파일에 직접 추가하려면 다음 코드를 <head> 태그 안에 추가하세요:

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

2. HTML 구성

Chart.js를 사용하기 위해 필요한 HTML 구성 요소를 설정해야 합니다. <canvas> 요소를 추가하여 차트가 표시될 영역을 생성합니다:

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

3. JavaScript 코드 작성

다음으로 JavaScript 코드를 작성하여 Chart.js를 사용하여 교통 데이터를 시각화합니다. 우선 <canvas> 요소를 가져옵니다:

var ctx = document.getElementById('myChart').getContext('2d');

그런 다음 Chart 객체를 생성하고 데이터 및 옵션을 설정합니다:

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['월', '화', '수', '목', '금'],
        datasets: [{
            label: '교통량',
            data: [500, 800, 1200, 600, 900],
            backgroundColor: 'rgba(0, 123, 255, 0.5)'
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

위 코드에서는 bar 차트를 생성하고 각 요일에 대한 교통량을 데이터로 설정합니다. 차트의 배경색은 rgba(0, 123, 255, 0.5)로 설정되었습니다.

4. 결과 확인

이제 작성한 코드를 실행하여 차트를 확인할 수 있습니다. 이전에 작성한 HTML 파일을 브라우저에서 열거나 웹 서버에 올려서 확인하세요. 차트가 정상적으로 표시되는지 확인해보세요. 교통량 데이터가 각 요일에 대해 막대 그래프로 표시될 것입니다.

1. Chart.js 설치

2. HTML 구성

3. JavaScript 코드 작성

4. 결과 확인

참고 자료