Animation 如何设置谷歌图表的动画？

在脚本标记中，我添加了以下代码，但我无法设置动画。谢天谢地

google.load（“可视化”，“1”，“{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“年度”、“销售额”、“费用”]，
['2004',  1000,      400],
['2005',  1170,      460],
['2006',  660,       1120],
['2007',  1030,      540]
]);
变量选项={
标题：“公司业绩”，
动画：{
持续时间：1000，
放松：“退出”
},
变量：{title:'Year'，titleTextStyle:{color:'red'}，最小值：0，最大值：1000}
};
var chart=new google.visualization.BarChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
}

---

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

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

。。。
图表绘制（数据、选项）；
setTimeout（函数（）{
数据设置值（0,2,1000）；
图表绘制（数据、选项）；
}, 3000);

使用动画，费用值400将更改为1000

查看此文档以获得一些提示

更新：似乎没有加载动画，但您可以像这样假装加载所有零，然后使用真实数据重新绘制：

var data=google.visualization.arrayToDataTable([
[“年度”、“销售额”、“费用”]，
['2004',  0,      0],
['2005',  0,      0],
['2006',  0,      0],
['2007',  0,      0]
]);
变量选项={
标题：“公司业绩”，
动画：{
持续时间：1000，
放松：“退出”
},
变量：{title:'Year'，titleTextStyle:{color:'red'}，最小值：0，最大值：1000}
};
var chart=new google.visualization.BarChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
var data=google.visualization.arrayToDataTable([
[“年度”、“销售额”、“费用”]，
['2004',  1000,      400],
['2005',  1170,      460],
['2006',  660,       1120],
['2007',  1030,      540]
]);
图表绘制（数据、选项）；

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

。。。
图表绘制（数据、选项）；
setTimeout（函数（）{
数据设置值（0,2,1000）；
图表绘制（数据、选项）；
}, 3000);

使用动画，费用值400将更改为1000

查看此文档以获得一些提示

更新：似乎没有加载动画，但您可以像这样假装加载所有零，然后使用真实数据重新绘制：

var data=google.visualization.arrayToDataTable([
[“年度”、“销售额”、“费用”]，
['2004',  0,      0],
['2005',  0,      0],
['2006',  0,      0],
['2007',  0,      0]
]);
变量选项={
标题：“公司业绩”，
动画：{
持续时间：1000，
放松：“退出”
},
变量：{title:'Year'，titleTextStyle:{color:'red'}，最小值：0，最大值：1000}
};
var chart=new google.visualization.BarChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
var data=google.visualization.arrayToDataTable([
[“年度”、“销售额”、“费用”]，
['2004',  1000,      400],
['2005',  1170,      460],
['2006',  660,       1120],
['2007',  1030,      540]
]);
图表绘制（数据、选项）；

要在加载时设置动画，请将

启动：true

添加到动画选项中（参见）。完整代码：

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

---

要在加载时设置动画，请将

startup:true

添加到动画选项（参见）。完整代码：

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

---

使用这个

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

---

使用这个

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

---

您可以使用css动画手动设置动画：

Html:

Css:

|

---

您可以使用css动画手动设置动画：

Html:

Css:

|

---

不，我的意思是在加载页面时设置动画，请检查。似乎加载时没有动画不，我是说在加载页面时设置动画请检查。我知道这很旧，但是，这对我来说很好，而且似乎是正式的方式。我知道这很旧，但是，这对我来说很好，似乎是正式的方式。你能详细说明吗？你能详细说明吗？

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

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