Есть ли способ узнать, полностью ли обработан DOM старшей диаграммы?

Question

Я внедряю код JS на сайт с HighChart на нем.И мой код будет использовать html2canvas, чтобы взять snapshot этой диаграммы.

Однако иногда диаграммы имеют анимацию, поэтому я не должен захватывать холст слишком рано.

Таким образом, простой способ - установить setTimeout для ожидания графика.

Но есть ли другой способ узнать, когда анимация графика точно закончена?

веб-сайт использует Highcharts 5. И у меня нет доступа к его файлу JavaScript.

Answer 1

Возможно, вы можете поймать анимацию event и установить complete функцию.

chart: {
    animation: {
       complete: () => console.log('animation completed'),
    }
},

$(function () {
    $('#container').highcharts({
        chart: {
            animation: {
                complete: () => console.log('animation complete'),
            }
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>

http://jsfiddle.net/6gp7vfde/

У меня была такая же проблема, когда я брал PDF с PhantomJS.