Question

我试图在第一次加载时在Google图表上应用动画，它可以与普通条形图一起使用，但是当我将其堆叠时，动画无法正常工作。请帮帮我尝试了文档中几乎所有选项，但没有任何帮助。控制台中没有错误。

google.charts.load('current', { 'packages': ['bar'] });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Months', 'EL', 'CL'],
            ['Jan', 2, 4],
            ['Feb', 1, 4],
            ['Mar', 6, 1],
            ['Apr', 3, 5],
            ['May', 1, 4],
            ['Jun', 3, 4],
            ['Jul', 2, 5],
            ['Aug', 2, 4],
            ['Sep', 1, 4],
            ['Oct', 6, 1],
            ['Dec', 1, 4]
        ]);

        var options = {
            chart: {
                title: 'Leave Info',
                subtitle: 'Total EL and CL consumed in a year',
            },
            bars: 'vertical',
            height: 300,
            width: 500,
            animation:{
                startup: 'true',
                duration: 1000,
                easing: 'out'

            },
            bar: {groupWidth: "40%"},
            isStacked: true,
            series: {
                0: { color: 'red' },
                1: { color: '#999' }
            }
        };

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

        chart.draw(data, google.charts.Bar.convertOptions(options));
    }

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Answer 1

在以上评论中White-hat的大力帮助下，我能够得到这个结果，如果有人需要帮助，可以考虑将其发布在这里

google.charts.load('current', {
        callback: function() {
            drawChart();
            window.addEventListener('resize', drawChart, false);
        },
        packages: ['corechart']
    });

    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Months', 'EL', 'CL'],
            ['Jan', 2, 4],
            ['Feb', 1, 4],
            ['Mar', 6, 1],
            ['Apr', 3, 5],
            ['May', 1, 4],
            ['Jun', 3, 4],
            ['Jul', 2, 5],
            ['Aug', 2, 4],
            ['Sep', 1, 4],
            ['Oct', 6, 1],
            ['Dec', 1, 4]
        ]);

        var options = {
            animation: {
                duration: 1000,
                easing: 'linear',
                startup: true
            },
            isStacked: true,
            height: 600,
            theme: 'material',
            title: 'Company Performance'
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google Chart Animation无法与堆积图一起使用

1 个答案: