Chart.js自定义模式创建、可动画属性及过渡配置咨询

创建自定义动画模式 #

要创建自定义动画模式，直接在图表配置的options.transitions下定义新的模式名称即可，每个模式需指定触发事件（可选）、要动画的属性以及对应的动画规则。

示例：定义一个名为customFadeUp的自定义模式，实现元素淡入+上移的动画：

const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{data: [10, 20, 30]}]
  },
  options: {
    transitions: {
      // 自定义模式名称
      customFadeUp: {
        // 可选：指定触发该模式的事件，若不设置可通过chart.update('customFadeUp')手动触发
        trigger: 'customTrigger',
        // 动画核心配置
        animation: {
          duration: 800,
          easing: 'easeOutQuart',
          // 自定义y轴起始位置（从图表底部开始）
          from: ctx => ({ y: ctx.chart.chartArea.bottom }),
          to: ctx => ({ y: ctx.y }),
          // 同时动画透明度
          opacity: {from: 0, to: 1}
        },
        // 指定要应用动画的元素属性
        properties: ['y', 'opacity']
      }
    }
  }
});

// 手动触发自定义模式动画
chart.update('customFadeUp');

可配置的动画属性 #

Chart.js的动画配置支持以下核心属性，同时针对不同图表类型，还支持元素专属的动画属性：

• 基础动画属性：
  • duration: 动画时长（毫秒，默认1000）
  • easing: 缓动函数，可选值如'linear'、'easeInQuad'、'easeOutBounce'等
  • delay: 动画延迟（毫秒，支持函数动态设置）
  • from/to: 动画的起始/结束值，可为固定值或接收元素上下文的函数
• 元素专属属性：
  • 柱状图：x、y、width、height、opacity
  • 折线图：point.x、point.y、point.radius、strokeWidth、opacity
  • 饼图：rotation、circumference、opacity

自定义过渡效果的实战配置 #

如果需要在数据更新时应用自定义过渡，只需在调用chart.update()时传入自定义模式名称，或者将默认过渡替换为自定义模式：

示例：将图表默认更新过渡设置为自定义模式

options: {
  transitions: {
    // 自定义数据更新时的过渡
    dataSwitch: {
      animation: {
        duration: 600,
        easing: 'easeOutBack',
        // 柱状图宽度从0过渡到目标值
        width: {from: 0, to: ctx => ctx.width}
      },
      properties: ['width']
    }
  },
  // 设置默认使用自定义过渡模式
  animation: {mode: 'dataSwitch'}
}

内容的提问来源于stack exchange，提问作者michele thefirst