Highcharts: le graphique en anneau chevauche les étiquettes de données

Question

Je travaille sur un type de graphique en anneau, avec la bibliothèque Highcharts.

Comme vous pouvez le voir dans l'image ci-dessous, certaines des étiquettes de données internes se chevauchent. J'ai joué avec le paramètre "distance" mais je ne le répare pas.

trouver ci-joint le code ci-dessous,

// 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

Enfin, j'ai trouvé une solution qui joue avec l'attribut "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

paramètre Distance ne peut pas être appliqué pour chaque point, seul général, de sorte que ce qui vient à l'esprit est iteared sur chaque DATALABEL et l'utilisation traduire (), ou utilisez le formateur, appliquez la classe CSS et dhten utilisez le paramètre top/left pour chaque élément. Mais vous sera utile si vous recréerez votre exemple en tant que violon.