1

我正在使用 Highcharts 库处理圆环图类型。

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

找到下面的代码,

在此处输入图像描述

// 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"
                }
            }
        }]
    });
4

2 回答 2

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
                }, {
...
于 2013-08-28T11:54:15.787 回答
1

距离参数不能应用于每个点,只能是通用的,所以我想到的只是在每个数据标签上迭代并使用 translate() 函数,或者使用格式化程序,应用 CSS 类和 dhten 对每个元素使用 top/left 参数。但是,如果您将示例重新创建为小提琴,将会很有帮助。

于 2013-08-23T11:40:45.757 回答