[javascript] Chartkick에서 사용 가능한 차트 애니메이션 이동 이징 설정 방법
Chartkick은 사용자가 간단하게 차트를 생성하고 표시할 수 있는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 다양한 종류의 차트를 생성하고, 사용자가 설정한 데이터를 시각적으로 표시할 수 있습니다.
Chartkick에서는 차트의 애니메이션 이동에 대한 설정을 제공합니다. 이 설정을 통해 차트가 데이터를 업데이트할 때 부드럽게 이동하는 모션을 설정할 수 있습니다. 이 프로세스를 이징(easing)이라고도 합니다.
다음은 Chartkick에서 사용 가능한 차트 애니메이션 이동 이징을 설정하는 방법입니다.
1. Chartkick 라이브러리 로드하기
먼저, Chartkick 라이브러리를 HTML 파일에 로드해야 합니다. 다음과 같이 <script> 태그를 사용하여 Chartkick를 로드합니다.
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.chartkick.com/2.3.5/chartkick.js"></script>
2. 차트 생성하기
Chartkick에서 차트를 생성하기 위해 new Chartkick.LineChart 또는 new Chartkick.BarChart 등의 생성자 함수를 사용합니다. 이때 생성자 함수에 애니메이션 이동 이징 설정을 추가할 수 있습니다.
new Chartkick.LineChart("chart", data, { easing: "easeOutExpo" });
위의 예제에서 easing 속성은 애니메이션 이동에 사용할 이징 함수를 설정하는데 사용됩니다. Chartkick에서는 다양한 이징 함수를 지원합니다.
3. 이징 옵션 설정하기
Chartkick에서 지원하는 이징 함수 목록은 다음과 같습니다.
- “linear” (선형 이징)
- “easeInQuad” (천천히 시작하여 빠르게 가속하는 이징)
- “easeOutQuad” (빠르게 시작하여 천천히 감속하는 이징)
- “easeInOutQuad” (천천히 시작하여 가속하고, 마지막에는 천천히 감속하는 이징)
- “easeInCubic” (천천히 시작하여 더욱 가속하는 이징)
- “easeOutCubic” (빠르게 시작하여 천천히 감속하는 이징)
- “easeInOutCubic” (천천히 시작하여 가속하고, 마지막에는 천천히 감속하는 이징)
- “easeInQuart” (천천히 시작하여 더욱 가속하는 이징)
- “easeOutQuart” (빠르게 시작하여 천천히 감속하는 이징)
- “easeInOutQuart” (천천히 시작하여 가속하고, 마지막에는 천천히 감속하는 이징)
- “easeInQuint” (천천히 시작하여 더욱 가속하는 이징)
- “easeOutQuint” (빠르게 시작하여 천천히 감속하는 이징)
- “easeInOutQuint” (천천히 시작하여 가속하고, 마지막에는 천천히 감속하는 이징)
- “easeInSine” (천천히 시작하여 더욱 가속하는 이징)
- “easeOutSine” (빠르게 시작하여 천천히 감속하는 이징)
- “easeInOutSine” (천천히 시작하여 가속하고, 마지막에는 천천히 감속하는 이징)
- “easeInExpo” (천천히 시작하여 더욱 가속하는 이징)
- “easeOutExpo” (빠르게 시작하여 천천히 감속하는 이징)
- “easeInOutExpo” (천천히 시작하여 가속하고, 마지막에는 천천히 감속하는 이징)
- “easeInCirc” (천천히 시작하여 빠르게 가속하는 이징)
- “easeOutCirc” (빠르게 시작하여 천천히 감속하는 이징)
- “easeInOutCirc” (천천히 시작하여 가속하고, 마지막에는 천천히 감속하는 이징)
- “easeInElastic” (탄력적으로 시작하여 천천히 감속하는 이징)
- “easeOutElastic” (탄력적으로 시작하여 천천히 감속하는 이징)
- “easeInOutElastic” (탄력적으로 시작하여 천천히 가속하는 이징)
- “easeInBack” (빠르게 시작하여 천천히 감속하는 이징)
- “easeOutBack” (빠르게 시작하여 천천히 감속하는 이징)
- “easeInOutBack” (천천히 시작하여 가속하고, 마지막에는 천천히 감속하는 이징)
- “easeInBounce” (활기차게 시작하여 천천히 감속하는 이징)
- “easeOutBounce” (활기차게 시작하여 천천히 감속하는 이징)
- “easeInOutBounce” (활기차게 시작하여 천천히 감속하는 이징)
원하는 이징 함수를 선택하여 적절한 옵션을 설정하면 됩니다.