jquery flot pie画饼图

具体效果如下：

  1 <!DOCTYPE html>  
  2 <html>  
  3 <head>  
  4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5 <title>Insert title here</title>  
  6 <script language="javascript" type="text/javascript" src="jquery.js"></script>   
  7 <script language="javascript" type="text/javascript" src="jquery.flot.js"></script>  
  8 <script language="javascript" type="text/javascript" src="jquery.flot.pie.js"></script>  
  9   
 10 <script type="text/javascript">  
 11   
 12     $(function(){  
 13   
 14         var data = [  
 15             { label: "苹果",  data: 10},  
 16             { label: "香蕉",  data: 30},  
 17             { label: "西瓜",  data: 90},  
 18             { label: "葡萄",  data: 70},  
 19             { label: "柑橘",  data: 80},  
 20             { label: "菠萝",  data: 110}  
 21         ];  
 22       
 23         $.plot($("#pie1"), data, {  
 24             series: {  
 25                          pie: {   
 26                                     show: true //显示饼图  
 27                          }  
 28             },  
 29             legend: {  
 30                         show: false //不显示图例  
 31             }  
 32         });  
 33           
 34         $.plot($("#pie2"), data, {  
 35             series: {  
 36                 pie: {   
 37                     show: true //显示饼图  
 38                 }  
 39             }  
 40               
 41         });  
 42   
 43         $.plot($("#pie3"), data, {  
 44             series: {  
 45                 pie: {   
 46                     show: true,  
 47                     radius: 1, //半径  
 48                     label: {  
 49                         show: true,  
 50                         radius: 2/3,  
 51                         formatter: function(label, series){  
 52                             return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';  
 53                     },  
 54                     threshold: 0.03  //这个值小于0.03，也就是3%时，label就会隐藏  
 55                 }  
 56             }  
 57         },  
 58         legend: {  
 59             show: false  
 60         }  
 61     });  
 62   
 63   
 64      $.plot($("#pie4"), data,   
 65     {  
 66         series: {  
 67             pie: {   
 68                 show: true  
 69             }  
 70         },  
 71         grid: {  
 72             hoverable: true,  
 73             clickable: true  
 74         }  
 75     });  
 76   
 77     $("#pie4").bind("plothover", pieHover);  
 78     $("#pie4").bind("plotclick", pieClick);  
 79   
 80   
 81   
 82   
 83     });  
 84       
 85     function pieHover(event, pos, obj)   
 86 {  
 87     if (!obj)  
 88                 return;  
 89     percent = parseFloat(obj.series.percent).toFixed(2);  
 90     $("#hover").html('<span style="font-weight: bold; color: '+obj.series.color+'">'+obj.series.label+' ('+percent+'%)</span>');  
 91 }  
 92   
 93 function pieClick(event, pos, obj)   
 94 {  
 95     if (!obj)  
 96                 return;  
 97     percent = parseFloat(obj.series.percent).toFixed(2);  
 98     alert(''+obj.series.label+': '+percent+'%');  
 99 }  
100       
101   
102   
103   
104   
105 </script>  
106   
107 <style>  
108 div.graph  
109         {  
110             width: 400px;  
111             height: 300px;  
112             border: 1px dashed gainsboro;  
113         }  
114   
115 </style>  
116   
117   
118   
119   
120 </head>  
121 <body>  
122   
123   
124 <h3>饼图1</h3>  
125 <div id="pie1" class="graph" ></div>  
126 <hr>  
127   
128 <h3>饼图2</h3>  
129 <div id="pie2" class="graph" ></div>  
130 <hr>  
131   
132 <h3>饼图3</h3>  
133 <div id="pie3" class="graph" ></div>  
134 <hr>  
135   
136 <h3>饼图4</h3>  
137 <div id="pie4" class="graph" ></div>  
138 <div id="hover"></div>  
139 <hr>  
140   
141 </body>  
142 </html>
文章转自：http://blog.csdn.net/u022812849/article/details/42525055
posted @ 2018-01-13 11:12  huohuohiahia  阅读(233)  评论(0)  编辑  收藏  举报