Highcharts绘制饼图

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. });