Chart.js로 다양한 데이터를 동적으로 제어하기

데이터 시각화는 정보를 효과적으로 전달하는 핵심 도구입니다. Chart.js를 활용하면 다양한 차트를 쉽게 생성할 수 있습니다.

여러 데이터를 동시에 비교하고자 할 때, 사용자가 원하는 데이터를 선택하고 보기 쉽게 표현하는 것이 중요합니다. 이를 위해 Chart.js를 사용하여 여러 데이터를 보여주고 사용자가 원하는 데이터를 선택하여 보는 기능을 추가할 수 있습니다.

이번 포스트에서는 Chart.js를 활용하여 여러 데이터를 동적으로 제어하고, 사용자가 선택한 데이터를 보여주는 방법을 알아보겠습니다.

시작하기

우선, Chart.js를 사용하여 간단한 선 그래프를 만들어봅시다. 이번에는 그래프에 표시될 데이터를 배열로 선언합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>데이터를 동적으로 제어</title>
    <!-- Chart.js 라이브러리를 가져옵니다. -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <!-- 그래프를 감싸는 div를 생성하여 크기를 제어합니다. -->
    <div style="width: 400px; height: 400px;">
        <!-- 그래프가 그려질 캔버스 요소를 생성합니다. -->
        <canvas id="myChart" width="400" height="400"></canvas>
    </div>
    
    <script>
        // 캔버스 요소에서 그래픽 컨텍스트를 가져옵니다.
        const ctx = document.getElementById('myChart').getContext('2d');
        // 그래프에 사용될 데이터를 선언합니다.
        let datasets = [{
            label: 'Dataset 1',  // 데이터셋 1의 레이블
            data: [10, 20, 30, 40, 50],  // 데이터셋 1의 데이터
        },{
            label: 'Dataset 2',  // 데이터셋 2의 레이블
            data: [40, 30, 20, 10, 0],  // 데이터셋 2의 데이터
        },{
            label: 'Dataset 3',  // 데이터셋 3의 레이블
            data: [50, 30, 40, 10, 20],  // 데이터셋 3의 데이터
        }];

        // 페이지가 로드될 때 그래프를 초기화합니다.
        let myChart = new Chart(ctx, {
            type: 'line',  // 선 그래프 유형을 설정합니다.
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],  // x축 레이블을 설정합니다.
                datasets,  // 데이터셋을 설정합니다.
            }
        });
    </script>
</body>
</html>

Checkbox 추가

이제 Checkbox를 추가하여 그래프에 표시될 데이터를 제어해봅시다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>데이터를 동적으로 제어</title>
    <!-- Chart.js 라이브러리를 가져옵니다. -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<body>
    <div>
        <input type="checkbox" id="dataset1Checkbox" checked>
        <label for="dataset1Checkbox">Dataset 1</label>
        <input type="checkbox" id="dataset2Checkbox" checked>
        <label for="dataset2Checkbox">Dataset 2</label>
        <input type="checkbox" id="dataset3Checkbox" checked>
        <label for="dataset3Checkbox">Dataset 3</label>
    </div>


    <!-- 그래프를 감싸는 div를 생성하여 크기를 제어합니다. -->
    <div style="width: 400px; height: 400px;">
        <!-- 그래프가 그려질 캔버스 요소를 생성합니다. -->
        <canvas id="myChart" width="400" height="400"></canvas>
    </div>

    <script>
        // 캔버스 요소에서 그래픽 컨텍스트를 가져옵니다.
        const ctx = document.getElementById('myChart').getContext('2d');
        // 그래프에 사용될 데이터를 선언합니다.
        let datasets = [{
            label: 'Dataset 1',  // 데이터셋 1의 레이블
            data: [10, 20, 30, 40, 50],  // 데이터셋 1의 데이터
        }, {
            label: 'Dataset 2',  // 데이터셋 2의 레이블
            data: [40, 30, 20, 10, 0],  // 데이터셋 2의 데이터
        }, {
            label: 'Dataset 3',  // 데이터셋 3의 레이블
            data: [50, 30, 40, 10, 20],  // 데이터셋 3의 데이터
        }];

        // 페이지가 로드될 때 그래프를 초기화합니다.
        let myChart = new Chart(ctx, {
            type: 'line',  // 선 그래프 유형을 설정합니다.
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],  // x축 레이블을 설정합니다.
                datasets,  // 데이터셋을 설정합니다.
            }
        });


        // 데이터셋 1 체크박스에 change 이벤트 리스너를 추가합니다.
        document.getElementById('dataset1Checkbox').addEventListener('change', function () {
            // 체크박스가 변경될 때마다 데이터셋 1의 숨김 상태를 토글합니다.
            myChart.data.datasets[0].hidden = !this.checked;
            // 변경된 상태를 적용하기 위해 차트를 업데이트합니다.
            myChart.update();
        });

        // 데이터셋 2 체크박스에 change 이벤트 리스너를 추가합니다.
        document.getElementById('dataset2Checkbox').addEventListener('change', function () {
            // 체크박스가 변경될 때마다 데이터셋 2의 숨김 상태를 토글합니다.
            myChart.data.datasets[1].hidden = !this.checked;
            // 변경된 상태를 적용하기 위해 차트를 업데이트합니다.
            myChart.update();
        });

        // 데이터셋 3 체크박스에 change 이벤트 리스너를 추가합니다.
        document.getElementById('dataset3Checkbox').addEventListener('change', function () {
            // 체크박스가 변경될 때마다 데이터셋 3의 숨김 상태를 토글합니다.
            myChart.data.datasets[2].hidden = !this.checked;
            // 변경된 상태를 적용하기 위해 차트를 업데이트합니다.
            myChart.update();
        });
    </script>
</body>

</html>

추가로 반복되고 있는 checkbox 이벤트를 정리해 주겠습니다.

 // 모든 데이터셋 체크박스에 대한 change 이벤트 리스너를 추가합니다.
        for (let i = 1; i <= datasets.length; i++) {
            // 데이터셋 체크박스의 ID를 동적으로 생성합니다.
            let checkboxId = 'dataset' + i + 'Checkbox';
            // 해당 ID의 체크박스 요소를 가져옵니다.
            let checkbox = document.getElementById(checkboxId);
            // 체크박스에 change 이벤트 리스너를 추가합니다.
            checkbox.addEventListener('change', function () {
                // 체크박스가 변경될 때마다 해당 데이터셋의 숨김 상태를 토글합니다.
                myChart.data.datasets[i - 1].hidden = !this.checked;
                // 변경된 상태를 적용하기 위해 차트를 업데이트합니다.
                myChart.update();
            });
        }

위와 같은 코드를 사용하면 많은 데이터를 보여주는 차트에서도 데이터를 편리하게 추가하거나 삭제할 수 있습니다.

코드를 수정하지 않고도 새로운 데이터셋이나 기존 데이터셋을 간편하게 관리할 수 있습니다.

이를 통해 사용자는 필요에 따라 차트에 표시되는 데이터를 동적으로 조절할 수 있으며, 데이터의 추가 및 삭제가 쉬워집니다.

마치며

이제 여러 데이터를 보여주고 숨기는 기능을 추가하는 방법에 대해 알아보았습니다. Chart.js의 다양한 기능을 활용하여 데이터 시각화에 더 많은 가능성을 더해보세요!

저작자표시 비영리 변경금지

'개발 > chart.js' 카테고리의 다른 글

Chart.js에서 Min/Max를 활용한 Zoom In/Out 기능 구현하기 (0)	2024.02.25
Chart.js로 시작하는 데이터 시각화 시작하기 (0)	2024.02.15

nicksoon

Chart.js로 다양한 데이터를 동적으로 제어하기

시작하기

Checkbox 추가

마치며

'개발 > chart.js' 카테고리의 다른 글

티스토리툴바

Chart.js로 다양한 데이터를 동적으로 제어하기

시작하기

Checkbox 추가

마치며

'개발 > chart.js' 카테고리의 다른 글

관련글

티스토리툴바