jquery - 将动画添加到谷歌可视化(柱形图)？

Question

我想知道是否有关于如何通过 CSS3 动画使我的谷歌图表看起来更时尚的任何资源。

我一直在浏览一些 CSS3 动画 ( http://www.justinaguilar.com/animations/index.html )，并想在我的 google 图表的列上实现“pullUp”动画。我知道我需要将“pullUp”类添加到每一列；但是，因为该列是通过 Javascript 动态创建的，所以我不确定实现这一目标的最佳方法。

任何人都可以提供一些指示或帮助吗？附件是带有我现有代码的代码笔:CodePen Link

非常感谢任何帮助!谢谢!

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

fiddle :http://jsfiddle.net/asgallant/bwULk/