Question

我正在尝试在Google柱形图中为我的列获取动画效果。根据发布的类似问题，解决方案是在 var选项中进行更改。我这样做了，但我仍然没有看到动画效果。我的使命是什么。

Google Chart：

                <script type="text/javascript">

                    google.load("visualization", "1.1", { packages: ["bar"] });
                    google.setOnLoadCallback(drawChart);
                    function drawChart() {

                        var options = {
                            'title': '',
                            'animation': { duration: 1000, easing: 'out', }
                        };

                        var data1 = new google.visualization.arrayToDataTable([
                          ['Date', 'Under Review', 'Accepted', 'Rejected', 'In Print', 'Published'],
                           @Html.Raw(rows)]);                          

                        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

                        chart.draw(data1, options);
                    }
                </script>
                <div id="columnchart_material" style="width: 750px; height: 400px;"></div>

图表确实显示，但在我加载页面时没有动画效果，它只是显示它

Answer 1

动画是事件驱动的。要设置“＃34; on load＆＃34;”，您需要在选项中添加startup ...

    animation:{
      duration: 1000,
      easing: 'out',
      startup: true
    },

Answer 2

经过大量研究后，谷歌似乎还没有选择条形图来加载动画。我发现了一个柱形图，但它确实有一个适用于我的负载动画选项。在这里找到它：http://jsfiddle.net/gb758owr/

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
                    <script type="text/javascript">
                        google.load("visualization", "1.1", {packages: ["corechart"]});
                        google.setOnLoadCallback(drawChart);
                        function drawChart() {                           
                            var data1 = google.visualization.arrayToDataTable([
                              ['Faculty Name', 'Book', 'Book Chapter', 'Journal Article', 'Conference'],
                               @Html.Raw(rows)]);
                            var options = {
                                animation: {
                                    duration: 1500,
                                    startup: true
                                }
                            };
                            chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
                            chart.draw(data1, options);

加载动画谷歌图表

2 个答案: