Анимация Google Chart не работает с диаграммой с накоплением - PullRequest
Новая
       2

Анимация Google Chart не работает с диаграммой с накоплением

1 голос
/ 17 июня 2019

Я пытаюсь применить анимацию к диаграмме 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>

1 Ответ

2 голосов
/ 17 июня 2019

С большой помощью 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>
...