Muszę użyć vAxis {logScale : true ,...} w opcjach AreaChart Pakiet Google Pakiet, ale , gdy dodam logScale : true Do jego opcji powoduje problem w skanowaniu animacji.

Kiedy usuwam , animacja działa ładnie.

Czy jest jakiś sposób, aby pokazać animację na starcie przez google wykres, gdy vAxis.logScale jest true?

Demo

      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2013',  1000,      400],
          ['2014',  1170,      460],
          ['2015',  660,       1120],
          ['2016',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
          vAxis: {
            minValue: 0,
            logScale:true  // << It cause animation problem
          },          
          animation:{
          startup:true,
          duration: 1000,
          easing: 'out',
          },

        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="chart_div" style="width: 100%; height: 500px;"></div>
   
0
Ramin Bateni 26 czerwiec 2017, 08:07

3 odpowiedzi

Najlepsza odpowiedź

Są trochę Znane problemy przy użyciu animation.startup
To wydaje się być innym ...

Aby uzyskać animację do pracy z logScale,
Usuń animation.startup

Użyj pustej tabeli danych, aby początkowo narysować wykres

I jeden raz 'ready' słuchacza zdarzenia,
Aby natychmiast narysować wykres z poprawnymi danymi ...


Zobacz następujący fragment roboczy ...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['', 0, 0],
    ]);

    var options = {
      title: 'Company Performance',
      hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
      vAxis: {
        minValue: 0,
        logScale: true
      },
      animation:{
        duration: 1000,
        easing: 'out'
      }
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));

    google.visualization.events.addOneTimeListener(chart, 'ready', function () {
      data.removeRow(0);
      data.addRows([
        ['2013', 1000, 400],
        ['2014', 1170, 460],
        ['2015', 660, 1120],
        ['2016', 1030, 540]
      ]);
      chart.draw(data, options);
    });

    chart.draw(data, options);

    $(window).resize(function() {
      chart.draw(data, options);
    });
  },
  packages: ['corechart']
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
0
WhiteHat 26 czerwiec 2017, 11:54

Rozwiązanie tego problemu zmienia opcję konfiguracji swojego {x0}} do:

      vAxis: {
        minValue: 0,
        0: {logScale: true}
      }

Dokonywanie pierwszej osi na wykresie skalowane jako dziennik.

-1
RH7 26 czerwiec 2017, 09:58

Zrobiłem naprawę dla tego 1 błąd .

Używanie go jest tak proste . Wystarczy dodać następujące funkcje Fix do skryptu i , zadzwoń do tego przed pierwszym chart.draw(...) .

Funkcja poprawki:

function fixLogScaleAnimation(chart,data, opts){
    if(opts.vAxis.logScale){
        opts.vAxis.logScale=false;
        google.visualization.events.addOneTimeListener(chart, 'ready', function () {
            opts.vAxis.logScale=true;
            chart.draw(data, opts);
        });
     }
 }

Zastosowanie:

chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
fixLogScaleAnimation(chart,data, options); // << Call the fix function here
chart.draw(data, options);

demo:

function fixLogScaleAnimation(chart,data, opts){
    if(opts.vAxis.logScale){
        opts.vAxis.logScale=false;
        google.visualization.events.addOneTimeListener(chart, 'ready', function () {
            opts.vAxis.logScale=true;
            chart.draw(data, opts);
        });
     }
 }

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2013',  1000,      400],
    ['2014',  1170,      460],
    ['2015',  660,       1120],
    ['2016',  1030,      540]
  ]);

  var options = {
    title: 'Company Performance',
    hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
    vAxis: {
      minValue: 0,
      logScale:true  // << It cause animation problem
    },          
    animation:{
    startup:true,
    duration: 1000,
    easing: 'out',
    },

  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  fixLogScaleAnimation(chart,data, options); 
  chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 100%; height: 500px;"></div>

Myślę, że mój sposób jest lepszym (prostym i czystym) rozwiązaniem tego problemu i zrobiłem to, zanim ktokolwiek napisze na to, ale Mark @ Whitehat's Odpowiedz jako zaakceptowaną odpowiedź, ponieważ jego rozwiązanie też działa dobrze i napisał swoje Odpowiedz tutaj przede mną. ;)

0
RAM 26 czerwiec 2017, 22:13