Highcharts餅圖數據標籤內外

Question

我想餅圖裏面和外面的數據標籤餅圖。 我知道，它具有負距離，它顯示了餡餅內的標籤。但我想要它內外。 外面我想顯示的百分比，並在該點的總和內。

Answer 1

您不可能設置雙倍的數據標籤，但是您可以使用解決方法，這並不完美，但可能會有所幫助。所以你可以設置useHTML，然後在formater中返回兩個div，第一個適當的datalabel（外部），第二個用inside。然後將id設置爲counter，將每個div的id定義爲唯一，那麼只需要設置合適的CSS。位置的一個datalabel的實例是可在這裏：http://jsfiddle.net/4RKF4/

$(function() { 
var chart, 
    counter = 0; 
$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false 
     }, 
     title: { 
      text: 'Browser market shares at a specific website, 2010' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage}%</b>', 
      percentageDecimals: 1 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: true, 
        color: '#000000', 
        connectorColor: '#000000', 
        useHTML:true, 
        formatter: function() { 
         counter++; 
         return '<div class="datalabel"><b>'+ this.point.name +'</b>: '+ this.percentage +' %</div><div class="datalabelInside" id="datalabelInside'+counter+'"><b>'+ this.point.name +'</b>: '+ this.percentage +' %</div>'; 
        } 
       } 
      } 
     }, 
     series: [{ 
      type: 'pie', 
      name: 'Browser share', 
      data: [ 
       ['Firefox', 45.0], 
       ['IE',  26.8], 
       { 
        name: 'Chrome', 
        y: 12.8, 
        sliced: true, 
        selected: true 
       }, 
       ['Safari', 8.5], 
       ['Opera',  6.2], 
       ['Others', 0.7] 
      ] 
     }] 
    }); 
}); 

}）;

CSS樣式：

.datalabelInside { 
position:absolute; 
} 

#datalabelInside1 { 
color:#fff; 
left:-150px; 

}

Answer 2

有它

一個輕鬆的工作以防萬一被你覆蓋2餡餅diferent datalabels

http://jsfiddle.net/4RKF4/29/

$(function() { 


     // Create the chart 
     $('#container').highcharts({ 
      chart: { 
       type: 'pie', 
       backgroundColor: 'rgba(0,0,0,0)', 
       y:100 

      }, 
      title: { 
       text: 'sfs ' 
      }, 
      yAxis: { 
       title: { 
        text: ' ' 
       } 
      }, 
      plotOptions: { 
       pie: { 
//     y:1, 
        shadow: false, 
//     center: ['50%', '50%'], 
        borderWidth: 0, 
        showInLegend: false, 
        size: '80%', 
        innerSize: '60%' 
        , 

        data: [ 
         ['allo', 18], 
         ['asdad', 14], 
         ['asdad', 11], 
         ['asdasd', 10], 
         ['adad', 8], 
         ['asdada', 7], 
         ['adada ada', 7], 
         ['adad', 5], 
         ['asdas',7], 
         ['ada', 3] 

        ] 
       } 
      }, 
      tooltip: { 
       valueSuffix: '%' 
      }, 
      series: [ 
       { 
        type: 'pie', 
        name: 'Browser share', 

        dataLabels: { 
         color:'white', 
         distance: -20, 
         formatter: function() { 
          if(this.percentage!=0) return Math.round(this.percentage) + '%'; 

         } 
        } 
       }, 
       { 
        type: 'pie', 
        name: 'Browser share', 

        dataLabels: { 
         connectorColor: 'grey', 
         color:'black', 
//       y:-10, 
         softConnector: false, 
         connectorWidth:1, 
         verticalAlign:'top', 
         distance: 20, 
         formatter: function() { 
          if(this.percentage!=0) return this.point.name; 

         } 
        } 
       } 
      ] 
     }); 
    });