加载Google LineChart动画时 [英] On load Google LineChart animation

问题描述

我正在尝试通过添加行并刷新图表来使用过渡动画来实现图表的加载动画。但是它的行为与我的预期完全不同。
这是小提琴 http://jsfiddle.net/jATUX/
一些代码：

I'm trying to implement loading animation of chart using transition animations by adding rows and refreshing the chart. But it behaves completely differently from what I expect. Here is the Fiddle http://jsfiddle.net/jATUX/ Some code:

google.load('visualization', '1', { packages: ['corechart'], callback: function() {
        var data = new google.visualization.DataTable();
        data.addRows(5);

        data.addColumn('string', '');
        data.addColumn('number', 'Sales');

        var options = {
            title: 'Sales by months for 2013 year', curveType: 'function',
            "vAxis": { "minValue": "0" }, "hAxis": { "slantedTextAngle": "45", "slantedText": "true" }, "legend": { "position": "top" }, "pointSize": "5",
            animation: { duration: 1000 }
        };
        var chart = new google.visualization.LineChart(document.getElementById('test'));

        var index = 0;
        var chartData = [
            ['Jan', 5 ], ['Feb', 1], ['Mar', 4], ['Apr', 2], ['May', 3]
        ]
        var drawChart = function() {
            console.log('drawChart index ' + index);
            if (index < chartData.length) {
                data.addRows([chartData[index++]]);
                chart.draw(data, options);
            }
        }

        google.visualization.events.addListener(chart, 'ready', drawChart);
        chart.draw(data, options);
    }});

推荐答案

好的，我已经设法解决了。使用'animationfinish'
都是问题，现在看起来像 http://jsfiddle.net/HDu8H/
或

Ok, I've managed to solve that. It's all a matter of using 'animationfinish' That now looks like http://jsfiddle.net/HDu8H/ or

google.load('visualization', '1', { packages: ['corechart'], callback: function() {
        var data = new google.visualization.DataTable();
        data.addRows(5);

        data.addColumn('string', '');
        data.addColumn('number', 'Sales');
        data.addRows(5);
        data.setValue(0, 0, 'Jan');
        data.setValue(1, 0, 'Feb');
        data.setValue(2, 0, 'Mar');
        data.setValue(3, 0, 'Apr');
        data.setValue(4, 0, 'May');

        var options = {
            title: 'Sales by months for 2013 year', curveType: 'function',
            "vAxis": { "minValue": "0", "maxValue": 6 }, "hAxis": { "slantedTextAngle": "45", "slantedText": "true" }, "legend": { "position": "top" }, "pointSize": "5",
            animation: { duration: 250 }
        };
        var chart = new google.visualization.LineChart(document.getElementById('test'));

        var index = 0;
        var chartData = [ 5, 1, 4, 2, 3 ]
        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);
        chart.draw(data, options);
        drawChart();
    }});

这篇关于加载Google LineChart动画时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！