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

轉載于:https://www.cnblogs.com/walblog/articles/8278620.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/453682.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/453682.shtml
英文地址，請注明出處：http://en.pswp.cn/news/453682.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！