charts - ハイチャート - 円グラフにスライスが表示されない

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>