Highcharts - 饼图不显示切片

Question

奇怪的一个。我正在调用我的饼图，当我执行灰色背景时，数据管道连接器和带有数字的悬停数据都显示在背景上。但是没有馅饼切片会显示出来。

但是，如果我打印出图表，它会在保存图表并返回页面后显示切片。或者，如果我在Chrome中检查元素，它会在我调整检查器窗口大小后显示图表。如果我采取任何行动，但几乎不想重新绘制图表，而不是最初绘制它。

它在所有浏览器中的工作方式相同。不会抛出任何javascript错误。

有什么想法吗？

这是我的代码：

<script type="text/javascript">

        var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'pie1',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'application usage'
                },
                tooltip: {
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: '+ this.y +'';
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#FFFFFF',
                            connectorColor: '#FFFFFF',
                            formatter: function() {
                                return '<b>'+ this.point.name +'</b><br> '+ this.y +' ('+ Math.round(this.percentage) +'%)';
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'percentage of application usage',
                    data: [{
                        name: 'Lessons', y: 25}, {name: 'Discussion', y: 65}, {name: 'Tests', y: 85}, {name: 'Dropbox', y: 92}, {name: 'Surveys', y: 105
                    }]
                }]
            });
        });

    </script>

    <div id='pie1' class='chart_container'></div>