材质柱形图动画不起作用

时间:2019-03-29 12:11:05

标签: charts google-visualization

我正在使用“材质柱形图”创建报告,并试图在页面中渲染时具有动画效果,因此我使用了文档中给出的animation属性。我已经建立了条形图并应用了动画效果很好的动画,并为此图表使用了相同的属性,但是呈现的效果并不理想。

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

function drawChart() {

     function countProperties(obj) {
      var count = 0;
      for(var prop in obj) {
        if(obj.hasOwnProperty(prop))
          ++count;
      }
      return count;
    }

    var data1 = new google.visualization.DataTable();

     data1.addColumn('string', 'Course Name');
     data1.addColumn('number', 'Total Activities');
     data1.addColumn('number', 'In progress Activities');
     data1.addColumn('number', 'Completed Activities');
     data1.addRows(countProperties(user_course_details));
          var i=0;
     for (var key in user_course_details) {
      if (user_course_details.hasOwnProperty(key)) {

          var val = user_course_details[key];

           data1.setCell(i,0,val.fullname);
           data1.setCell(i,1,val.activitiescount);
           data1.setCell(i,2,val.activitiescount - val.activitiescompletedcount);
           data1.setCell(i,3,val.activitiescompletedcount);
           i++;
        }
      }

    var options = {

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

      chart: {
        title: 'Activities Overview',      
      },
      bar: {groupWidth: "25%"},
    };

    var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

    chart.draw(data1, google.charts.Bar.convertOptions(options));
  }

在上面的代码中,我希望柱形图可以通过动画呈现,因此我在图表选项中添加了animation属性,但是它的行为不符合预期。提前致谢。如果我错过了任何内容,请指导我,我正在尝试熟悉Google Visualization API。

0 个答案:

没有答案