Highcharts 6.0.2：Overlapping labels

Question

Highchartに新しく、自分の問題のために開発した解決策があるかどうか疑問に思っていました。私のドーナツチャートのスライスが十分に小さいときに、その値ラベルが重なり合ったり互いを妨げたりすることを発見します。 :)

何かアドバイスは大歓迎します！私は解決策になってしまった

Answer 1

...

はもともと私が使っていた：

options: { 
      chart: { 
       height: 320, 
       plotShadow: false, 
       plotBorderWidth: 0, 
       spacingBottom: 10, 
       type: 'pie', 
      }, 
      credits: { 
       enabled: false 
      }, 
      legend: { 
       align: 'center', 
       symbolRadius: 0, 
       floating: true, 
       layout: 'vertical', 
       y: -110 
      }, 
      tooltip: { 
       enabled: false 
      }, 
      title: { 
       text: '' 
      }, 
      subtitle: { 
       text: '' 
      }, 
      plotOptions: { 
       pie: { 
        showInLegend: true, 
        startAngle: 45, 
        dataLabels: { 
         allowOverlap: false, 
         distance: 10, 
         padding: 2, 
         softConnector: true, 
         className: 'pieLabels ', 
         format: '{y}', 
         useHTML: true, 
         enabled: true 
        }, 
        shadow: false, 
        center: ['50%', '50%'], 
        size: '90%', 
        innerSize: '65%', 
        borderColor: 'none' 
       } 
      }, 
      series: this.props.series 
     } 

をとなってしまった：

：私を与えた

options: { 
      chart: { 
       height: 320, 
       plotShadow: false, 
       plotBorderWidth: 0, 
       spacingBottom: 10, 
       type: 'pie', 
      }, 
      credits: { 
       enabled: false 
      }, 
      legend: { 
       align: 'center', 
       symbolRadius: 0, 
       floating: true, 
       layout: 'vertical', 
       y: -100 
      }, 
      tooltip: { 
       enabled: false 
      }, 
      title: { 
       text: '' 
      }, 
      subtitle: { 
       text: '' 
      }, 
      plotOptions: { 
       pie: { 
        showInLegend: true, 
        dataLabels: { 
         connectorWidth: 0, 
         distance: -25, 
         // overflow: 'none', 
         className: 'pieLabels ', 
         format: '{y}', 
         useHTML: true, 
         enabled: true 
        }, 
        shadow: false, 
        center: ['50%', '50%'], 
        size: '100%', 
        innerSize: '60%', 
        borderColor: 'none', 
       }, 
      }, 
      series: this.props.series 
     }