Dane wykresu kołowego Etykiety wewnątrz i na zewnątrz

Question

Chcę mieć wykres kołowy z datalabeli wewnątrz i na zewnątrz ciasta. Wiem, że przy ujemnej odległości pokazuje etykietę wewnątrz ciasta. ale chcę to wewnątrz i na zewnątrz. Poza Chcę wyświetlić procent i wewnątrz całkowitej sumy punktu.

Answer 1

Nie masz możliwości ustawienia podwójnych datalabeli, ale możesz użyć obejścia, które nie jest idealne, ale może będzie pomocne. Możesz więc ustawić useHTML, następnie w formularzu powróć dwa divy, najpierw odpowiedni datalabel (na zewnątrz) i drugi z wewnątrz. Następnie ustaw id z licznikiem, który definiuje ID każdego div jako unikalny, a następnie tylko to, czego potrzebujesz, to ustawić odpowiedni CSS. Przykład jednej pozycji datalabel jest tutaj: 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 style:

.datalabelInside { 
position:absolute; 
} 

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

}

Answer 2

nie jest łatwa praca arround na nim

że jest pan wierzchniej 2 pie z zmierzających 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; 

         } 
        } 
       } 
      ] 
     }); 
    });