Highcharts：甜甜圈图表与数据标签重叠

Question

我正在使用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" 
       } 
      } 
     }] 
    }); 

Answer 1

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

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

Answer 2

距离参数不能被应用到每一个点，只是一般，所以才想到什么就我的心是iteared每个datalabel和使用翻译功能（ ）函数，或使用格式化程序，应用CSS类并为每个元素使用top/left参数。但是，如果您将您的示例重新创建为小提琴，将会很有帮助。