Question

我正在使用谷歌图表，但我希望它与动画..和动画不工作有什么不对的是我的代码

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

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Yıl', 'Toplam Satış Miktarı (Ton)'],
        ['2007', 153888],
        ['2008', 37634],
        ['2009', 21835],
        ['2010', 80929],
        ['2011', 137699],
        ['2012', 313837],
        ['2013', 1050000], ]);

    var options = {
        title: 'Ciro',
        'width': 850,
        animation: {
            duration: 1000,
            easing: 'out'
        },
        'height': 400,
        hAxis: {
            title: 'Yıl',
            titleTextStyle: {
                color: 'red'
            }
        }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

Answer 1

新版本支持启动动画

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

Answer 2

这可能是因为您每次绘制图表时都会创建一个新的图表实例：

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

尝试将上面的代码放在draw方法的“outside”之外，然后在draw方法中说：

chart.draw(data, options);

我以前做过这件事并且有效。

Answer 3

我假设你第一次绘制谷歌图表时想要动画。谷歌图表实际上只在您更改值时才支持动画。请尝试以下方法：

     var data = google.visualization.arrayToDataTable([
          ['Yıl', 'Toplam Satış Miktarı (Ton)'],
          ['2007', 153888],
          ['2008', 37634],
          ['2009', 21835],
          ['2010', 80929],
          ['2011', 137699],
          ['2012', 313837],
          ['2013', 1050000], ]);

      var options = {
          title: 'Ciro',
          'width': 850,
          animation: {
              duration: 1000,
              easing: 'out'
          },
          'height': 400,
          hAxis: {
              title: 'Yıl',
              titleTextStyle: {
                  color: 'red'
              }
          },
          vAxis: {minValue:0, maxValue:1200000}
      };

      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      var data1 = google.visualization.arrayToDataTable([
          ['Yıl', 'Toplam Satış Miktarı (Ton)'],
          ['2007', 0],
          ['2008', 0],
          ['2009', 0],
          ['2010', 0],
          ['2011', 0],
          ['2012', 0],
          ['2013', 0], ]);
      chart.draw(data1, options);
      chart.draw(data, options);

您可以将代码修改为更具可读性，但我试图明确。

Answer 4

请参阅以下代码，在Google图表中执行动画。

        var index = 0;
        var chartData =[153888,37634,21835,80929,137699,313837,1050000];
        var drawChart = function() {
            console.log('drawChart index ' + index);
            if (index < chartData.length) {
                data.setValue(index, 1, chartData[index++]);
                chart.draw(data, options);
            }
        }

        google.visualization.events.addListener(chart, 'animationfinish', drawChart);

查看jqfaq.com的工作样本。希望这会对你有所帮助。

Answer 5

试试这个：

// create a DataView with 0's in every row of the 'Toplam Satış Miktarı (Ton)' column
var view = new google.visualization.DataView(data);
view.setColumns([0, {
    type: 'number',
    label: data.getColumnLabel(1),
    calc: function () {return 0;}
}]);
// create 'ready' event listener to redraw the chart (triggering the animations)
// when the chart is finished drawing
var animate = google.visualization.events.addListener(chart, 'ready', function () {
    // remove the listener so this doesn't repeat ad infinitum
    google.visualization.events.removeListener(animate);
    // draw the chart using the real data, triggering the animation
    chart.draw(data, options);
});
// draw the chart using the view
chart.draw(view, options);

Answer 6

我在仪表图上也遇到了类似的问题。就我而言，这是因为我异步加载了数据，并同时更新了标签和图表的值。当我单独进行操作时，它会起作用。

所以代替这个：

iVeChartData.setValue(0, 1, myValue); //Update value
iVeChartData.setValue(0, 0, myLabel); //Update label from "Loading.." to something else
window.iVeChart.draw(iVeChartData, iVeChartOptions); //Update chart

我这样做了：

iVeChartData.setValue(0, 0, myLabel); //Update label from "Loading.." to something else
window.iVeChart.draw(iVeChartData, iVeChartOptions); //Update chart
iVeChartData.setValue(0, 1, myValue); //Update value
window.iVeChart.draw(iVeChartData, iVeChartOptions); //Update chart

Google Chart - Animate无效

6 个答案: