javascript - 从 JSON 动画谷歌图表

Question

如果图表是由 JSON 数据创建的，则所有有关如何制作动画的示例均未涵盖。他们都使用静态数据。（请参阅过渡动画。）

这是我通过 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

也许是因为您每次都在创建图表？

尝试做chart一个全局变量，然后再试一次

Answer 2

正如@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);