如何设置React中Chart.js折线图所有数据集从底部入场？

Chart.js默认会根据数据集位置自动分配入场动画方向，导致双数据集一个从底部、一个从顶部入场。要统一从底部入场，需修正动画配置的from.y值（不支持直接用'bottom'字符串，需用具体坐标值）：

方式一：全局统一配置 #

在图表options中设置全局动画规则，所有数据集遵循同一逻辑：

options: {
  animations: {
    enter: {
      duration: 1000, // 可自定义动画时长
      from: {
        // 动态获取Y轴最小刻度（对应图表底部）作为动画起点
        y: (context) => context.chart.scales.y.min
      }
    }
  }
}

方式二：数据集单独配置 #

若需微调单个数据集的动画参数但保持入场方向一致，可在每个数据集内单独配置：

datasets: [
  {
    label: '数据集1',
    data: [20, 45, 30],
    animations: {
      enter: {
        from: {
          y: (context) => context.chart.scales.y.min
        }
      }
    }
  },
  {
    label: '数据集2',
    data: [15, 35, 40],
    animations: {
      enter: {
        from: {
          y: (context) => context.chart.scales.y.min
        }
      }
    }
  }
]

关键说明 #

context.chart.scales.y.min会动态匹配Y轴的最小刻度值，确保动画起点始终对应图表底部，即使数据范围变动也能自适应。如果Y轴固定从0开始，也可以直接写y: 0替代动态获取。

内容的提问来源于stack exchange，提问作者Kyle Trahan