3

我正在使用谷歌图表，但我想要它与动画..动画不工作出了什么问题那是我的代码

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

6 回答 6

6

新版本支持启动动画

animation: {
   startup:true,
   duration: 1000,
   easing: 'out'
}
于 2015-11-27T03:06:32.393 回答
4

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

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

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

chart.draw(data, options);

我以前做过这个，它有效。

于 2015-03-10T22:04:17.897 回答
3

我假设您第一次绘制谷歌图表时想要动画。当您更改值时，Google 图表实际上只支持动画。尝试以下操作：

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

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

于 2013-07-18T14:23:13.820 回答
1

请参阅下面的代码在谷歌图表中做动画。

        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以获取工作示例。希望这会帮助你。

于 2013-07-22T08:01:31.687 回答
1

尝试这个：

// 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);
于 2013-07-23T16:58:06.367 回答
0

我对仪表图有类似的问题。就我而言，这是因为我异步加载了数据，并同时更新了图表的标签和值。当我单独做时，它起作用了。

所以代替这个：

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
于 2019-11-21T09:42:45.007 回答