Question

在脚本标签中，我添加了以下代码，我无法为其设置动画。善意的suugest

  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]);

    var options = {
      title: 'Company Performance',
       animation: {
          duration: 1000,
          easing: 'out'
      },
      vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}, minValue:0, maxValue:1000}
    };
    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

图表正在加载，但我无法为其设置动画。加载时动画

Answer 1

要在加载时设置动画，请将startup: true添加到动画选项中（参见documentation）。完整代码：

           animation: {
          duration: 1000,
          easing: 'out',
          startup: true
      }

Answer 2

当您更改数据中的某些内容时，您将看到动画。将您的代码更改为以下内容：

    ...
    chart.draw(data, options);

    setTimeout(function() {
        data.setValue(0, 2, 1000);
        chart.draw(data, options);
    }, 3000);

和费用值400将通过动画更改为1000.

查看此文档about animation以获取一些提示。

更新：似乎加载时没有动画，但你可以伪造它，就像在开始时加载全零，然后用真实数据重绘：

var data = google.visualization.arrayToDataTable([
  ['Year', 'Sales', 'Expenses'],
  ['2004',  0,      0],
  ['2005',  0,      0],
  ['2006',  0,      0],
  ['2007',  0,      0]
]);

var options = {
  title: 'Company Performance',
   animation: {
      duration: 1000,
      easing: 'out'
  },
  vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}, minValue:0, maxValue:1000}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);

var data = google.visualization.arrayToDataTable([
  ['Year', 'Sales', 'Expenses'],
  ['2004',  1000,      400],
  ['2005',  1170,      460],
  ['2006',  660,       1120],
  ['2007',  1030,      540]
]);
chart.draw(data, options);

Answer 3

使用此

var options = 
 {
   title: 'Total Sale Today',
   animation:
           {
               "startup": true,
               duration: 2000,
               easing: 'out'
           }
 }

Answer 4

var data = google.visualization.arrayToDataTable( chartArr );

var options = {
  sliceVisibilityThreshold: .0,
  pieHole: 0.3,
  legend: 'none',
  pieSliceText: 'label',
  height:500,
  width : "100%",
  is3D: true,
  animation:{
    duration: 5000,
    easing: 'out',
    startup: true //This is the new option
  },
};

var chart = new google.visualization.PieChart(document.getElementById('ethnicityChartInq'));

chart.draw(data, options);

// initial value
var percent = 0;
// start the animation loop
var handler = setInterval(function(){
    // values increment
    percent += 1;
    // apply new values
    data.setValue(0, 1, percent);
    data.setValue(1, 1, 100 - percent);

    // update the pie
    chart.draw(data, options);
    // check if we have reached the desired value
    if (percent > 74)
        // stop the loop
        clearInterval(handler);
}, 30);

Answer 5

您可以like this codepen手动使用css动画对其进行动画处理：

HTML：

<!-- adding class for animation -->
<div id="barchart_material" class="animated-chart animated-chart-start"></div>

Js：

// removing the class after a short delay
google.visualization.events.addListener(chart, 'ready', () => {
  setTimeout(() => {
    document.getElementById('barchart_material').classList.remove('animated-chart-start')
  }, 100)
});

Css：

.animated-chart g:nth-of-type(3) {
  transition: 1s;
  transform: scaleX(1);
    transform-origin: 70px 0;
}
.animated-chart.animated-chart-start g:nth-of-type(3) {
  transform: scaleX(0);
}

Run it live | React version

如何制作Google图表动画？

5 个答案: