Анимация графиков линейных графиков начинается снизу - PullRequest
Новая
       12

Анимация графиков линейных графиков начинается снизу

0 голосов
/ 23 мая 2018

Я использую Chartist.js для генерации линейных графиков. Это прекрасно работает, но я замечаю, что анимация линий начинается по умолчанию на определенной высоте от основания диаграммы:

enter image description here

Как я могу изменить свой код для запуска анимации линий в нижней части диаграммы, например:

enter image description here

Этомой код: 

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

Мне нужна помощь.

1 Ответ

0 голосов
/ 17 сентября 2018

Если вы осмотрите элементы с помощью инструментов разработчика Google, вы обнаружите, что класс "ct-series ct-series-b" из диаграммы имеет определенную высоту, которая не опускается полностью.Если вы затем измените анимацию, когда график будет выглядеть примерно так: 

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

Линия начнется с высоты ct-series-b + 15px вплоть до точек круга.

Надеюсь, это поможет, Лев.

...