如何在highcharts禁用餅圖指針在highcharts

Question

餅圖，如何禁用線指向外餅圖

餅圖例如

Highcharts.chart('container', { 
 
    chart: { 
 
     plotBackgroundColor: null, 
 
     plotBorderWidth: null, 
 
     plotShadow: false, 
 
     type: 'pie' 
 
    }, 
 
    title: { 
 
     text: 'Browser market shares January, 2015 to May, 2015' 
 
    }, 
 
    tooltip: { 
 
     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
 
    }, 
 
    plotOptions: { 
 
     pie: { 
 
      allowPointSelect: true, 
 
      cursor: 'pointer', 
 
      dataLabels: { 
 
       enabled: true, 
 
       format: '<b>{point.name}</b>: {point.percentage:.1f} %', 
 
       style: { 
 
        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
 
       } 
 
      } 
 
     } 
 
    }, 
 
    series: [{ 
 
     name: 'Brands', 
 
     colorByPoint: true, 
 
     data: [{ 
 
      name: 'Microsoft Internet Explorer', 
 
      y: 56.33 
 
     }, { 
 
      name: 'Chrome', 
 
      y: 24.03, 
 
      sliced: true, 
 
      selected: true 
 
     }, { 
 
      name: 'Firefox', 
 
      y: 10.38 
 
     }, { 
 
      name: 'Safari', 
 
      y: 4.77 
 
     }, { 
 
      name: 'Opera', 
 
      y: 0.91 
 
     }, { 
 
      name: 'Proprietary or Undetectable', 
 
      y: 0.2 
 
     }] 
 
    }] 
 
});

<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

fiddle

Answer 1

其中一個選項是禁用的標籤。檢查下面的設置：

 

    plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: false, 
        format: '{point.name}: {point.percentage:.1f} %', 
        style: { 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
        } 
       } 
      } 
     }, 

或者爲了實現沒有連接器使用下面的代碼。 距離：0將解決這個目的

<pre> 
plotOptions: { 
     pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      dataLabels: { 
      distance:0, 
       enabled: true, 
       format: '<b>{point.name}</b>: {point.percentage:.1f} %', 
       style: { 
        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
       } 
      } 
     } 
    }, 

Answer 2

通過查看Highcharts API你可以找到回答你的問題，特別是你想plotOptions.pie.dataLabels.connectorWidth。

甚至有一個預先製成例如有你在問什麼：jsfiddle example。 如果他們增加connectorWidth: 0

plotOptions: { 
    pie: { 
     dataLabels: { 
      connectorWidth: 0 
     } 
    } 
}