[javascript] ApexCharts에서 차트에 로딩 애니메이션 표시하기
ApexCharts는 JavaScript로 작성된 오픈 소스 차트 라이브러리입니다. 이 라이브러리를 사용하면 데이터를 시각화하기 위한 다양한 차트를 생성할 수 있으며, 이 중에는 로딩 애니메이션을 표시하는 기능도 있습니다.
로딩 애니메이션을 차트에 표시하는 방법은 간단합니다. ApexCharts에서는 options 객체를 사용하여 다양한 설정을 지정할 수 있습니다. 여기에 chart 속성을 추가하고, animations 속성을 사용하여 로딩 애니메이션을 설정할 수 있습니다.
아래는 ApexCharts를 사용하여 로딩 애니메이션을 표시하는 예제 코드입니다.
// ApexCharts 로딩
var options = {
chart: {
animations: {
enabled: true, // 애니메이션 활성화
easing: 'easeinout', // 애니메이션 이징 설정
speed: 800, // 애니메이션 속도 설정
animateGradually: {
delay: 500 // 애니메이션 지연 시간 설정
}
}
},
// 차트 설정
series: [{
name: 'Series 1',
data: [30, 40, 45, 50, 49, 60, 70, 91, 125]
}],
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
}
};
// ApexCharts 인스턴스 생성
var chart = new ApexCharts(document.querySelector("#chart"), options);
// 차트 로딩 애니메이션 보여주기
chart.showLoading();
// 데이터 로딩
setTimeout(function() {
// 데이터 로딩 후 차트 갱신
chart.updateSeries([{
name: 'Series 1',
data: [30, 40, 45, 50, 49, 60, 70, 91, 125]
}]);
// 로딩 애니메이션 숨기기
chart.hideLoading();
}, 2000);
// 차트 render
chart.render();
위의 코드에서 animations 속성 아래의 enabled 속성을 true로 설정하면 애니메이션이 활성화됩니다. easing 속성은 애니메이션의 이징을 설정하며, speed 속성은 애니메이션 속도를 설정합니다. 또한 animateGradually 속성의 delay 속성을 사용하여 애니메이션의 지연 시간을 설정할 수 있습니다.
위의 예제 코드는 차트를 로딩한 후 showLoading() 함수를 호출하여 로딩 애니메이션을 표시하고, 일정 시간 지난 후 실제 데이터를 로딩한 뒤 hideLoading() 함수를 호출하여 로딩 애니메이션을 숨기고, 차트를 갱신합니다.
ApexCharts의 로딩 애니메이션 기능을 사용하면 사용자에게 차트 데이터를 로딩 중임을 시각적으로 보여줄 수 있습니다.