Dữ liệu bánh xe HighchartsVòng bên trong và bên ngoài

Question

tôi muốn có biểu đồ hình tròn với các thẻ dữ liệu bên trong và bên ngoài một chiếc bánh. tôi biết, với khoảng cách phủ định, nó sẽ hiển thị nhãn bên trong chiếc bánh. nhưng tôi muốn nó bên trong và bên ngoài. bên ngoài tôi muốn hiển thị phần trăm và bên trong tổng số tiền của điểm.

Answer 1

Bạn không có khả năng đặt hai mốc dữ liệu, nhưng bạn có thể sử dụng cách giải quyết khác, điều này không hoàn hảo nhưng có thể sẽ hữu ích. Vì vậy, bạn có thể thiết lập sử dụngHTML, sau đó trong formater trả về hai divs, datalabel thích hợp đầu tiên (bên ngoài) và thứ hai với bên trong. Sau đó đặt id với bộ đếm xác định id của mỗi div là duy nhất, sau đó chỉ những gì bạn cần là đặt CSS phù hợp. Ví dụ về nhãn dữ liệu vị trí một sẵn có tại đây: 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] 
      ] 
     }] 
    }); 
}); 

});

phong cách CSS:

.datalabelInside { 
position:absolute; 
} 

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

}

Answer 2

có một công việc dễ dàng arround cho nó

được bạn che phủ 2 bánh với datalabels khác nhau

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; 

         } 
        } 
       } 
      ] 
     }); 
    });