实现饼状分布画图(如下)：调试环境：Firefox
页面代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 5 <!-- basic styles --> 6 <link href="assets/css/bootstrap.min.css" rel="stylesheet" /> 7 <link rel="stylesheet" href="assets/css/font-awesome.min.css" /> 8 9 <!-- ace styles --> 10 <link rel="stylesheet" href="assets/css/ace.min.css" /> 11 12 </head> 13 14 <body> 15 <div class="widget-box" style="60%;"> 16 <div class="widget-header widget-header-flat widget-header-small"> 17 <h5> 18 <i class="icon-signal"></i> 19 访问来源 20 </h5> 21 22 <div class="widget-toolbar no-border"> 23 <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown"> 24 本周 25 <i class="icon-angle-down icon-on-right bigger-110"></i> 26 </button> 27 28 <ul class="dropdown-menu pull-right dropdown-125 dropdown-lighter dropdown-caret"> 29 <li class="active"> 30 <a href="#" class="blue"> 31 <i class="icon-caret-right bigger-110"> </i> 32 本周 33 </a> 34 </li> 35 36 <li> 37 <a href="#"> 38 <i class="icon-caret-right bigger-110 invisible"> </i> 39 上周 40 </a> 41 </li> 42 43 <li> 44 <a href="#"> 45 <i class="icon-caret-right bigger-110 invisible"> </i> 46 本月 47 </a> 48 </li> 49 50 <li> 51 <a href="#"> 52 <i class="icon-caret-right bigger-110 invisible"> </i> 53 上月 54 </a> 55 </li> 56 </ul> 57 </div> 58 </div> 59 60 <div class="widget-body"> 61 <div class="widget-main"> 62 <div id="piechart-placeholder"></div> 63 64 <div class="hr hr8 hr-double"></div> 65 66 <div class="clearfix"> 67 <div class="grid3"> 68 <span class="grey"> 69 <i class="icon-facebook-sign icon-2x blue"></i> 70 likes 71 </span> 72 <h4 class="bigger pull-right">1,255</h4> 73 </div> 74 75 <div class="grid3"> 76 <span class="grey"> 77 <i class="icon-twitter-sign icon-2x purple"></i> 78 tweets 79 </span> 80 <h4 class="bigger pull-right">941</h4> 81 </div> 82 83 <div class="grid3"> 84 <span class="grey"> 85 <i class="icon-pinterest-sign icon-2x red"></i> 86 pins 87 </span> 88 <h4 class="bigger pull-right">1,050</h4> 89 </div> 90 </div> 91 </div><!-- /widget-main --> 92 </div><!-- /widget-body --> 93 </div><!-- /widget-box --> 94 <!-- /.main-container --> 95 <!-- basic scripts --> 96 <!--[if !IE]> --> 97 <!--[if !IE]> --> 98 99 <script type="text/javascript"> 100 window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>" + "<" + "script>"); 101 </script> 102 103 <!-- <![endif]--> 104 <!--[if IE]> 105 <script type="text/javascript"> 106 window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"script>"); 107 </script> 108 <![endif]--> 109 <script type="text/javascript"> 110 if ("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>" + "<" + "script>"); 111 </script> 112 113 <script src="assets/js/bootstrap.min.js"></script> 114 115 <!-- page specific plugin scripts --> 116 <script src="assets/js/flot/jquery.flot.min.js"></script> // 曲线图 117 <script src="assets/js/flot/jquery.flot.pie.min.js"></script> // 饼状图 118 119 <!-- inline scripts related to this page --> 120 121 <script type="text/javascript"> 122 jQuery(function ($) { 123 var placeholder = $('#piechart-placeholder').css({ 'width': '90%', 'min-height': '150px' }); 124 var data = [ 125 { label: "social networks", data: 38.7, color: "#68BC31" }, 126 { label: "search engines", data: 24.5, color: "#2091CF" }, 127 { label: "ad campaigns", data: 8.2, color: "#AF4E96" }, 128 { label: "direct traffic", data: 18.6, color: "#DA5430" }, 129 { label: "other", data: 10, color: "#FEE074" } 130 ] 131 function drawPieChart(placeholder, data, position) { 132 $.plot(placeholder, data, { 133 series: { 134 pie: { 135 show: true, 136 tilt: 0.8, 137 highlight: { 138 opacity: 0.25 139 }, 140 stroke: { 141 color: '#fff', 142 2 143 }, 144 startAngle: 2 145 } 146 }, 147 legend: { 148 show: true, 149 position: position || "ne", 150 labelBoxBorderColor: null, 151 margin: [-30, 15] 152 } 153 , 154 grid: { 155 hoverable: true, 156 clickable: true 157 } 158 }) 159 } 160 drawPieChart(placeholder, data); 161 162 /** 163 we saved the drawing function and the data to redraw with different position later when switching to RTL mode dynamically 164 so that's not needed actually. 165 */ 166 placeholder.data('chart', data); 167 placeholder.data('draw', drawPieChart); 168 169 170 171 var $tooltip = $("<div class='tooltip top in'><div class='tooltip-inner'></div></div>").hide().appendTo('body'); 172 var previousPoint = null; 173 174 placeholder.on('plothover', function (event, pos, item) { 175 if (item) { 176 if (previousPoint != item.seriesIndex) { 177 previousPoint = item.seriesIndex; 178 var tip = item.series['label'] + " : " + item.series['percent'] + '%'; 179 $tooltip.show().children(0).text(tip); 180 } 181 $tooltip.css({ top: pos.pageY + 10, left: pos.pageX + 10 }); 182 } else { 183 $tooltip.hide(); 184 previousPoint = null; 185 } 186 187 }); 188 189 }) 190 </script> 191 192 </body> 193 </html>
所需引用的js文件下载链接：