Highcharts 标签问题

我是新手，正在尝试Highcharts油炸圈饼图表选项。我采用了根据需要编辑的示例代码。这就是我面临的问题

• 类别标签会产生阴影效果，如何撤消
• 即使将最小值更改为0.1，也无法显示所有城市名称
• 当我从JSFIDLE下载图像时，图像有一个重复的名称

$（函数（）{
var colors=Highcharts.getOptions（）.colors，
类别=[‘技术流程’、‘组件形成’、‘一般功能’]，
名称='浏览器品牌'，
数据=[{
y:15.4，
颜色：颜色[4]，
向下展开：{
名称：“MSIE版本”，
类别：[‘班加罗尔’、‘蒂鲁瓦南塔普兰’、‘卡瓦拉蒂’、‘博帕尔’、‘孟买’、‘英帕尔’、‘希隆’、‘艾扎沃’、‘科希玛’、‘布巴内斯瓦尔’]，
数据：[2.46,2.27,1.87,1.53,1.49,1.37,1.22,1.12,1.08,0.99]，
颜色：颜色[4]
}
}, {
y:30.34，
颜色：颜色[5]，
向下展开：{
名称：“Chrome版本”，
类别：[‘班加罗尔’、‘蒂鲁瓦南塔普兰’、‘卡瓦拉蒂’、‘博帕尔’、‘孟买’、‘英帕尔’、‘希隆’、‘艾扎沃’、‘科希玛’、‘布巴内斯瓦尔’]，
数据：[9.70,6.59,3.52,2.42,1.62,1.57,1.40,1.37,1.19,0.96]，
颜色：颜色[5]
}
}, {
y:54.25，
颜色：颜色[2]，
向下展开：{
名称：“Chrome版本”，
类别：[‘班加罗尔’、‘蒂鲁瓦南塔普兰’、‘卡瓦拉蒂’、‘博帕尔’、‘孟买’、‘英帕尔’、‘希隆’、‘艾扎沃’、‘科希玛’、‘布巴内斯瓦尔’]，
数据：[16.59,7.05,6.36,6.26,5.44,4.14,2.37,2.17,1.95,1.92]，
颜色：颜色[2]
}
}
];
//构建数据阵列
var browserData=[]；
var versionsData=[]；
对于（变量i=0；i5？this.point.name:空；
},
颜色：'黑色'，
距离：-50
}
}, {
名称：'版本'，
数据：versionsData，
大小：“80%”，
内部尺寸：“60%”，
数据标签：{
格式化程序：函数（）{
//仅当大于1时显示
返回this.y>0.1？''+this.point.name+'：'+this.y+'%'：null；
}
}
}]
});
});

谢谢

#1和#3：这是PhantomJS中的bug，请禁用文本的阴影#2因为Highcharts将隐藏重叠的标签。

$(function () {
        var colors = Highcharts.getOptions().colors,
        categories = ['Technical Process', 'Component Formation', 'General Function'],
        name = 'Browser brands',
        data = [{
                y: 15.4,
                color: colors[4],
                drilldown: {
                    name: 'MSIE versions',
                    categories: ['Bengaluru','Thiruvananthapuram','Kavaratti','Bhopal','Mumbai','Imphal','Shillong','Aizawl','Kohima','Bhubaneshwar'],
                    data: [2.46, 2.27, 1.87, 1.53, 1.49, 1.37, 1.22, 1.12, 1.08, 0.99],
                    color: colors[4]
                }
            }, {
                y: 30.34,
                color: colors[5],
                drilldown: {
                    name: 'Chrome versions',
                    categories: ['Bengaluru','Thiruvananthapuram','Kavaratti','Bhopal','Mumbai','Imphal','Shillong','Aizawl','Kohima','Bhubaneshwar'],
                    data: [9.70, 6.59, 3.52, 2.42, 1.62, 1.57, 1.40, 1.37, 1.19, 0.96],
                    color: colors[5]
                }
            }, {
                y: 54.25,
                color: colors[2],
                drilldown: {
                    name: 'Chrome versions',
                    categories: ['Bengaluru','Thiruvananthapuram','Kavaratti','Bhopal','Mumbai','Imphal','Shillong','Aizawl','Kohima','Bhubaneshwar'],
                    data: [16.59, 7.05, 6.36, 6.26, 5.44, 4.14, 2.37, 2.17, 1.95, 1.92],
                    color: colors[2]
                }
            }
];


    // 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) / 6 ;
            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
    $('#container').highcharts({
        chart: {
            type: 'pie'
        },
        title: {
            text: 'Ten cities',
            margin: 15
        },
        yAxis: {
            title: {
                text: 'Total percent market share',
                x: -30
            }
        },
        plotOptions: {
            pie: {
                shadow: false,
                center: ['50%', '50%']
            }
        },
        tooltip: {
            valueSuffix: '%'
        },
        series: [{
            name: 'Browsers',
            data: browserData,
            size: '50%',
            dataLabels: {
                formatter: function() {
                    return this.y > 5 ? this.point.name : null;
                },
                color: 'black',
                distance: -50
            }
        }, {
            name: 'Versions',
            data: versionsData,
            size: '80%',
            innerSize: '60%',
            dataLabels: {
                formatter: function() {
                    // display only if larger than 1
                    return this.y > 0.1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%'  : null;
                }
            }
        }]
    });
});