Question

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

我可以设置distance属性，以便将标签（和连接器）带到切片的内部，但当然，外面没有标签了。

非常感谢任何帮助。提前谢谢。

Answer 1

没有直接创建多个dataLabel的可能性。正如您在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;

                            }
                        }
                    }
                ]
            });
        });

Highcharts饼图中的多个标签

1 个答案: