标签问题

Question

我是新手并尝试使用Highcharts甜甜圈图表选项。我根据需要编写了示例代码。这些是我面临的问题;

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

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

感谢