Question

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

代码段：

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

Answer 2

问题是如@AliRızaAdıyahşi所说 - 颜色数组的长度。简单的解决方案是采用颜色数组的宽度，而不是colors[i]使用colors[i % colors.length]。观看现场演示：http://jsfiddle.net/nQ8k8/4/

或者只是不设置颜色，让Highcharts为您执行此操作：http://jsfiddle.net/nQ8k8/5/

Highcharts 3D饼颜色渲染

2 个答案: