Question

我正在使用Highcharts图书馆制作圆环图表类型。

如下图所示，某些内部数据标签重叠。我一直在玩参数“距离”但不解决这个问题。

查找下面附带的代码，

enter image description here

// Create the chart
    $(container).highcharts({
        chart: {
            type: 'pie'
        },
        credits: {
            enabled: false
        },
        exporting: {   
            buttons: {
                contextButton: {
                    symbol: 'url(/icon-turn-down.png)'
                }
            }
        },
        title: {
            text: _title, 
            margin: 50
        },
        plotOptions: {
            pie: {
                shadow: false,
                center: ['50%', '50%']
            }
        },
        tooltip: {
            formatter: function() {
                var s = this.point.name.split('.');                
                if (s.length == 1) {
                    return this.y > 1? '<b>'+this.point.name+':</b> '+Highcharts.numberFormat(this.point.y) : null;
                }
                return this.y > 1? s[0]+'<br /><b>'+$.trim(s[1])+':</b> '+Highcharts.numberFormat(this.point.y) : null;
            }
        },
        series: [{
            name: '',
            data: innerData,
            size: '80%',
            dataLabels: {
                formatter: function() {
                    return this.y > 0 ? this.point.name : null;
                },                 
                color: 'white',
                distance: -50
            }
        }, {
            name: '',
            data: outerData,
            size: '100%',
            innerSize: '80%',
            dataLabels: {
                formatter: function() {
                    var s = this.point.name.split('.');  
                    if (s.length == 1) {
                         return this.y > 1 ? '<b>'+ this.point.name+':</b> '+ Highcharts.numberFormat(this.point.y) : null ;
                    }                   
                    s = this.point.name.substring(this.point.name.indexOf(".")+2);
                    return this.y > 1 ? '<b>'+ s+':</b> '+ Highcharts.numberFormat(this.point.y):  null;
                },
                style: {
                    fontSize: "10px",                       
                    fontColor: "#000000"
                }
            }
        }]
    });

Answer 1

距离参数不能应用于每个点，只能是一般的，所以只有我想到的是在每个数据标签上迭代并使用translate（）函数，或者使用格式化程序，应用CSS类和dhten使用top / left参数元件。但如果你将你的例子重新设置为小提琴，那将会很有帮助。

Answer 2

最后，我找到了一个解决方案，它正在使用“startangle”属性。

     series: [{
                name: '',
                data: innerData,
                startAngle:110, 
                size: '80%',
                dataLabels: {
                    formatter: function() {                    
                        return this.y > 0 ? this.point.name : null;
                    },                 
                    color: 'white',
                    distance: -45
                }, {
...

Highcharts：圆环图重叠数据标签

2 个答案: