Highcharts datalabels未顯示在餅圖的每個切片的盈

我使用highcharts並試圖從中得出餅圖，但剛剛進入一個奇怪的問題我datalabels都顯示不正確盈片，並且它只有在發生了在餡餅中有10+片。我不想顯示連接器，我只想在餅圖附近顯示我的數據標籤，並且應該正確顯示每個切片的前面。另外我不想增加餅圖的大小。Highcharts datalabels未顯示在餅圖的每個切片的盈

Pie Chart

$(function() { 
var asset_allocation_pie_chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'asset_allocation_bottom_left_div' 
    }, 
    title: { 
     text: 'Current Asset Allocation', 
     style: { 
      fontSize: '17px', 
      color: 'red', 
      fontWeight: 'bold', 
      fontFamily: 'Verdana' 
     } 
    }, 
    subtitle: { 
     text: '(As of ' + 'dfdf' + ')', 
     style: { 
      fontSize: '15px', 
      color: 'red', 
      fontFamily: 'Verdana', 
      marginBottom: '10px' 
     }, 
     y: 40 
    }, 
    tooltip: { 
     pointFormat: '{series.name}: <b>{point.percentage}%</b>', 
     percentageDecimals: 0 
    }, 
    plotOptions: { 
     pie: { 
      size: '60%', 
      cursor: 'pointer', 
      data: [ 
       ['Investment Grade Bonds', 100], 
       ['High Yield Bonds', 200], 
       ['Hedged Equity', 300], 
       ['Global Equity', 400], 
       ['Cash', 500], 
       ['Cash', 500], 
       ['Hedged Equity', 300], 
       ['Global Equity', 400], 
       ['Cash', 500], 
       ['High Yield Bonds', 200], 
       ['Hedged Equity', 300], 
       ['Global Equity', 400], 
       ['Cash', 500], 
       ['High Yield Bonds', 200], 
       ['Hedged Equity', 300], 
       ['Global Equity', 400], 
      ] 
     } 
    }, 
    series: [{ 
     type: 'pie', 
     name: 'Asset Allocation', 
     dataLabels: {     
      enabled: true, 
      color: '#000000', 
      connectorWidth: 0, 
      distance: 5, 
      connectorColor: '#000000', 
      formatter: function() { 
       return Math.round(this.percentage) + ' %'; 
      } 

     } 
    }], 
    exporting: { 
     enabled: false 
    }, 
    credits: { 
     enabled: false 
    } 
}); 

});

來源

2016-11-26 Faseeh Haris

問題是要四捨五入的值，

試試這個，

$(function() { 
    var asset_allocation_pie_chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container' 
    }, 
    title: { 
     text: 'Current Asset Allocation', 
     style: { 
     fontSize: '17px', 
     color: 'red', 
     fontWeight: 'bold', 
     fontFamily: 'Verdana' 
     } 
    }, 
    subtitle: { 
     text: '(As of ' + 'dfdf' + ')', 
     style: { 
     fontSize: '15px', 
     color: 'red', 
     fontFamily: 'Verdana', 
     marginBottom: '10px' 
     }, 
     y: 40 
    }, 

    plotOptions: { 
     pie: { 
     size: '60%', 
     cursor: 'pointer', 
     series: { 
      dataLabels: { 
      enabled: true, 
      format: '{point.name}: {point.y:.1f}%' 
      } 
     } 

     } 
    }, 
    series: [{ 
     type: 'pie', 
     name: 'Asset Allocation', 

     data: [ 
     ['Investment Grade Bonds', 100], 
     ['High Yield Bonds', 200], 
     ['Hedged Equity', 300], 
     ['Global Equity', 400], 
     ['Cash', 500], 
     ['Cash', 500], 
     ['Hedged Equity', 300], 
     ['Global Equity', 400], 
     ['Cash', 500], 
     ['High Yield Bonds', 200], 
     ['Hedged Equity', 300], 
     ['Global Equity', 400], 
     ['Cash', 500], 
     ['High Yield Bonds', 200], 
     ['Hedged Equity', 300], 
     ['Global Equity', 400], 
     ] 
    }], 
    exporting: { 
     enabled: false 
    }, 
    credits: { 
     enabled: false 
    } 
    }); 

});

DEMO

來源

2016-11-26 15:12:27 Sajeetharan

我只需要顯示百分比值或片外的數字，但所有的數字應該是在片不是在這裏和那裏，因爲我不希望顯示的前連接器也是如此。所以你的回答是不正確的，因爲我已經在我的問題中提到它，併發布了代碼。 –

你要的位置數據LA如果你想讓它們像圖像一樣放在自己身上

一種方式是手動計算的位置，根據所述圓形切片值。另一方面，使用相同的數據創建另一個餅圖系列，使其不可見並使用其數據標籤。

series: [{ 
    enableMouseTracking: false, 
    showInLegend: false, 
    color: 'transparent', 
    colorByPoint: false, 
    size: '100%', 
    innerSize: '60%', 
    dataLabels: { 
    style: { 
     "color": "black", 
     "fontSize": "11px", 
     "fontWeight": "bold", 
    }, 
    connectorWidth: 0, 
    connectorPadding: 0, 
    distance: -35, 
    formatter: function() { 
     return Math.round(this.percentage) + ' %'; 
    } 
    }, 

}, { 
    name: 'Asset Allocation', 
    dataLabels: { 
    enabled: false 
    }, 
}]

例如：https://jsfiddle.net/3me3pyyf/

來源

2016-11-28 12:58:50 morganfree

Highcharts datalabels未顯示在餅圖的每個切片的盈

回答

相關問題