javascript - Highcharts 饼图中的多个标签

Question

我有一个 Highcharts 饼图，我需要为每个切片显示多个标签，例如切片外部带有连接器的指示器(标题)标签，以及切片内部没有连接器的百分比标签。

我可以设置距离属性，以便将标签(和连接器)带到切片的内部，当然，外面不再有标签了。

如有任何帮助，我们将不胜感激。提前谢谢你。

Answer 1

没有直接创建多个数据标签的可能性。正如你在这个 post 上看到的那样, 一个解决方案是创建两个叠加图表。参见 JSFiddle here :

        $(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;

                            }
                        }
                    }
                ]
            });
        });