如何修改Chartist.js折线图动画使其从图表底部启动

我看了你的代码和需求，问题出在当前的动画起始路径处理上——用scale(1, 0)加translate的方式，会让线条从x轴方向压缩的位置启动，而不是真正的图表底部。咱们可以直接修改路径的起始点y坐标，让所有线条/区域从图表底部开始动画。

修改步骤 #

在你处理line或area类型的draw事件回调里，替换原来的from路径生成逻辑：

原来的动画起始路径代码：

from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),

我们需要把路径的所有点的y值替换为图表的底部坐标（data.chartRect.bottom是Chartist提供的图表容器底部定位值），替换为以下逻辑：

from: data.path.clone().map(function(point) {
  // 将每个路径点的y坐标替换为图表底部坐标
  return {
    x: point.x,
    y: data.chartRect.bottom
  };
}).stringify(),

修改后的完整动画代码块 #

chart.on('draw', function(data) {
  if(data.type === 'point') {
    var circle = new Chartist.Svg('circle', {
      cx: [data.x],
      cy:[data.y],
      r:[5],
    }, 'ct-circle');
    data.element.replace(circle);
  } else if(data.type === 'line' || data.type === 'area') {
    data.element.animate({
      d: {
        begin: 1000 * data.index,
        dur: 1000,
        from: data.path.clone().map(function(point) {
          return {
            x: point.x,
            y: data.chartRect.bottom
          };
        }).stringify(),
        to: data.path.clone().stringify(),
        easing: Chartist.Svg.Easing.easeOutQuint
      }
    });
  }
});

（顺便把两个分开的chart.on('draw')回调合并了，这样代码更简洁）

为什么这样改？ #

• data.chartRect.bottom是Chartist计算出的图表容器底部y坐标，完全对应你想要的“图表底部”位置
• 用map遍历路径的每个点，统一替换y值为底部坐标，能确保线条/区域的起始状态完全贴合图表底部
• 相比原来的scale+translate方案，这种方式更精准，不会出现偏移或起始位置不对的问题

替换这段代码后，你的折线动画就会从图表底部开始啦。

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