jquery - Highcharts 饼图数据标签内部和外部

Question

我想要一个饼图，饼图内部和外部都有数据标签。 我知道，负距离会显示饼内的标签。但我想要它的内部和外部。 外面我想显示百分比，里面显示点的总和。

Answer 1

有一个简单的工作环境

那就是用不同的数据标签覆盖 2 个饼图

http://jsfiddle.net/4RKF4/29/

    $(function () {


        // Create the chart
        $('#container').highcharts({
            chart: {
                type: 'pie',
                backgroundColor: 'rgba(0,0,0,0)',
                y:100

            },
            title: {
                text: 'sfs '
            },
            yAxis: {
                title: {
                    text: ' '
                }
            },
            plotOptions: {
                pie: {
//                   y:1,
                    shadow: false,
//                  center: ['50%', '50%'],
                    borderWidth: 0,
                    showInLegend: false,
                    size: '80%',
                    innerSize: '60%'
                  ,

                    data: [
                        ['allo', 18],
                        ['asdad', 14],
                        ['asdad', 11],
                        ['asdasd', 10],
                        ['adad', 8],
                        ['asdada', 7],
                        ['adada ada', 7],
                        ['adad', 5],
                        ['asdas',7],
                        ['ada', 3]

                    ]
                }
            },
            tooltip: {
                valueSuffix: '%'
            },
            series: [
                {
                    type: 'pie',
                    name: 'Browser share',

                    dataLabels: {
                        color:'white',
                        distance: -20,
                        formatter: function () {
                            if(this.percentage!=0)  return Math.round(this.percentage)  + '%';

                        }
                    }
                },
                {
                    type: 'pie',
                    name: 'Browser share',

                    dataLabels: {
                        connectorColor: 'grey',
                        color:'black',
 //                            y:-10,
                        softConnector: false,
                        connectorWidth:1,
                        verticalAlign:'top',
                        distance: 20,
                        formatter: function () {
                            if(this.percentage!=0)  return this.point.name;

                        }
                    }
                }
            ]
        });
    });