有什么方法可以知道是否已完成Highchart DOM的渲染吗？

Question

我正在向具有HighChart的网站注入JS代码。我的代码将使用html2canvas来获取该图表的snapshot。

但是，有时图表具有动画效果，所以我不应该太早捕获画布。

所以一个简单的方法是将setTimeout设置为等待图表。

但是还有什么其他方法可以知道图表的动画何时完全完成？

该网站使用Highcharts5。并且我无权访问其JavaScript文件。

Answer 1

有可能，您可以捕获动画event并设置complete功能。

plotOptions: {
    series: {
        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']
        },

        plotOptions: {
            series: {
                animation: {
                    complete: () => console.log('plot animation completed'),
                }
            }
        },

        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/

使用PhantomJS提取PDF时，我遇到了同样的问题。