具体效果如下：
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
