javascript - Highcharts 3D 饼图颜色渲染

Question

我在使用 highcharts 生成 3D 饼图时遇到了一个奇怪的问题。不同切片上的颜色最初不加载，仅在鼠标悬停后显示。

代码片段:

module.pieChart = function (divid, title, subTitle, seriesData) {
 //seriesData is in form of json
        window[divid] = new Highcharts.Chart({
            chart: {
                renderTo: divid,
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            credits: {
                enabled: false
            },
            title: {
                text: title
            },
            subtitle: {
                text: subTitle
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            }, legend: {
                enabled: true
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function () {
                            return '<b>' + this.point.name + '</b>: ' + this.percentage.toFixed(2) + ' %';
                        }
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: title,
                data: seriesData
            }]
        }, NodataMessage);
    };

如果有人对此有任何建议或解决方案。？

---

编辑

DEMO

Answer 1

关于 Highcharts.getOptions().colors。此函数生成 10 种颜色，在第 10 种颜色之后，颜色列表为空。然后你尝试像这样推送颜色:

// there is no color for i > 9
color:data[i].color;

Highcharts.getOptions().colors 输出为:["#7cb5ec", "#434348", "#90ed7d", "#f7a35c", "#8085e9", "#f15c80", "#e4d354", "#8085e8", "#8d4653", "#91e8e1"]

因此，您应该将其从您的选项中删除，或手动定义它。

和工作示例:

DEMO