Question

如果图表是由JSON数据创建的，那么关于如何设置动画的所有示例都不会涵盖。他们都使用静态数据。（见Transition Animation。）

这是我通过JSON获取数据的代码。

<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        $.post('/Weight/WeightAreaChartData', {}, function (data) {
            var tdata = new google.visualization.arrayToDataTable(data);
            var options = {
                title: 'Weight Lost & Gained This Month',
                hAxis: { title: 'Day of Month', titleTextStyle: { color: '#1E4A08'} },
                vAxis: { title: 'Lbs.', titleTextStyle: { color: '#1E4A08' } },
                chartArea: { left: 50, top: 30, width: "75%" },
                colors: ['#FF8100'],
                animation:{
                    duration: 1000,
                    easing: 'in'
                },
            };

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

            chart.draw(tdata, options);
        });
    }
</script>

我有一个成功重绘图表的按钮。但是，它没有动画。如何使图表具有动画效果？谢谢你的帮助。

 $('#myBtn').click(function () {
      drawChart();
 });

Answer 1

如@FelipeFonseca所述，您每次都会覆盖图表#myBtn is clicked。试着这样做：

(function (global, undef) {
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);

    var options = {
        title: 'Weight Lost & Gained This Month',
        hAxis: { title: 'Day of Month', titleTextStyle: { color: '#1E4A08'} },
        vAxis: { title: 'Lbs.', titleTextStyle: { color: '#1E4A08' } },
        chartArea: { left: 50, top: 30, width: "75%" },
        colors: ['#FF8100'],
        animation:{
            duration: 1000,
            easing: 'in'
        }
    };

    var chart;
    function drawChart() {
        $.post('/Weight/WeightAreaChartData', {}, function (data) {
            var tdata = new google.visualization.arrayToDataTable(data);

            if (!chart) {
                chart = new google.visualization.AreaChart(
                    document.getElementById('chart_div')
                );
            }

            chart.draw(tdata, options);
        });
    }

})(this);

从JSON动画Google Chart

1 个答案: