[javascript] Chart.js의 애니메이션 효과

27 Nov 2023

javascript

Chart.js에서 애니메이션 효과를 사용하려면, 각 차트 유형에 대해 설정할 수 있는 여러 애니메이션 옵션을 활용해야 합니다. 예를 들어, 다음은 원형 차트에 애니메이션을 적용하는 방법입니다:

var chart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
            data: [10, 20, 30],
            backgroundColor: ['red', 'blue', 'yellow']
        }]
    },
    options: {
        animation: {
            animateScale: true,
            animateRotate: true
        }
    }
});

위의 코드에서 animation 객체의 animateScale 및 animateRotate 옵션을 true로 설정하면, 차트가 초기화되거나 데이터가 변경될 때 애니메이션 효과가 적용됩니다. animateScale은 차트의 크기 변경에 대한 애니메이션을, animateRotate는 차트의 회전에 대한 애니메이션을 의미합니다.

또한, Chart.js에서는 다른 애니메이션 옵션들도 사용할 수 있습니다. 예를 들어, animation 객체의 duration 옵션을 사용하여 애니메이션의 지속 시간을 조절할 수 있습니다.

다음은 막대 차트에 애니메이션을 적용하는 방법입니다:

var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [{
            label: 'Sales',
            data: [50, 60, 70, 80, 90, 100],
            backgroundColor: 'green'
        }]
    },
    options: {
        animation: {
            duration: 2000,
            easing: 'easeInOutQuart'
        }
    }
});

위의 코드에서 animation 객체의 duration 옵션을 2000으로 설정하고, easing 옵션을 easeInOutQuart로 설정하면, 막대 차트가 2초 동안 부드럽게 애니메이션됩니다. easing 옵션은 차트의 애니메이션 속도 곡선을 조절하는 데 사용됩니다.

Chart.js의 애니메이션 효과에 대한 자세한 내용은 공식 문서를 참조하시기 바랍니다.