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參數。但是，如果您將您的示例重新創建爲小提琴，將會很有幫助。