时间戳

首页 > 解决方案 > Chartist 折线图动画从底部开始

javascript - Chartist 折线图动画从底部开始

问题描述

我正在使用 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);
      }
  });
});

我想要一些帮助。

标签： javascriptjquerychartschartist.js

解决方案

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

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

这条线将从 ct-series-b + 15px 的高度一直到圆点。

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

推荐阅读