javascript - 加载时 donut 切片不可见

Question

这是一个 jsFiddle，用于解决我一直试图解决的问题:

http://jsfiddle.net/kSSYg/

加载圆环图时，切片不可见，但图例可见。当您将鼠标悬停在上方时，它们就会出现。

还有其他人遇到过这种情况吗？

代码

$(function () {
    var chart;
    $(document).ready(function() {

        var colors = Highcharts.getOptions().colors,
                        categories = ['Security', 'Interfaces', 'SNMP', 'Management', 'General'],
                        name = 'Rule Categories',
                        data = [{"y":23.53,"drilldown":{"name":"Security","categories":["Pass","Fail"],"data":[11.77,11.77]}},{"y":23.53,"drilldown":{"name":"Interfaces","categories":["Pass","Fail"],"data":[23.53,0]}},{"y":23.53,"drilldown":{"name":"SNMP","categories":["Pass","Fail"],"data":[11.77,11.77]}},{"y":5.88,"drilldown":{"name":"Management","categories":["Pass","Fail"],"data":[5.88,0]}},{"y":23.53,"drilldown":{"name":"General","categories":["Pass","Fail"],"data":[23.53,0]}}];


        // Build the data arrays
        var browserData = [];
        var versionsData = [];
        for (var i = 0; i < data.length; i++) {

            // add browser data
            browserData.push({
                name: categories[i],
                y: data[i].y,
                color: data[i].color
            });

            // add version data
            for (var j = 0; j < data[i].drilldown.data.length; j++) {
                var brightness = 0.2 - (j / data[i].drilldown.data.length) / 5 ;
                versionsData.push({
                    name: data[i].drilldown.categories[j],
                    y: data[i].drilldown.data[j],
                    color: Highcharts.Color(data[i].color).brighten(brightness).get()
                });
            }
        }

        // Create the chart
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'pie'
            },
            title: {
                text: 'Browser market share, April, 2011'
            },
            yAxis: {
                title: {
                    text: 'Total percent market share'
                }
            },
            plotOptions: {
                pie: {
                    shadow: false
                }
            },
            tooltip: {
                valueSuffix: '%'
            },
            series: [{
                name: 'Browsers',
                data: browserData,
                size: '60%',
                dataLabels: {
                    formatter: function() {
                        return this.y > 5 ? this.point.name : null;
                    },
                    color: 'white',
                    distance: -30
                }
            }, {
                name: 'Versions',
                data: versionsData,
                innerSize: '60%',
                dataLabels: {
                    formatter: function() {
                        // display only if larger than 1
                        return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%'  : null;
                    }
                }
            }]
        });
    });

});​

Answer 1

您必须定义自己的颜色吗？如果删除设置颜色的两条线，它就可以工作。请参阅http://jsfiddle.net/kSSYg/2/

删除:

color: data[i].color

和

color: Highcharts.Color(data[i].color).brighten(brightness).get()

这些行不起作用的原因是您的数据数组对象没有定义属性“颜色”