仅当鼠标悬停时，Highchart才会完全渲染

Question

我正在制作一个包含大量数据的饼图，但是图表没有完全渲染（只有一半），只有当我将鼠标移过时才渲染另一半，而不是总是，这是我的代码！：< / p>

    // Create the chart
    $('#container').highcharts(
    {
        chart: 
        {
            type: 'pie',
            height: 1200,
            width:  1200
        },
        title: 
        {
            text: 'Films by category'
        },
        yAxis: 
        {
            title: 
            {
                text: 'Total percent market share'
            }
        },
        plotOptions: 
        {
            pie: 
            {
                shadow: false,
                center: ['50%', '50%']
            }
        },
        tooltip: 
        {
            valueSuffix: '%'
        },
        series: 
        [
            {
                name: 'Film cateories',
                data: browserData,
                size: '60%',
                dataLabels: 
                {
                    formatter: function() 
                    {
                        return this.y > 5 ? this.point.name : null;
                    },
                    color: 'white',
                    distance: -30
                }
            }, 
        {
            name: 'Films',
            data: versionsData,
            size: '80%',
            innerSize: '60%',
            dataLabels: 
            {
                formatter: function() 
                {
                    // display only if larger than 1
                    return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%'  : null;
                }
            },
            cursor: 'pointer',
            point:
            {
                events:
                {
                    click: function()
                    {
                        alert("Value "+this.y+" category "+this.category+" id "+this.id);
                    }
                }
            }
        }]
    });
});

提前致谢！

JSFiddle