Question

我需要在vAxis {logScale : true ,...} Google图表套餐的选项中使用AreaChart，但添加 {{1 }} 到它的选项，它会导致动画扫描出现问题。

当我删除时，动画效果很好。

当logScale : true为vAxis.logScale时，是否有任何方法可以通过Google图表显示动画启动？

演示

＆＃13;

true

＆＃13;

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

＆＃13;

Answer 1

使用animation.startup时有一些known issues 这似乎是另一个......

让动画与logScale一起使用，
删除animation.startup

使用空白数据表初步绘制图表

和一次 'ready'事件监听器，
用正确的数据立即再次绘制图表......

请参阅以下工作代码段...

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>

Answer 2

我自己修复了这个 bug 。

使用这么简单。只需将以下修复功能添加到您的脚本中，然后先调用它chart.draw(...) 。

修复功能：

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

使用：

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

<强>演示：

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>

我认为我的方法是一个更好（简单和干净）的解决方案来解决这个问题，我在此之前为此写了一个答案，但我将@ WhiteHat的答案标记为已接受的答案，因为他的解决方案效果也很好他在我面前写了他的答案。 ;）

Answer 3

此问题的解决方案是将vAxis的配置选项更改为：

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

使图表上的第一个轴缩放为日志。

当vAxis.logScale为true时，有没有显示Google Chart Animation的技巧？

3 个答案: