chart.js 버튼 이벤트 예제

Chart.js를 사용하여 데이터 시각화를 구현할 때,

Chart.js에서 쉽게 보는 예제를 정리했습니다

 

1. 랜덤화 (Randomize)
2. 데이터셋 추가 (Add Dataset)
3. 데이터 추가 (Add Data)
4. 데이터셋 제거 (Remove Dataset)
5. 데이터 제거 (Remove Data)  

 

같은 주요 액션을 정리했습니다

 

 

chart.js 이벤트 동작 결과

 

1. Randomize

이 액션은 차트의 모든 데이터 값을 랜덤하게 변경합니다. 이를 통해 차트의 변화를 쉽게 관찰할 수 있습니다.

 // 데이터의 값을 랜덤화하는 액션
{
    name: 'Randomize',
    handler: (chart) => {
        // 각 데이터셋에 대해
        chart.data.datasets.forEach(dataset => {
            // 랜덤한 데이터 생성 (최소 -100, 최대 100)
            dataset.data = Utils.numbers({ count: chart.data.labels.length, min: -100, max: 100 });
        });
        // 차트를 업데이트하여 시각적으로 반영
        chart.update();
    }
}

 

2. Add Dataset

이 액션은 새로운 데이터셋을 차트에 추가합니다. 사용자는 여러 데이터셋을 한 차트에서 비교할 수 있습니다.

{
    // 새로운 데이터셋을 추가하는 액션
    name: 'Add Dataset',
    handler: (chart) => {
        const data = chart.data;
        // 데이터셋 수에 따라 새로운 색상을 결정
        const dsColor = Utils.namedColor(data.datasets.length);
        const newDataset = {
            // 새로운 데이터셋의 이름 설정
            label: 'Dataset ' + (data.datasets.length + 1),
            // 색상 설정 (투명하게)
            backgroundColor: Utils.transparentize(dsColor, 0.5),
            borderColor: dsColor,
            borderWidth: 1,
            // 랜덤 데이터 생성 (기존 레이블 수와 같은 수)
            data: Utils.numbers({ count: data.labels.length, min: -100, max: 100 }),
        };
        // 데이터셋을 리스트에 추가
        data.datasets.push(newDataset);
        // 차트를 업데이트하여 시각적으로 반영
        chart.update();
    }
},

 

3. Add Data

이 액션은 기존 데이터셋에 새로운 데이터를 추가합니다. 차트의 다이나믹한 변화를 체험할 수 있습니다.

{
    // 데이터에 새로운 값을 추가하는 액션
    name: 'Add Data',
    handler: (chart) => {
        const data = chart.data;
        // 데이터셋이 있을 때만 실행
        if (data.datasets.length > 0) {
            // 레이블에 새로운 월 추가
            data.labels = Utils.months({ count: data.labels.length + 1 });
            // 각 데이터셋에 대해 새로운 랜덤 데이터 추가
            data.datasets.forEach(dataset => {
                dataset.data.push(Utils.numbers({ count: 1, min: -100, max: 100 })[0]);
            });
            // 차트를 업데이트하여 시각적으로 반영
            chart.update();
        }
    }
},

 

4. Remove Dataset

이 액션은 가장 최근에 추가된 데이터셋을 제거합니다. 불필요한 데이터셋을 정리할 수 있는 기능입니다.

{
    // 마지막 데이터셋을 제거하는 액션
    name: 'Remove Dataset',
    handler: (chart) => {
        // 데이터셋 리스트에서 마지막 데이터셋 제거
        chart.data.datasets.pop();
        // 차트를 업데이트하여 시각적으로 반영
        chart.update();
    }
},

 

5. Remove Data

이 액션은 가장 최근에 추가된 데이터를 제거합니다. 데이터의 수를 조절하는 데 유용합니다.

{
    // 마지막 데이터를 제거하는 액션
    name: 'Remove Data',
    handler: (chart) => {
        chart.data.labels.splice(-1, 1); // 마지막 레이블 제거
        chart.data.datasets.forEach(dataset => {
            dataset.data.pop(); // 각 데이터셋에서 마지막 데이터 제거
        });
        // 차트를 업데이트하여 삭제된 데이터를 반영
        chart.update();
    }
}

 

버튼 이벤트 연결하기

각 버튼이 클릭되었을 때 해당하는 액션을 실행할 수 있도록 이벤트 리스너를 추가하는 부분입니다. 아래 코드는 actions 배열을 순회하여 각 액션에 대해 버튼을 설정하는 방법을 보여줍니다.

actions.forEach(action => {
    // 각 액션을 콘솔에 출력하여 디버깅
    console.log(action);
    console.log(action.name.toLowerCase().replace(' ', '')); // 액션 이름을 소문자로 변환하고 공백을 제거
    console.log(document.getElementById(action.name.toLowerCase().replace(' ', ''))); // 버튼 요소 가져오기

    // 버튼에 클릭 이벤트 리스너 추가
    document.getElementById(action.name.toLowerCase().replace(' ', '')).addEventListener('click', () => action.handler(myChart));
});

 

 

최종 코드

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const Utils = {
            numbers({ count, min, max }) {
                return Array.from({ length: count }, () => Math.floor(Math.random() * (max - min + 1)) + min);
            },
            months({ count }) {
                return Array.from({ length: count }, (_, i) => new Date(0, i).toLocaleString('default', { month: 'long' }));
            },
            namedColor(index) {
                const colors = ['red', 'blue', 'green', 'yellow', 'orange', 'purple', 'cyan'];
                return colors[index % colors.length];
            },
            transparentize(color, opacity) {
                const rgb = color.replace(/rgba?/, '').replace(/[^\d,]/g, '').split(',').map(Number);
                return `rgba(${rgb.join(',')}, ${opacity})`;
            }
        };


        const actions = [
            {
                // 데이터의 값을 랜덤화하는 액션
                name: 'Randomize',
                handler: (chart) => {
                    // 각 데이터셋에 대해
                    chart.data.datasets.forEach(dataset => {
                        // 랜덤한 데이터 생성 (최소 -100, 최대 100)
                        dataset.data = Utils.numbers({ count: chart.data.labels.length, min: -100, max: 100 });
                    });
                    // 차트를 업데이트하여 시각적으로 반영
                    chart.update();
                }
            },
            {
                // 새로운 데이터셋을 추가하는 액션
                name: 'Add Dataset',
                handler: (chart) => {
                    const data = chart.data;
                    // 데이터셋 수에 따라 새로운 색상을 결정
                    const dsColor = Utils.namedColor(data.datasets.length);
                    const newDataset = {
                        // 새로운 데이터셋의 이름 설정
                        label: 'Dataset ' + (data.datasets.length + 1),
                        // 색상 설정 (투명하게)
                        backgroundColor: Utils.transparentize(dsColor, 0.5),
                        borderColor: dsColor,
                        borderWidth: 1,
                        // 랜덤 데이터 생성 (기존 레이블 수와 같은 수)
                        data: Utils.numbers({ count: data.labels.length, min: -100, max: 100 }),
                    };
                    // 데이터셋을 리스트에 추가
                    data.datasets.push(newDataset);
                    // 차트를 업데이트하여 시각적으로 반영
                    chart.update();
                }
            },
            {
                // 데이터에 새로운 값을 추가하는 액션
                name: 'Add Data',
                handler: (chart) => {
                    const data = chart.data;
                    // 데이터셋이 있을 때만 실행
                    if (data.datasets.length > 0) {
                        // 레이블에 새로운 월 추가
                        data.labels = Utils.months({ count: data.labels.length + 1 });
                        // 각 데이터셋에 대해 새로운 랜덤 데이터 추가
                        data.datasets.forEach(dataset => {
                            dataset.data.push(Utils.numbers({ count: 1, min: -100, max: 100 })[0]);
                        });
                        // 차트를 업데이트하여 시각적으로 반영
                        chart.update();
                    }
                }
            },
            {
                // 마지막 데이터셋을 제거하는 액션
                name: 'Remove Dataset',
                handler: (chart) => {
                    // 데이터셋 리스트에서 마지막 데이터셋 제거
                    chart.data.datasets.pop();
                    // 차트를 업데이트하여 시각적으로 반영
                    chart.update();
                }
            },
            {
                // 마지막 데이터를 제거하는 액션
                name: 'Remove Data',
                handler: (chart) => {
                    // 레이블에서 마지막 항목 제거
                    chart.data.labels.splice(-1, 1);
                    // 각 데이터셋에서 마지막 데이터 제거
                    chart.data.datasets.forEach(dataset => {
                        dataset.data.pop();
                    });
                    // 차트를 업데이트하여 시각적으로 반영
                    chart.update();
                }
            }
        ];

        const DATA_COUNT = 7;
        const NUMBER_CFG = { count: DATA_COUNT, min: -100, max: 100 };

        const labels = Utils.months({ count: DATA_COUNT });
        const data = {
            labels: labels,
            datasets: [
                {
                    label: 'Dataset 1',
                    data: Utils.numbers(NUMBER_CFG),
                    borderColor: 'red',
                    backgroundColor: Utils.transparentize('red', 0.5),
                },
                {
                    label: 'Dataset 2',
                    data: Utils.numbers(NUMBER_CFG),
                    borderColor: 'blue',
                    backgroundColor: Utils.transparentize('blue', 0.5),
                }
            ]
        };
        const config = {
            type: 'bar',
            data: data,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'Chart.js Bar Chart'
                    }
                }
            },
        };

        const myChart = new Chart(
            document.getElementById('myChart'),
            config
        );

        actions.forEach(action => {
            console.log(action);
            console.log(action.name.toLowerCase().replace(' ', ''));
            console.log(document.getElementById(action.name.toLowerCase().replace(' ', '')));

            document.getElementById(action.name.toLowerCase().replace(' ', '')).addEventListener('click', () => action.handler(myChart));
        });
    });


</script>

 

 

 

결론

이렇게 구성된 코드는 사용자가 버튼을 클릭할 때마다 특정 액션이 실행되어 차트에 변화를 주게 됩니다. 버튼 이벤트를 설정함으로써 사용자와 차트 간의 상호작용을 강화하고, 보다 풍부한 데이터 시각화를 구현할 수 있습니다.

이 내용을 블로그에 포함시키면, Chart.js에서 버튼 이벤트를 어떻게 사용하는지에 대한 전반적인 이해를 돕는 데 큰 도움이 될 것입니다.