[javascript] Chart.js를 활용한 환경 데이터 시각화

27 Nov 2023

javascript

Chart.js는 JavaScript를 기반으로한 데이터 시각화 도구입니다. 이번 글에서는 Chart.js를 활용하여 환경 데이터를 시각화하는 방법에 대해 알아보겠습니다.

1. Chart.js 소개

Chart.js는 사용하기 쉽고 다양한 유형의 그래프를 생성할 수 있는 강력한 도구입니다. HTML5의 Canvas 요소를 사용하여 그래프를 렌더링하며, 다양한 옵션을 설정하여 사용자 정의 그래프를 만들 수 있습니다.

2. 환경 데이터 시각화 예제

다음은 환경 데이터를 시각화하는 예제입니다. 예제에서는 년도별 대기 오염 농도를 막대 그래프로 표현합니다.

<!DOCTYPE html>
<html>
<head>
    <title>환경 데이터 시각화</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 
</head>
<body>
    <canvas id="chart"></canvas>

    <script>
        // 데이터
        var data = {
            labels: ['2010', '2011', '2012', '2013', '2014', '2015', '2016'],
            datasets: [{
                label: '대기 오염',
                data: [15, 20, 18, 25, 23, 19, 21],
                backgroundColor: 'rgba(75, 192, 192, 0.2)', // 그래프 색상
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        };

        // 옵션
        var options = {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        };

        // 그래프 생성
        var ctx = document.getElementById('chart').getContext('2d');
        var chart = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: options
        });
    </script>
</body>
</html>

위의 코드는 HTML 문서 안에 Chart.js 스크립트를 포함하고 있습니다. 데이터와 옵션을 설정한 뒤, canvas 요소에 차트를 생성하여 웹 페이지에 나타냅니다. 이 예제에서는 막대 그래프를 사용하였지만, Chart.js는 다양한 유형의 그래프를 지원합니다.

3. 참고 자료

이제 환경 데이터 시각화를 위해 Chart.js를 활용하는 방법에 대해 알아보았습니다. Chart.js를 사용하면 다양한 유형의 그래프를 손쉽게 생성할 수 있으며, 데이터를 시각적으로 표현하여 효과적으로 정보를 전달할 수 있습니다.