Question

我使用Chartist.js生成折线图，效果很好，但我注意到默认情况下线条动画从图表底部开始的某个高度开始：

如何修改我的代码以从图表底部开始行动画，如下所示：

这是我的代码：

function graph(month,shop,sale){
    var data = {         
      labels: month,          
      series: [sale,shop]
    };

    var options = {
      fullWidth:true,
      height: 380, 
      showPoint: true,
      low: 0,
      showArea: true,
      lineSmooth: false,
      plugins: [
          Chartist.plugins.legend({
              legendNames: ['Sale', 'Shop'],
          })
      ]
    };

   var chart = new Chartist.Line('.ct-chart', data, options);

    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);
      }
    });

    chart.on('draw', function(data) {
      if(data.type === 'line' || data.type === 'area') {
        data.element.animate({
          d: {
            begin: 1000 * data.index,
            dur: 1000,
            from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
            to: data.path.clone().stringify(),
            easing: Chartist.Svg.Easing.easeOutQuint
          }
        });
      }
    });      
}

var data = {         
   labels: ['Enero', 'Febrero', 'Marzo','Abril','Mayo','Junio']
};

var options = {
  fullWidth:true,
  height: 380
};

new Chartist.Line('.ct-chart', data, options);

$(document).ready(function(){
  $.ajax({
      url: "myfile.php",
      type: "GET",
      dataType: "json",
      success: function(resp)
      {
        var month = resp[0];
        var shop = resp[1];
        var sale = resp[2];  

        graph(month,shop,sale);
      }
  });
});

我想要一些帮助。

Answer 1

如果您使用Google开发人员工具检查元素，则会发现图表中的“ ct-series ct-series-b”类具有特定的高度，不会一直下降。如果随后在图表绘制时更改动画，例如：

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

该线将从ct系列b的高度+ 15px一直延伸到圆点。

希望对您有帮助，狮子座。

宪章线图动画从底部开始

1 个答案: