2

我正在尝试创建一个具有动画但也具有交替颜色的图形我能够使图形显示交替颜色，但第二种颜色没有动画，它只是在所有内容加载后出现

我的代码：

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      function drawChart() {
          // Create and populate the data table.
        var option = {title:"Some Graph that doesn't actually show anything",
                     width:900, height:500,
                     animation: {duration: 2000, easing: 'out',},
                     vAxis: {title: "Yearly Spending"},
                     isStacked:true,
                     hAxis: {title: "Some Amount", minValue:0, maxValue:100},
                     series: [{color: '#5B6770', visibleInLegend: true}, {color: '#CF4520', visibleInLegend: true}]     
                     };
        var data = new google.visualization.DataTable();    
        data.addColumn('string', 'N');
        data.addColumn('number', 'Percent');
        data.addRow(['2003', 0]);
        data.addRow(['2004', 0]);
        data.addRow(['2005', 0]);
        data.addRow(['2006', 0]);
        data.addRow(['2007', 0]);
        data.addRow(['2008', 0]);
        data.addRow(['2009', 0]);
        data.addRow(['2010', 0]);
        data.addRow(['2011', 0]);
        data.addRow(['2012', 0]);
        data.addRow(['2013', 0]);
        data.addColumn('number', 'Other');

        // Create and draw the visualization.
        var chart = new google.visualization.BarChart(document.getElementById('chart'));
        chart.draw(data, option);
        data.setValue(0, 1, 75);
        data.setValue(1, 2, 55);
        data.setValue(2, 1, 30);
        data.setValue(3, 2, 75);
        data.setValue(4, 1, 65);
        data.setValue(5, 2, 20);
        data.setValue(6, 1, 56);
        data.setValue(7, 2, 75);
        data.setValue(8, 1, 55);
        data.setValue(9, 2, 63);
        data.setValue(10, 1, 48);
        chart.draw(data, option);
      }

      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);

    </script>
  </head>
  <body>
    <div id="chart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

我怎样才能让它所有的酒吧都动画？

4

1 回答 1

2

当您最初初始化图表时，第 3 列中有空值（因为您添加了图表但没有行值）。因此，我认为 API 不会为这些值设置动画。如果您按如下方式更改代码，它会为我制作所有条形动画：

function drawChart() {
  // Create and populate the data table.
  var option = {title:"Some Graph that doesn't actually show anything",
                width:900, height:500,
                animation: {duration: 2000, easing: 'out',},
                vAxis: {title: "Yearly Spending"},
                isStacked:true,
                hAxis: {title: "Some Amount", minValue:0, maxValue:100},
                series: [{color: '#5B6770', visibleInLegend: true}, {color: '#CF4520', visibleInLegend: true}]     
               };
  var data = new google.visualization.DataTable();    
  data.addColumn('string', 'N');
  data.addColumn('number', 'Percent');
  data.addColumn('number', 'Other');
  data.addRows([
    ['2003', 0, 0],
    ['2004', 0, 0],
    ['2005', 0, 0],
    ['2006', 0, 0],
    ['2007', 0, 0],
    ['2008', 0, 0],
    ['2009', 0, 0],
    ['2010', 0, 0],
    ['2011', 0, 0],
    ['2012', 0, 0],
    ['2013', 0, 0]
  ]);

  // Create and draw the visualization.
  var chart = new google.visualization.BarChart(document.getElementById('chart'));
  chart.draw(data, option);
  data.setValue(0, 1, 75);
  data.setValue(1, 2, 55);
  data.setValue(2, 1, 30);
  data.setValue(3, 2, 75);
  data.setValue(4, 1, 65);
  data.setValue(5, 2, 20);
  data.setValue(6, 1, 56);
  data.setValue(7, 2, 75);
  data.setValue(8, 1, 55);
  data.setValue(9, 2, 63);
  data.setValue(10, 1, 48);
  chart.draw(data, option);
}

我稍微清理了代码，以便在定义数据、使用addRows方法和首先添加所有列分配时更容易看到你在做什么。否则代码与您的相同。

于 2013-09-10T01:53:05.187 回答