Javascript Highchart未完全渲染，仅当鼠标悬停时

我正在制作一个包含大量数据的饼图，但是该图没有完全呈现（只有一半），另一半只有在我将鼠标移到上面时才呈现，而且不总是这样，这是我的代码！：

    // 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);
                    }
                }
            }
        }]
    });
});

//创建图表
$（“#容器”）。高图(
{
图表：
{
键入“pie”，
身高：1200，
宽度：1200
},
标题：
{
文字：“按类别划分的电影”
},
亚克斯：
{
标题：
{
文字：“总市场份额百分比”
}
},
打印选项：
{
馅饼：
{
影子：错，
中心：['50%，'50%']
}
},
工具提示：
{
值后缀：''
},
系列：
[
{
名称：“电影目录”，
数据：browserData，
大小：“60%”，
数据标签：
{
格式化程序：函数（）
{
返回此.y>5？this.point.name:空；
},
颜色：'白色'，
距离：-30
}
}, 
{
名称:"电影",，
数据：versionsData，
大小：“80%”，
内部尺寸：“60%”，
数据标签：
{
格式化程序：函数（）
{
//仅当大于1时显示
返回this.y>1？''+this.point.name+'：'+this.y+'%'：null；
}
},
光标：“指针”，
要点：
{
活动：
{
单击：函数（）
{
警报（“值”+this.y+“类别”+this.category+“id”+this.id”）；
}
}
}
}]
});
});

提前谢谢

---

把它弄得乱七八糟，这样我们就可以搞乱代码了。准备好了！很抱歉，由于安全原因，我无法发布我的数据源！乍一看，人们可能会认为对于糟糕的海图来说，数据太多了，但删除数据并不能解决问题。可能是代码中的错误。你是对的，这是因为我使用highcharts.getOptions（）.color，而这个数组只有十种不同的颜色，当我使用最后一种颜色时，图表开始重复它们。完成了！我为这个问题提出了一个小的解决方案，这里是：//解决Highcharts中缺少颜色的问题。getOptions（）.colors var colors=[]；对于（var i=0；i