Highcharts pie dataLabels iç ve dış

Question

Bir pasta grafik içinde bir pasta içinde ve dışında datalabels istiyorum. biliyorum, negatif bir mesafe ile pasta içindeki etiketi gösterir. ama içeride ve dışarıda istiyorum. dışında, yüzdeyi ve noktanın toplam toplamını görüntülemek istiyorum.

Answer 1

İkili veri kümesi belirleme olasılığınız yoktur, ancak mükemmel olmayan, ancak yararlı olabilecek geçici çözümü kullanabilirsiniz. Böylece, useHTML'yi ayarlayabilir, daha sonra formater'de iki div, ilk uygun data label (dış) ve ikincisi içeri döndürür. Sonra, her div'in kimliğini benzersiz olarak tanımlayan sayacı kullanarak id, sadece ihtiyacınız olan şey uygun CSS'yi belirler. Konum bir datalabel Örnek burada mevcuttur: 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 stilleri:

.datalabelInside { 
position:absolute; 
} 

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

}

Answer 2

Eğer ayrılmakta 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; 

         } 
        } 
       } 
      ] 
     }); 
    }); 

ile 2 pasta bindirmek olduğunu o

için etrafında bir kolay iş var