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 
     }