实现饼状分布画图(如下)：调试环境：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="width: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 width: 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文件下载链接：
时间： 2024-11-16 06:42:26