SuperAPI AI 工具集

chartjs-animations

设计与创作

查看项目

更新于 10-16 05:44

技能介绍

用途:本技能面向 Chart.js(v4.5.1)图表的动画配置与自定义,覆盖初始化、数据更新和用户交互时的动画反馈。

主要能力:通过三个配置键控制动画——animation 管全局设置(时长、缓动、延迟、循环),animations 做属性级动画(如只动 y 值、颜色、tension),transitions 定义交互模式动画(active 悬停约 400ms、resize、show/hide、reset 等)。支持 36 种缓动函数,如 linear、easeOutQuart、easeOutBounce、easeOutElastic、easeInOutCubic 等。

用法:在 options 中写 animation: { duration, easing, delay, loop };用 animations: { y: { from: 0, easing: 'easeOutBounce' } } 定制单属性;用 transitions: { active: { animation: { duration: 600 } } } 改悬停效果。动画回调 onProgress、onComplete 接收 chart、currentStep、initial、numSteps。可用 chart.update('none') 跳过动画,animation: false 全局禁用。示例框架包括 react-chartjs-2 与 vue-chartjs。

限制:具体收费、价格、平台支持情况暂未提供;性能建议仅提及大数据集缩短时长。