Highcharts绘制饼图

1. 1、使用Highcharts制作饼图的效果图如下：
   

   

   2、对应的JavaScript代码---pie-chart.js如下：

   [javascript]  view plain  copy

   1. $(function () {  
   2.     var chart;  
   3.     var totalMoney=50000  
   4.     $(document).ready(function() {  
   5.         chart = new Highcharts.Chart({  
   6.             chart: {  
   7.                 renderTo: 'pie_chart',  
   8.                 plotBackgroundColor: 'white',//背景颜色  
   9.                 plotBorderWidth: 0,  
   10.                 plotShadow: false  
   11.             },  
   12.             title: {  
   13.                 text: 'Total:$'+totalMoney,  
   14.                 verticalAlign:'bottom',  
   15.                 y:-60  
   16.             },  
   17.             tooltip: {//鼠标移动到每个饼图显示的内容  
   18.                 pointFormat: '{point.name}: <b>{point.percentage}%</b>',  
   19.                 percentageDecimals: 1,  
   20.                 formatter: function() {  
   21.                     return this.point.name+':$'+totalMoney*this.point.percentage/100;  
   22.                 }  
   23.             },  
   24.             plotOptions: {  
   25.                 pie: {  
   26.                     size:'60%',  
   27.                     borderWidth: 0,  
   28.                     allowPointSelect: true,  
   29.                     cursor: 'pointer',  
   30.                     dataLabels: {  
   31.                     enabled: true,  
   32.                     color: '#000',                        
   33.                     distance: -50,//通过设置这个属性，将每个小饼图的显示名称和每个饼图重叠  
   34.                     style: {                              
   35.                         fontSize: '10px',  
   36.                         lineHeight: '10px'  
   37.                     },  
   38.                     formatter: function(index) {      
   39.                             return  '<span style="color:#00008B;font-weight:bold">' + this.point.name + '</span>';  
   40.                        }  
   41.                   },  
   42.                  padding:20  
   43.                 }  
   44.             },  
   45.             series: [{//设置每小个饼图的颜色、名称、百分比  
   46.                 type: 'pie',  
   47.                 name: null,  
   48.                 data: [  
   49.                     {name:'Base salary',color:'#3DA9FF',y:65},  
   50.                     {name:'Health insurance',color:'#008FE0',y:20},  
   51.                     {name:'Company matched',color:'#00639B',y:10},  
   52.                     {name:'Others',color:'#CBECFF',y:5}  
   53.                 ]  
   54.             }]  
   55.         });  
   56.     });  
   57.       
   58. });