Question

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

我一直在浏览一些CSS3动画（http://www.justinaguilar.com/animations/index.html），并想在我的谷歌图表的列上实现“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);
    });
}

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

Answer 2

更新回答

启动时的动画是开箱即用的＆＃34; startup：true＆＃34;选项。不再需要更改值

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/

添加动画到谷歌可视化（柱形图）？

2 个答案: