添加动画到谷歌vizualisations (列图表)？

Question

我想知道是否有任何资源，我可以如何使我的谷歌图形看起来更圆滑通过CSS3动画。

我一直在查看一些CSS3动画(http://www.justinaguilar.com/animations/index.html)，并希望在我的谷歌图表的列上实现"pullUp“动画。我知道我需要将'pullUp‘类添加到每个列中；但是，由于该列是通过Javascript动态创建的，所以我不确定实现这一点的最佳方法。

有人能提供一些指点或帮助吗？附件是我现有代码的代码库：CodePen链路

任何帮助都是非常感谢的！谢谢!

Answer 1

图表支持开箱即用的动画:当您更改数据时，它们会动画，所以您可以用一个空数据集绘制图表，然后用完整的数据集重新绘制它，然后它就会动画：

function drawVisualization() {
    // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
        ['Tracker', '1', '2', '3'],
        ['A', 475, 450, 190],
        ['B', 300, 290, 20],
        ['C', 360, 340, 120],
        ['D', 180, 170, 250]
    ]);

    // use a DataView to 0-out all the values in the data set for the initial draw
    var view = new google.visualization.DataView(data);
    view.setColumns([0, {
        type: 'number',
        label: data.getColumnLabel(1),
        calc: function () {return 0;}
    }, {
        type: 'number',
        label: data.getColumnLabel(2),
        calc: function () {return 0;}
    }, {
        type: 'number',
        label: data.getColumnLabel(3),
        calc: function () {return 0;}
    }]);

    // Create and draw the visualization.


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

    var options = {
        title:"Sub-Region vs Region vs Budget",
        legend: 'bottom',
        hAxis: {
            title: ""
        },
        animation: {
            duration: 1000
        },
        vAxis: {
            // set these values to make the initial animation smoother
            minValue: 0,
            maxValue: 600
        }
    };

    var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
        google.visualization.events.removeListener(runOnce);
        chart.draw(data, options);
    });

    chart.draw(view, options);

    // you can handle the resizing here - no need to recreate your data and charts from scratch
    $(window).resize(function() {
        chart.draw(data, options);
    });
}

小提琴：http://jsfiddle.net/asgallant/bwULk/

Answer 2

最新答案

启动时的动画是用“启动:真”选项打开的。不再需要改变价值观。

function drawVisualization() {
    // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
        ['Tracker', '1', '2', '3'],
        ['A', 475, 450, 190],
        ['B', 300, 290, 20],
        ['C', 360, 340, 120],
        ['D', 180, 170, 250]
    ]);   

    // Create and draw the visualization.
    var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));

    var options = {
        title:"Sub-Region vs Region vs Budget",
        legend: 'bottom',
        hAxis: {
            title: ""
        },
        animation: {
            startup: true,
            duration: 1000
        },
        vAxis: {
            // set these values to make the initial animation smoother
            minValue: 0,
            maxValue: 600
        }
    };    

    chart.draw(data, options);

$(window).resize(function() {
        chart.draw(data, options);
    });
}

更新小提琴：http://jsfiddle.net/bwULk/132/