使用Highcharts實現圖表展現
本篇隨筆記錄的是本人2011年作廣州地鐵協同辦公項目時，圖表需求的解決方案。（Demo中只是虛擬的測試數據）javascript
關鍵技術點：css
使用Highcharts實現圖表展現；html
另外使用Highslide彈窗、使用My97DatePicke時間選擇，這裏很少加介紹。java
Highcharts具體介紹和用法請點擊下面連接查看：jquery
http://www.highcharts.com/products/highcharts/web
場景：app
項目中其中一個模塊是分我的工做臺和領導工做臺，根據不一樣級別權限用戶跳轉到不一樣工做臺辦公頁面。因爲做爲領導級別的員工更關注的是整體運營數據內容，但願在我的辦公中能更直觀地看到它，因此這裏涉及到圖表的展現，要求既直觀又美觀、用戶體驗好。ssh
難點：ide
（1）比較網上不一樣腳本庫，哪一個易用美觀，且是免費【沒辦法，公司不想掏錢買有版權收費的腳本庫】
（2）因爲客戶後期會開發BI系統，它的功能更強大和完善；因此所作的這一塊圖表內容只是過渡時期的需求，須要快速開發處理，所以也沒考慮進一步封裝代碼
（3）Demo開發完後，須要更方便地結合後臺進行數據處理，經過返回JSON格式的真實數據進行展現
效果：
代碼：
login.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=7" /> 6 <title>廣州地鐵企業內部門戶</title> 7 <link href="Themes/sso_themes/login.css" rel="stylesheet" type="text/css" /> 8 </head> 9 <body id="login" onkeypress="if(event.keyCode==13)btnLoginCheck();"> 10 <form runat="server" id="form1"> 11 <div class="container"> 12 <div class="header"> 13 <h1> 14 廣州地鐵 - SSO登陸</h1> 15 </div> 16 <div class="content"> 17 <table cellpadding="0" cellspacing="0"> 18 <thead> 19 <tr> 20 <th> 21 </th> 22 <td style="vertical-align: top; padding-top: 16px;"> 23 請輸入您的用戶名和密碼登陸本系統<br /> 24 <label id="lblErrorInfo" style="display: none"> 25 </label> 26 <!--<asp:Label ID="lblErrorInfo" runat="server" Visible="false"></asp:Label>--> 27 </td> 28 </tr> 29 </thead> 30 <tr> 31 <th> 32 用戶名： 33 </th> 34 <td> 35 <input id="txtUserName" class="login_text" value="administrator" /> 36 <!--<asp:TextBox ID="txtUserName" runat="server" CssClass="login_text"></asp:TextBox>--> 37 </td> 38 </tr> 39 <tr> 40 <th> 41 密 碼： 42 </th> 43 <td> 44 <input type="password" id="txtPassword" class="login_text" value="pass@word1" /> 45 <!--<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="login_text"></asp:TextBox>--> 46 </td> 47 </tr> 48 <tr> 49 <th> 50 </th> 51 <td> 52 <input type="radio" name="rdoUserType" id="rdoUserType1" value="0" checked="checked" /><label 53 for="rdoUserType1">內部用戶</label> 54 <input type="radio" name="rdoUserType" id="rdoUserType2" value="1" /><label for="rdoUserType2">外部用戶</label> 55 <!--<asp:RadioButtonList ID="radUserType" runat="server" RepeatDirection="Horizontal" Width="192px"> 56 <asp:ListItem Text="內部用戶" Value="0" Selected="True"></asp:ListItem> 57 <asp:ListItem Text="外部用戶" Value="1"></asp:ListItem> 58 </asp:RadioButtonList>--> 59 </td> 60 </tr> 61 <tr> 62 <th> 63 </th> 64 <td> 65 <input id="chkSetPaw" runat="server" type="checkbox" />記住用戶名和密碼 66 </td> 67 </tr> 68 <tfoot> 69 <tr> 70 <th> 71 </th> 72 <td> 73 <input id="btnLogin" type="button" class="inputbtn" onclick="btnLoginCheck();" value="登陸" /> 74 <!--<asp:button id="Button1" runat="server" cssclass="inputbtn" onclick="btnLogin_Click" 75 text="登陸" />--> 76 <a href="javascript:" class="linkbtn2" style="display: none"><span>密鑰棒登陸</span></a> 77 </td> 78 </tr> 79 </tfoot> 80 </table> 81 </div> 82 <div class="footer"> 83 <p> 84 Copyright @ 2009 廣州市地下鐵道總公司 All Right Reserved 85 </p> 86 </div> 87 <div id="extraDiv1"> 88 <span></span> 89 </div> 90 <div id="extraDiv2"> 91 <span></span> 92 </div> 93 </div> 94 <script type="text/javascript"> 95 window.onload = function () { 96 document.getElementById("btnLogin").focus(); 97 }; 98 99 String.prototype.trim = function () { 100 return this.replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g, ""); 101 }; 102 103 var btnLoginCheck = function () { 104 var txtUserName = document.getElementById("txtUserName"); 105 var txtPassword = document.getElementById("txtPassword"); 106 var userNameVal = txtUserName.value.trim(); 107 var passwordVal = txtPassword.value.trim(); 108 if (!userNameVal) { 109 alert("請輸入用戶名"); 110 txtUserName.focus(); 111 return false; 112 } 113 if (!passwordVal) { 114 alert("請輸入密碼"); 115 txtPassword.focus(); 116 return false; 117 } 118 if (userNameVal != "administrator" || passwordVal != "pass@word1") { 119 alert("用戶名或密碼輸入有誤，請從新輸入"); 120 txtUserName.value = ""; 121 txtPassword.value = ""; 122 txtUserName.focus(); 123 return false; 124 } 125 location.href = 'index.html';//aspx頁面就不用在此控制 126 return true; 127 }; 128 </script> 129 </form> 130 </body> 131 </html>
index.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=7" /> 6 <title>領導工做臺首頁</title> 7 <link href="Themes/Default/Style.css" rel="stylesheet" type="text/css" /> 8 <link href="Themes/Default/Highslide/highslide.css" rel="stylesheet" type="text/css" /> 9 <script type="text/javascript" src="Scripts/DatePicker/WdatePicker.js"></script> 10 <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script> 11 <script type="text/javascript" src="Scripts/Highcharts/highcharts-2.1.4.min.js"></script> 12 <script type="text/javascript" src="Scripts/Highslide/highslide-full.min.js"></script> 13 <script type="text/javascript" src="Scripts/Highslide/highslide.config.js"></script> 14 <!--<script type="text/javascript" src="Scripts/Highcharts/themes/grid.js"></script>--> 15 </head> 16 <body> 17 <!--header start--> 18 <div class="header"> 19 <div class="date"> 20 2011年5月23日 星期一 21 </div> 22 <div class="wel_info"> 23 您好：總公司領導<span style="display: none"> [<a href="#">信息技術中心<small> </small></a>]</span>，歡迎回來！</div> 24 <div class="new_help"> 25 <ul> 26 <li><a href="#">門戶首頁</a></li> 27 <li><a href="#">我要幫助</a></li> 28 <li><a href="#">個人操做</a></li> 29 <li><a href="#" onclick="if(confirm('肯定要註銷用戶？'))location.href='login.html';">註銷</a></li> 30 </ul> 31 </div> 32 </div> 33 <!--header end--> 34 <!--logo_nav start--> 35 <div class="logo_nav"> 36 <div> 37 <div class="weather"> 38 <img src="images/weather_03.gif" /> 39 <ul class="today"> 40 <li><strong>廣州</strong>[<a href="#">切換城市<small> </small></a>]</li> 41 <li><strong>陣雨轉中雨</strong></li> 42 <li><strong>23℃-26℃</strong></li> 43 </ul> 44 <ul class="tomorrow"> 45 <li>明天</li> 46 <li> 47 <img src="images/weather_06.gif" /></li> 48 <li>24℃-27℃</li> 49 </ul> 50 </div> 51 <div class="logo"> 52 <img src="images/logo.gif" /></div> 53 </div> 54 <div class="nav"> 55 <ul> 56 <li><a href="#" class="current"><b></b><span>個人工做臺</span></a></li> 57 <li><a href="#"><b></b><span>OA系統</span></a></li> 58 <li><a href="#"><b></b><span>合同管理</span></a></li> 59 <li><a href="#"><b></b><span>立項管理</span></a></li> 60 </ul> 61 <div class="skin"> 62 <table width="55" border="0" cellspacing="0" cellpadding="0"> 63 <tr> 64 <td> 65 <a href="#" class="skin_left_btn"></a> 66 </td> 67 <td> 68 <a href="#" class="btn_blue"></a> 69 </td> 70 <td> 71 <a href="#" class="btn_red"></a> 72 </td> 73 <td> 74 <a href="#" class="btn_green"></a> 75 </td> 76 <td> 77 <a href="#" class="skin_right_btn"></a> 78 </td> 79 </tr> 80 </table> 81 </div> 82 </div> 83 </div> 84 <!--logo_nav end--> 85 <!--主體內容 start--> 86 <table width="960" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-top: 5px"> 87 <tr> 88 <td valign="top"> 89 <div class="webpart2"> 90 <div class="wp_top wp_top1"> 91 <h1 style="padding: 0; height: 30px; overflow: hidden;"> 92 <a href="javascript:;">更多>></a><a href="javascript:;"><img src="images/refresh.gif" 93 align="absmiddle" /> 刷新 |</a> 94 <ul class="tablist_1"> 95 <li><a href="javascript:;" onmouseover="SelectMenu4(this,'tab4_1');" class="tabDef4" 96 id="tabDef4"><span>待辦任務</span></a> </li> 97 <li><a href="#"><span>資金管理（8）</span></a></li> 98 </ul> 99 </h1> 100 </div> 101 <div class="wp_main"> 102 <div id="tab4_1"> 103 <table width="100%" border="0" cellspacing="0" cellpadding="5"> 104 <tr> 105 <th width="4%" align="center" bgcolor="#F5F8FF"> 106 107 </th> 108 <th width="10%" align="center" bgcolor="#F5F8FF"> 109 類型 110 </th> 111 <th width="8%" align="center" bgcolor="#F5F8FF"> 112 緩急 113 </th> 114 <th width="35%" align="center" bgcolor="#F5F8FF"> 115 標題 116 </th> 117 <th width="15%" align="center" bgcolor="#F5F8FF"> 118 發起部門 119 </th> 120 <th width="15%" align="center" bgcolor="#F5F8FF"> 121 處理環節 122 </th> 123 <th width="*" align="center" bgcolor="#F5F8FF"> 124 發送時間<img src="images/index_72.gif" /> 125 </th> 126 </tr> 127 <tr> 128 <td> 129 <img src="images/index_76.gif" /> 130 </td> 131 <td> 132 OA待辦 133 </td> 134 <td> 135 通常 136 </td> 137 <td title="關於違規使用工做證件狀況的通報"> 138 <a href="modules/oa.html" target="_blank">關於違規使用工做證件狀況的通報</a> 139 </td> 140 <td> 141 </td> 142 <td title="起草簽報"> 143 起草簽報 144 </td> 145 <td> 146 2011-05-09 <a href="javascript:alert('設置成功');" title="設置監控"><img src="images/edit2.gif" 147 width="13" height="13" align="absmiddle" onclick="this.style.display='none';" 148 style="vertical-align: top" /></a> 149 </td> 150 </tr> 151 <tr> 152 <td> 153 <img src="images/index_76.gif" /> 154 </td> 155 <td> 156 OA待辦 157 </td> 158 <td> 159 通常 160 </td> 161 <td title="廣州地鐵信息管理部招領領導小組會議紀要"> 162 <a href="modules/oa.html" target="_blank">廣州地鐵信息管理部招領領導小組會議紀要</a> 163 </td> 164 <td> 165 </td> 166 <td title="起草人確認"> 167 起草人確.. 168 </td> 169 <td> 170 2011-05-09 <a href="javascript:alert('設置成功');" title="設置監控"><img src="images/edit2.gif" 171 width="13" height="13" align="absmiddle" onclick="this.style.display='none';" 172 style="vertical-align: top" /></a> 173 </td> 174 </tr> 175 <tr> 176 <td> 177 <img src="images/index_76.gif" /> 178 </td> 179 <td> 180 OA待辦 181 </td> 182 <td> 183 通常 184 </td> 185 <td title="關於2011年春節放假的通知"> 186 <a href="modules/oa.html" target="_blank">關於2011年春節放假的通知</a> 187 </td> 188 <td> 189 </td> 190 <td title="部門內人員處理"> 191 部門內人.. 192 </td> 193 <td> 194 2011-05-09 <a href="javascript:alert('設置成功');" title="設置監控"><img src="images/edit2.gif" 195 width="13" height="13" align="absmiddle" onclick="this.style.display='none';" 196 style="vertical-align: top" /></a> 197 </td> 198 </tr> 199 <tr> 200 <td> 201 <img src="images/index_76.gif" /> 202 </td> 203 <td> 204 OA待辦 205 </td> 206 <td> 207 通常 208 </td> 209 <td title="測試受權是部門領導變換"> 210 <a href="modules/oa.html" target="_blank">測試受權是部門領導變換</a> 211 </td> 212 <td> 213 </td> 214 <td title="起草人修改"> 215 起草人修.. 216 </td> 217 <td> 218 2011-05-09 219 </td> 220 </tr> 221 <tr> 222 <td> 223 <img src="images/index_76.gif" /> 224 </td> 225 <td> 226 OA待辦 227 </td> 228 <td> 229 通常 230 </td> 231 <td title="測試Portal待辦"> 232 <a href="modules/oa.html" target="_blank">測試Portal待辦</a> 233 </td> 234 <td> 235 </td> 236 <td title="起草人歸檔"> 237 起草人歸.. 238 </td> 239 <td> 240 2011-05-09 241 </td> 242 </tr> 243 <tr> 244 <td> 245 <img src="images/index_76.gif" /> 246 </td> 247 <td> 248 OA待辦 249 </td> 250 <td> 251 通常 252 </td> 253 <td title="業務人員出差管理規範"> 254 <a href="modules/oa.html" target="_blank">業務人員出差管理規範</a> 255 </td> 256 <td> 257 </td> 258 <td title="起草人確認"> 259 起草人確.. 260 </td> 261 <td> 262 2011-05-09 <a href="javascript:alert('設置成功');" title="設置監控"><img src="images/edit2.gif" 263 width="13" height="13" align="absmiddle" onclick="this.style.display='none';" 264 style="vertical-align: top" /></a> 265 </td> 266 </tr> 267 <tr> 268 <td> 269 <img src="images/index_76.gif" /> 270 </td> 271 <td> 272 OA待辦 273 </td> 274 <td> 275 通常 276 </td> 277 <td title="44[2011-05-09 9:25]"> 278 <a href="modules/oa.html" target="_blank">44[2011-05-09 9:25]</a> 279 </td> 280 <td> 281 </td> 282 <td title="起草簽報"> 283 起草簽報 284 </td> 285 <td> 286 2011-05-09 287 </td> 288 </tr> 289 <tr> 290 <td> 291 <img src="images/index_76.gif" /> 292 </td> 293 <td> 294 OA待辦 295 </td> 296 <td> 297 通常 298 </td> 299 <td title="測試[2011-05-08 14:30]"> 300 <a href="modules/oa.html" target="_blank">測試[2011-05-08 14:30]</a> 301 </td> 302 <td> 303 </td> 304 <td title="起草人確認"> 305 起草人確.. 306 </td> 307 <td> 308 2011-05-09 <a href="javascript:alert('設置成功');" title="設置監控"><img src="images/edit2.gif" 309 width="13" height="13" align="absmiddle" onclick="this.style.display='none';" 310 style="vertical-align: top" /></a> 311 </td> 312 </tr> 313 <tr> 314 <td> 315 <img src="images/index_76.gif" /> 316 </td> 317 <td> 318 合同待辦 319 </td> 320 <td> 321 通常 322 </td> 323 <td title="測試[2011-05-09 23:50]"> 324 <a href="modules/oa.html" target="_blank">測試[2011-05-09 23:50]</a> 325 </td> 326 <td> 327 </td> 328 <td title="起草簽報"> 329 起草簽報 330 </td> 331 <td> 332 2011-05-09 333 </td> 334 </tr> 335 <tr> 336 <td> 337 <img src="images/index_76.gif" /> 338 </td> 339 <td> 340 合同待辦 341 </td> 342 <td> 343 通常 344 </td> 345 <td title="廣州地鐵內部會議預訂"> 346 <a href="modules/oa.html" target="_blank">廣州地鐵內部會議預訂</a> 347 </td> 348 <td> 349 </td> 350 <td title="起草人確認"> 351 起草人確.. 352 </td> 353 <td> 354 2011-05-09 <a href="javascript:alert('設置成功');" title="設置監控"><img src="images/edit2.gif" 355 width="13" height="13" align="absmiddle" onclick="this.style.display='none';" 356 style="vertical-align: top" /></a> 357 </td> 358 </tr> 359 <tr> 360 <td colspan="6" style="font-size: 13px; display: none;"> 361 共 35 條，每頁顯示 10 條，分 4 頁顯示 362 如今正在查看第<span style="color: #F00;">1</span> 2 3 ...頁 363 </td> 364 </tr> 365 </table> 366 </div> 367 <div id="tab4_2" style="display: none;"> 368 <table width="100%" border="0" cellspacing="0" cellpadding="5"> 369 <tr> 370 <th width="4%" align="center" bgcolor="#F5F8FF"> 371 372 </th> 373 <th width="10%" align="center" bgcolor="#F5F8FF"> 374 類型 375 </th> 376 <th width="8%" align="center" bgcolor="#F5F8FF"> 377 緩急 378 </th> 379 <th width="35%" align="center" bgcolor="#F5F8FF"> 380 標題 381 </th> 382 <th width="15%" align="center" bgcolor="#F5F8FF"> 383 發起部門 384 </th> 385 <th width="15%" align="center" bgcolor="#F5F8FF"> 386 處理環節 387 </th> 388 <th width="*" align="center" bgcolor="#F5F8FF"> 389 發送時間<img src="images/index_72.gif" /> 390 </th> 391 </tr> 392 <tr> 393 <td> 394 <img src="images/index_76.gif" /> 395 </td> 396 <td> 397 **資金 398 </td> 399 <td> 400 通常 401 </td> 402 <td title="0508測試收回同步1"> 403 <a href="#">0508測試收回同步1</a> 404 </td> 405 <td> 406 </td> 407 <td title="起草人修改"> 408 起草人修.. 409 </td> 410 <td> 411 2011-05-09 412 </td> 413 </tr> 414 <tr> 415 <td> 416 <img src="images/index_76.gif" /> 417 </td> 418 <td> 419 **資金 420 </td> 421 <td> 422 通常 423 </td> 424 <td title="0508測試收回同步2"> 425 <a href="#">0508測試收回同步2</a> 426 </td> 427 <td> 428 </td> 429 <td title="起草人修改"> 430 起草人修.. 431 </td> 432 <td> 433 2011-05-09 434 </td> 435 </tr> 436 <tr> 437 <td> 438 <img src="images/index_76.gif" /> 439 </td> 440 <td> 441 **資金 442 </td> 443 <td> 444 通常 445 </td> 446 <td title="0508測試收回同步3"> 447 <a href="#">0508測試收回同步3</a> 448 </td> 449 <td> 450 </td> 451 <td title="起草人修改"> 452 起草人修.. 453 </td> 454 <td> 455 2011-05-09 456 </td> 457 </tr> 458 <tr> 459 <td> 460 <img src="images/index_76.gif" /> 461 </td> 462 <td> 463 **資金 464 </td> 465 <td> 466 通常 467 </td> 468 <td title="0508測試收回同步4"> 469 <a href="#">0508測試收回同步4</a> 470 </td> 471 <td> 472 </td> 473 <td title="起草人修改"> 474 起草人修.. 475 </td> 476 <td> 477 2011-05-09 478 </td> 479 </tr> 480 <tr> 481 <td> 482 <img src="images/index_76.gif" /> 483 </td> 484 <td> 485 **資金 486 </td> 487 <td> 488 通常 489 </td> 490 <td title="0508測試收回同步5"> 491 <a href="#">0508測試收回同步5</a> 492 </td> 493 <td> 494 </td> 495 <td title="起草人修改"> 496 起草人修.. 497 </td> 498 <td> 499 2011-05-09 500 </td> 501 </tr> 502 <tr> 503 <td> 504 <img src="images/index_76.gif" /> 505 </td> 506 <td> 507 **資金 508 </td> 509 <td> 510 通常 511 </td> 512 <td title="0508測試收回同步6"> 513 <a href="#">0508測試收回同步6</a> 514 </td> 515 <td> 516 </td> 517 <td title="起草人修改"> 518 起草人修.. 519 </td> 520 <td> 521 2011-05-09 522 </td> 523 </tr> 524 <tr> 525 <td> 526 <img src="images/index_76.gif" /> 527 </td> 528 <td> 529 **資金 530 </td> 531 <td> 532 通常 533 </td> 534 <td title="0508測試收回同步7"> 535 <a href="#">0508測試收回同步7</a> 536 </td> 537 <td> 538 </td> 539 <td title="起草人修改"> 540 起草人修.. 541 </td> 542 <td> 543 2011-05-09 544 </td> 545 </tr> 546 <tr> 547 <td> 548 <img src="images/index_76.gif" /> 549 </td> 550 <td> 551 **資金 552 </td> 553 <td> 554 通常 555 </td> 556 <td title="0508測試收回同步8"> 557 <a href="#">0508測試收回同步8</a> 558 </td> 559 <td> 560 </td> 561 <td title="起草人修改"> 562 起草人修.. 563 </td> 564 <td> 565 2011-05-09 566 </td> 567 </tr> 568 <tr> 569 <td> 570 <img src="images/index_76.gif" /> 571 </td> 572 <td> 573 **資金 574 </td> 575 <td> 576 通常 577 </td> 578 <td title="0508測試收回同步9"> 579 <a href="#">0508測試收回同步9</a> 580 </td> 581 <td> 582 </td> 583 <td title="起草人修改"> 584 起草人修.. 585 </td> 586 <td> 587 2011-05-09 588 </td> 589 </tr> 590 <tr> 591 <td> 592 <img src="images/index_76.gif" /> 593 </td> 594 <td> 595 **資金 596 </td> 597 <td> 598 通常 599 </td> 600 <td title="0508測試收回同步10"> 601 <a href="#">0508測試收回同步10</a> 602 </td> 603 <td> 604 </td> 605 <td title="起草人修改"> 606 起草人修.. 607 </td> 608 <td> 609 2011-05-09 610 </td> 611 </tr> 612 <tr> 613 <td colspan="6" style="font-size: 13px; display: none"> 614 共 25 條，每頁顯示 6 條，分 5 頁顯示 615 如今正在查看第<span style="color: #F00;">1</span> 2 3 ...頁 616 </td> 617 </tr> 618 </table> 619 </div> 620 </div> 621 <div class="wp_foot"> 622 </div> 623 </div> 624 <div class="webpart2"> 625 <div class="wp_top"> 626 <h1 style="padding: 0; height: 30px; overflow: hidden;"> 627 <a href="javascript:;" style="display: none">更多>></a> 628 <ul class="tablist_1"> 629 <li><a href="javascript:;" onmouseover="SelectMenu5(this,'tab5_1');" class="tabDef5" 630 id="tabDef5"><span>工程建設</span></a> </li> 631 <li><a href="javascript:;" onmouseover="SelectMenu5(this,'tab5_2');"><span>運營管理</span></a></li> 632 <li><a href="javascript:;" onmouseover="SelectMenu5(this,'tab5_3');"><span>財務管理</span></a></li> 633 <li><a href="javascript:;" onmouseover="SelectMenu5(this,'tab5_4');"><span>人力資源</span></a></li> 634 </ul> 635 </h1> 636 </div> 637 <div class="wp_main"> 638 <div id="tab5_1" style="height: 500px;"> 639 </div> 640 <div id="tab5_2" style="height: 500px; display: none;"> 641 </div> 642 <div id="tab5_3" style="height: 500px; display: none;"> 643 </div> 644 <div id="tab5_4" style="height: 500px; display: none;"> 645 </div> 646 </div> 647 <div class="wp_foot"> 648 </div> 649 </div> 650 </td> 651 <td width="10" valign="top"> 652 653 </td> 654 <td width="220" valign="top"> 655 <div style="margin-bottom: 10px;"> 656 <img src="images/bikpipic.png" alt="" /></div> 657 <div style="margin-bottom: 10px;"> 658 <img src="images/bipic1.png" alt="" /></div> 659 <div class="webpart2"> 660 <div class="wp_top"> 661 <h1> 662 <a href="javascript:;" target="_blank">更多>></a> <span>媒體新聞</span> 663 </h1> 664 </div> 665 <div class="wp_main"> 666 <ul class="list3 list4"> 667 <li><a href="javascript:;">[新浪網]三級殘疾人也可優惠..</a></li> 668 <li><a href="javascript:;">[騰訊網]廣州地鐵乘客出站..</a></li> 669 <li><a href="javascript:;">[南海網]廣州地鐵4號線或考..</a></li> 670 <li><a href="javascript:;">[新浪網]廣州地鐵海心沙站直..</a></li> 671 </ul> 672 </div> 673 <div class="wp_foot"> 674 </div> 675 </div> 676 <div class="webpart"> 677 <div class="wp_top"> 678 <div class="title"> 679 應用系統</div> 680 <h1> 681 </h1> 682 </div> 683 <div class="wp_main"> 684 <div> 685 <table width="96%" border="0" align="center" cellpadding="0" cellspacing="0" class="tools"> 686 <tr> 687 <td title="OA系統"> 688 <a href="#"> 689 <img src="images/tools1.gif" alt="" /></a><span><a href="#">OA系統</a></span> 690 </td> 691 <td title="合同管理"> 692 <a href="#"> 693 <img src="images/tools2.gif" alt="" /></a><span><a href="#">合同管理</a></span> 694 </td> 695 <td title="數據中心"> 696 <a href="#"> 697 <img src="images/tools3.gif" alt="" /></a><span><a href="#">數據中心</a></span> 698 </td> 699 </tr> 700 <tr> 701 <td title="資金系統"> 702 <a href="#"> 703 <img src="images/tools4.gif" alt="" /></a><span><a href="#">資金系統</a></span> 704 </td> 705 <td title="報表中心"> 706 <a href="#"> 707 <img src="images/tools5.gif" alt="" /></a><span><a href="#">報表中心</a></span> 708 </td> 709 <td title="BBS"> 710 <a href="#"> 711 <img src="images/tools6.gif" alt="" /></a><span><a href="#">BBS</a></span> 712 </td> 713 </tr> 714 </table> 715 </div> 716 <div class="hr10"> 717 </div> 718 </div> 719 <div class="wp_foot"> 720 <div> 721 </div> 722 </div> 723 </div> 724 </td> 725 </tr> 726 </table> 727 <!--主體內容 end--> 728 <!--底部信息 start--> 729 <div class="footer"> 730 <center> 731 <div class="foot_center"> 732 <ul> 733 <li><a href="#">意見反饋</a></li> 734 <li><a href="#">收藏網站</a></li> 735 <li><a href="#">設爲首頁</a></li> 736 <li><a href="#">幫助中心</a></li> 737 </ul> 738 <div class="clear"> 739 </div> 740 <p> 741 廣州地下鐵道總公司 版權全部</p> 742 </div> 743 <div class="clear"> 744 </div> 745 </center> 746 </div> 747 <!--底部信息 end--> 748 <div style="height: 10px"> 749 </div> 750 <script type="text/javascript"> 751 var g = function (id) { 752 return typeof id == "string" ? document.getElementById(id) : id; 753 }; 754 var menuArray = [ 755 { 756 currentNode: null, 757 currentDiv: null 758 }, 759 { 760 currentNode: g("tabDef4"), 761 currentDiv: g("tab4_1") 762 }, 763 { 764 currentNode: g("tabDef5"), 765 currentDiv: g("tab5_1") 766 } 767 ]; 768 var selectMenu = function (menuObj, divId, menuIndex) { 769 var len = menuArray.length; 770 for (var i = 0; i < len; i++) { 771 if (menuArray[i] != null && menuArray[i].currentNode != null) 772 menuArray[i].currentNode.className = "tabDef" + (i + 3); //tabDef3,tabDef4,tabDef5 773 } 774 return function (menuObj, divId, menuIndex) { 775 if (!isNaN(menuIndex) && 0 <= parseInt(menuIndex) && parseInt(menuIndex) < len) { 776 var tempObj = menuArray[menuIndex]; 777 if (menuObj != tempObj.currentNode) { 778 menuObj.className = tempObj.currentNode.className; 779 tempObj.currentNode.className = ""; 780 tempObj.currentDiv.style.display = "none"; 781 782 tempObj.currentNode = menuObj; 783 tempObj.currentDiv = g(divId); 784 tempObj.currentDiv.style.display = ""; 785 } 786 } 787 }; 788 } (); 789 790 function SelectMenu3(MenuObj, DivId) { 791 selectMenu(MenuObj, DivId, 0); 792 } 793 794 function SelectMenu4(MenuObj, DivId) { 795 selectMenu(MenuObj, DivId, 1); 796 } 797 798 function SelectMenu5(MenuObj, DivId) { 799 selectMenu(MenuObj, DivId, 2); 800 switch (DivId) { 801 case "tab5_1": 802 case "tab5_3": 803 case "tab5_2": 804 loadTab(DivId); 805 break; 806 case "tab5_4": 807 loadTab(DivId, function () { 808 menuArray[0].currentNode = g("tabDef3"); 809 menuArray[0].currentNode.className = "tabDef3"; 810 menuArray[0].currentDiv = g("tab3_1"); 811 }); 812 break; 813 } 814 } 815 816 var justOneLoad = ""; 817 function loadTab(divId, func) { 818 if (justOneLoad.indexOf(divId) == -1) { 819 var tabObj = { 820 tab5_1: "projectManage", 821 tab5_2: "operationMaintenance", 822 tab5_3: "financeManage", 823 tab5_4: "humanResource" 824 }; 825 $("#" + divId).load("modules/" + tabObj[divId] + ".html", function () { 826 if (func != null && typeof func == "function") 827 func(); 828 justOneLoad += divId; 829 }); 830 } 831 } 832 833 $(function () { 834 $("#tabDef5").mouseover(); 835 }); 836 </script> 837 </body> 838 </html>
projectManage.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>工程建設</title> 6 <style type="text/css"> 7 #pm_table_info td 8 { 9 border-bottom: 1px dotted #dedede; 10 } 11 #pm_table_info .thTitle 12 { 13 background: #f1f1f1; 14 color: #444; 15 padding: 8px 2px; 16 text-align: right; 17 } 18 #pm_table_info .description 19 { 20 cursor: pointer; 21 color: Blue; 22 } 23 .divShowTitle 24 { 25 text-indent: 2em; 26 line-height: 20px; 27 } 28 </style> 29 </head> 30 <body> 31 <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> 32 <tr> 33 <td width="49%" valign="top" style="border: #C6D8E0 1px solid"> 34 <table id="pm_table_info" width="100%" cellspacing="0" cellpadding="3"> 35 <tr> 36 <th style="width: 30%;" class="thTitle"> 37 項目名稱： 38 </th> 39 <td> 40 <select id="ddlProjectName"> 41 <option value="廣州市軌道交通九號線工程">廣州市軌道交通九號線工程</option> 42 <option value="廣州市軌道交通三號線北延段工程">廣州市軌道交通三號線北延段工程</option> 43 </select> 44 </td> 45 </tr> 46 <tr> 47 <th class="thTitle"> 48 計劃工程師： 49 </th> 50 <td> 51 <span id="txtPlanEngineer"> </span> 52 </td> 53 </tr> 54 <tr> 55 <th class="thTitle"> 56 所屬建設線路： 57 </th> 58 <td> 59 <span id="txtBuildLine"> </span> 60 </td> 61 </tr> 62 <tr> 63 <th class="thTitle"> 64 土建工點開工： 65 </th> 66 <td> 67 <span id="txtBuildStart"> </span> 68 </td> 69 </tr> 70 <tr> 71 <th class="thTitle"> 72 開通目標： 73 </th> 74 <td> 75 <span id="txtBuildEnd"> </span> 76 </td> 77 </tr> 78 <tr> 79 <th class="thTitle"> 80 項目描述： 81 </th> 82 <td title="點擊顯示詳細描述"> 83 <span id="txtProjectDescription" class="description"> </span> 84 </td> 85 </tr> 86 <tr> 87 <th class="thTitle"> 88 項目整體進度： 89 </th> 90 <td> 91 <div id="txtProjectTotalProgress" style='background: url(images/progress1.gif) repeat-x; 92 width: 0%; padding: 3px 0;'> 93 <font color='black'><b> </b></font> 94 </div> 95 </td> 96 </tr> 97 <tr> 98 <th class="thTitle"> 99 選擇專業： 100 </th> 101 <td> 102 <select id="ddlProfession"> 103 </select> 104 </td> 105 </tr> 106 </table> 107 </td> 108 <td width="2%" valign="top"> 109 110 </td> 111 <td width="49%" valign="top"> 112 <div id="pm_containerPie" style="height: 242px"> 113 </div> 114 </td> 115 </tr> 116 <tr> 117 <td width="49%" valign="top"> 118 <div id="pm_containerColumn1" style="height: 250px; padding-top: 5px;"> 119 </div> 120 </td> 121 <td width="2%" valign="top"> 122 123 </td> 124 <td width="49%" valign="top"> 125 <div id="pm_containerColumn2" style="width: 350px; height: 250px; padding-top: 5px;"> 126 </div> 127 </td> 128 </tr> 129 </table> 130 <script type="text/javascript" src="Scripts\json2.js"></script> 131 <script type="text/javascript"> 132 var pm_chart; 133 function pm_initPieChart(seriesData) { 134 var chartOptions = { 135 chart: { 136 renderTo: 'pm_containerPie', 137 defaultSeriesType: 'pie', 138 borderWidth: 1, 139 borderColor: '#C6D8E0' 140 }, 141 title: { 142 text: '' 143 }, 144 tooltip: { 145 formatter: function () { 146 return '<b>' + this.point.name + '：</b>' + this.y + ' %'; 147 } 148 }, 149 plotOptions: { 150 pie: { 151 allowPointSelect: true, 152 cursor: 'pointer', 153 dataLabels: { 154 enabled: true, 155 color: '#000', 156 connectorColor: '#000', 157 158 formatter: function () { 159 return '<b>' + this.point.name + '：</b>' + this.y + ' %'; 160 } 161 }, 162 states: { 163 hover: { 164 brightness: 0.2 165 } 166 }, 167 showInLegend: true, 168 size: '60%', 169 center: [150, 110] 170 } 171 }, 172 legend: { 173 layout: 'vertical', 174 backgroundColor: '#FFFFFF', 175 align: 'right', 176 verticalAlign: 'top', 177 x: 0, 178 y: 0, 179 floating: true, 180 shadow: true 181 }, 182 series: [{ 183 name: '工程進度', 184 data: null 185 }] 186 }; 187 chartOptions.series[0].data = seriesData; 188 pm_chart = new Highcharts.Chart(chartOptions); 189 } 190 191 function pm_initColumnChart(mainTitle, mainYear, seriesDataArray) { 192 var chartOptions = { 193 chart: { 194 renderTo: 'pm_containerColumn1', 195 defaultSeriesType: 'column', 196 borderWidth: 1, 197 borderColor: '#C6D8E0' 198 }, 199 title: { 200 text: '廣州市軌道交通' + mainTitle + mainYear + '年投資視圖' 201 }, 202 xAxis: { 203 title: { 204 text: '' 205 }, 206 categories: ['年度', '固定資產', '全面預算'], 207 tickmarkPlacement: 'between' 208 }, 209 yAxis: { 210 min: 0, 211 title: { 212 text: '萬' 213 }, 214 labels: { 215 formatter: function () { 216 return this.value / 10000; 217 } 218 } 219 }, 220 legend: { 221 enabled: true 222 }, 223 tooltip: { 224 formatter: function () { 225 var seriesName = this.series.name; 226 return '<b>' + this.x + '投資' + seriesName + '：</b>' + this.y / 10000 + '萬<br/>' 227 + (seriesName == '完成' ? '<b>' + seriesName + '：</b>' + chartOptions.series[1].data[this.point.x].percent + '%（佔比）' : ''); //pm_chart.get(this.point.id) 在column類型不可用 228 } 229 }, 230 plotOptions: { 231 column: { 232 pointPadding: 0.2, 233 borderWidth: 0 234 } 235 }, 236 series: [{ 237 name: '計劃', 238 data: null, 239 dataLabels: { 240 enabled: true, 241 formatter: function () { 242 return this.y / 10000; 243 } 244 } 245 }, { 246 name: '完成', 247 data: null, 248 dataLabels: { 249 enabled: true, 250 formatter: function () { 251 return this.y / 10000; 252 } 253 } 254 }] 255 }; 256 chartOptions.series[0].data = seriesDataArray[0]; 257 chartOptions.series[1].data = seriesDataArray[1]; 258 pm_chart = new Highcharts.Chart(chartOptions); 259 260 chartOptions = { 261 chart: { 262 renderTo: 'pm_containerColumn2', 263 defaultSeriesType: 'column', 264 borderWidth: 1, 265 borderColor: '#C6D8E0' 266 }, 267 title: { 268 text: '廣州市軌道交通' + mainTitle + mainYear + '年資金視圖' 269 }, 270 xAxis: { 271 title: { 272 text: '' 273 }, 274 categories: ['年度', '固定資產', '全面預算'], 275 tickmarkPlacement: 'between' 276 }, 277 yAxis: { 278 min: 0, 279 title: { 280 text: '萬' 281 }, 282 labels: { 283 formatter: function () { 284 return this.value / 10000; 285 } 286 } 287 }, 288 legend: { 289 enabled: true 290 }, 291 tooltip: { 292 formatter: function () { 293 var seriesName = this.series.name; 294 return '<b>' + this.x + '資金' + seriesName + '：</b>' + this.y / 10000 + '萬<br/>' 295 + (seriesName == '完成' ? '<b>' + seriesName + '：</b>' + chartOptions.series[1].data[this.point.x].percent + '%（佔比）' : ''); //pm_chart.get(this.point.id) 在column類型不可用 296 } 297 }, 298 plotOptions: { 299 column: { 300 pointPadding: 0.2, 301 borderWidth: 0 302 } 303 }, 304 series: [{ 305 name: '計劃', 306 data: null, 307 dataLabels: { 308 enabled: true, 309 formatter: function () { 310 return this.y / 10000; 311 } 312 } 313 }, { 314 name: '完成', 315 data: null, 316 dataLabels: { 317 enabled: true, 318 formatter: function () { 319 return this.y / 10000; 320 } 321 } 322 }] 323 }; 324 chartOptions.series[0].data = seriesDataArray[2]; 325 chartOptions.series[1].data = seriesDataArray[3]; 326 pm_chart = new Highcharts.Chart(chartOptions); 327 } 328 329 function initProfession(professionArray) { 330 var ddlProfession = $('#ddlProfession').get(0); 331 ddlProfession.innerHTML = ''; 332 for (var i = 0, len = professionArray.length; i < len; i++) 333 ddlProfession.options.add(new Option(professionArray[i], i)); 334 } 335 336 $(document).ready(function () { 337 /* 338 var json = '{ Name: "Name1", "Age": "27" }'; 339 json = eval("(" + json + ")"); 340 alert(json.Name); 341 342 var text = JSON.stringify(json); 343 alert(text); 344 json = JSON.parse(text); 345 alert(json.Name); 346 347 json = "{ \"Name\": \"Name1\", \"Age\": \"27\",\"Time\":\"2011-05-24 14:57\" }"; 348 //eval('json = ' + json); 349 json = JSON.parse(json); 350 alert(json.Time); 351 */ 352 353 var testData = [ 354 { 355 info: { 356 planEngineer: '周振凌', 357 buildLine: '廣州市軌道交通九號線', 358 buildStart: '2009年09月28日', 359 buildEnd: '2014年12月31日', 360 projectDescription: '九號線以花都汽車城西側飛鵝嶺站爲起點，終點爲高增站，在高增站與三號線北延線高增站地下島式平行換乘（遠期貫通）。線路呈東西走向，全長20.1千米，均爲地下線。全線共設9座車站（飛鵝嶺、花都汽車城、廣州北站、花城路、花果山公園、花都廣場、馬鞍山公園、清布站和高增站），均爲地下車站，其中廣州北站與武廣、京廣、廣清線換乘，高增站與三號線北延線換乘。最大站間距5.2千米，最小站間距1千米，平均間距2.1米。風神大道與平步大道交叉路口處設民主車輛段一座，控制中心設在車輛段內。主變電站設兩座，民主主變電站設在民主車輛段內，白蟮塘主變電站設在106國道與迎賓大道交叉路口東北側處。全線初、近、遠期均採用六輛B型車編組，列車最高運行速度120千米/小時，14列車具有上線條件，行車間隔5分鐘。九號線初期獨立運營，近、遠期待三號線支線（天河客運站至體育西路段）拆解後，利用三號線北延段高增站預留的道岔出岔並接入九號線，做爲三號線的支線貫通運營。', 361 projectTotalProgress: 9 362 }, 363 pie: { 364 dataProfession: ['土建工程', '車輛段/停車場工程', '軌道工程', '車站設備安裝及裝修工程', '系統工程', '車輛'], 365 data: [ 366 [ 367 { 368 name: '未開始', 369 y: 85, 370 sliced: true, 371 selected: true 372 }, 373 { 374 name: '延期', 375 y: 0 376 }, 377 { 378 name: '已完成', 379 y: 0 380 }, 381 { 382 name: '進行中', 383 y: 15 384 } 385 ], 386 [ 387 { 388 name: '未開始', 389 y: 100, 390 sliced: true, 391 selected: true 392 }, 393 { 394 name: '延期', 395 y: 0 396 }, 397 { 398 name: '已完成', 399 y: 0 400 }, 401 { 402 name: '進行中', 403 y: 0 404 } 405 ], 406 [ 407 { 408 name: '未開始', 409 y: 100, 410 sliced: true, 411 selected: true 412 }, 413 { 414 name: '延期', 415 y: 0 416 }, 417 { 418 name: '已完成', 419 y: 0 420 }, 421 { 422 name: '進行中', 423 y: 0 424 } 425 ], 426 [ 427 { 428 name: '未開始', 429 y: 100, 430 sliced: true, 431 selected: true 432 }, 433 { 434 name: '延期', 435 y: 0 436 }, 437 { 438 name: '已完成', 439 y: 0 440 }, 441 { 442 name: '進行中', 443 y: 0 444 } 445 ], 446 [ 447 { 448 name: '未開始', 449 y: 100, 450 sliced: true, 451 selected: true 452 }, 453 { 454 name: '延期', 455 y: 0 456 }, 457 { 458 name: '已完成', 459 y: 0 460 }, 461 { 462 name: '進行中', 463 y: 0 464 } 465 ], 466 [ 467 { 468 name: '未開始', 469 y: 100, 470 sliced: true, 471 selected: true 472 }, 473 { 474 name: '延期', 475 y: 0 476 }, 477 { 478 name: '已完成', 479 y: 0 480 }, 481 { 482 name: '進行中', 483 y: 0 484 } 485 ] 486 ] 487 }, 488 column: { 489 mainTitle: '九號線', 490 mainYear: '2011', 491 data: [ 492 [1052020000, 786680000, 826510000], 493 [ 494 { y: 180571800, percent: 17.16 }, 495 { y: 180571800, percent: 22.95 }, 496 { y: 180571800, percent: 21.85 } 497 ], 498 [1100340000, 1032530000, 958280000], 499 [ 500 { y: 135648000, percent: 12.33 }, 501 { y: 135648000, percent: 13.14 }, 502 { y: 135648000, percent: 14.16 } 503 ] 504 ] 505 } 506 }, 507 { 508 info: { 509 planEngineer: '周振凌', 510 buildLine: '廣州市軌道交通三號線北延段', 511 buildStart: '2007年03月20日', 512 buildEnd: '2010年10月30日', 513 projectDescription: '三號線北延段南起廣州東站，北至新機場北站，全長30.9千米，共設13座車站（從南至北依次爲廣州東、燕塘、梅花園、南方醫院、同和、永泰、白雲大道北、嘉禾、龍歸、人和、高增、新機場南和新機場北站），均爲地下車站，平均站間距爲2.6千米，最大站間距爲6.29千米，最小站間距爲0.95千米。有3座車站（燕塘、嘉禾和高增站）與其它軌道交通線換乘，其中試驗段1.7千米（含新機場南站）土建工程已與機場航站樓同步建成，需新建線路爲29.1千米，包括10座車站和11個區間，工程概算103.22億元。車輛均採用B型車，最高時速120千米。設車輛段1座，與二號線嘉禾車輛段合建，設望崗和燕嶺主變電站2座，分別位於嘉禾車輛段內和燕塘站附近。', 514 projectTotalProgress: 100 515 }, 516 pie: { 517 dataProfession: ['土建工程', '軌道工程', '車站設備安裝及裝修工程', '系統工程'], 518 data: [ 519 [ 520 { 521 name: '未開始', 522 y: 0, 523 sliced: true, 524 selected: true 525 }, 526 { 527 name: '延期', 528 y: 0 529 }, 530 { 531 name: '已完成', 532 y: 100 533 }, 534 { 535 name: '進行中', 536 y: 0 537 } 538 ], 539 [ 540 { 541 name: '未開始', 542 y: 0, 543 sliced: true, 544 selected: true 545 }, 546 { 547 name: '延期', 548 y: 0 549 }, 550 { 551 name: '已完成', 552 y: 100 553 }, 554 { 555 name: '進行中', 556 y: 0 557 } 558 ], 559 [ 560 { 561 name: '未開始', 562 y: 0, 563 sliced: true, 564 selected: true 565 }, 566 { 567 name: '延期', 568 y: 0 569 }, 570 { 571 name: '已完成', 572 y: 100 573 }, 574 { 575 name: '進行中', 576 y: 0 577 } 578 ], 579 [ 580 { 581 name: '未開始', 582 y: 60, 583 sliced: true, 584 selected: true 585 }, 586 { 587 name: '延期', 588 y: 0 589 }, 590 { 591 name: '已完成', 592 y: 40 593 }, 594 { 595 name: '進行中', 596 y: 0 597 } 598 ] 599 ] 600 }, 601 column: { 602 mainTitle: '三號線北延段', 603 mainYear: '2011', 604 data: [ 605 [67700000, 59660000, 67700000], 606 [ 607 { y: 180571800, percent: 266.72 }, 608 { y: 180571800, percent: 302.67 }, 609 { y: 180571800, percent: 266.72 } 610 ], 611 [266150000, 187300000, 264510000], 612 [ 613 { y: 135648000, percent: 50.97 }, 614 { y: 135648000, percent: 72.42 }, 615 { y: 135648000, percent: 51.28 } 616 ] 617 ] 618 } 619 } 620 ]; 621 622 $('#ddlProjectName').change(function () { 623 var that = this; 624 var index = that.selectedIndex; 625 var infoObj = testData[index].info; 626 var pieObj = testData[index].pie; 627 var columnObj = testData[index].column; 628 $('#txtPlanEngineer').html(infoObj.planEngineer); 629 $('#txtBuildLine').html(infoObj.buildLine); 630 $('#txtBuildStart').html(infoObj.buildStart); 631 $('#txtBuildEnd').html(infoObj.buildEnd); 632 $('#txtProjectDescription').html(infoObj.projectDescription.length > 12 ? 633 infoObj.projectDescription.substr(0, 12) + '...' : infoObj.projectDescription) 634 .unbind('mouseover mouseout click') 635 .bind('mouseover', function () { 636 $(this).css('color', 'red'); 637 }) 638 .bind('mouseout', function () { 639 $(this).css('color', 'blue'); 640 }) 641 .bind('click', function (e) { 642 if ($('.highslide-heading').length != 0) { 643 $('.highslide-heading').eq(0).html(that.value); 644 $('.divShowTitle:eq(0)').html(infoObj.projectDescription); 645 } 646 hs.htmlExpand(this, { 647 pageOrigin: { 648 x: e.pageX + 200, 649 y: e.pageY 650 }, 651 headingText: that.value, 652 maincontentText: '<div class="divShowTitle">' + infoObj.projectDescription + '</div>', 653 width: 400 654 }); 655 }); 656 $('#txtProjectTotalProgress').css('width', infoObj.projectTotalProgress + '%') 657 .find('b').html(infoObj.projectTotalProgress + '%'); 658 659 initProfession(pieObj.dataProfession); 660 pm_initPieChart(pieObj.data[0]); 661 pm_initColumnChart(columnObj.mainTitle, columnObj.mainYear, columnObj.data); 662 }).change(); 663 664 $('#ddlProfession').change(function () { 665 pm_initPieChart(testData[$('#ddlProjectName')[0].selectedIndex].pie.data[this.value]); 666 }); 667 }); 668 </script> 669 </body> 670 </html>
operationMaintenance.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>運營管理</title> 6 </head> 7 <body> 8 <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> 9 <tr> 10 <td width="100%" valign="top"> 11 <label for="txt_om_search"> 12 時間：</label><input id="txt_om_search" type="text" class="input" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" /><input 13 type="button" value="查詢" /> 14 </td> 15 </tr> 16 <tr> 17 <td width="100%" valign="top"> 18 <div id="om_containerLine" style="height: 235px"> 19 </div> 20 </td> 21 </tr> 22 <tr> 23 <td width="100%" valign="top"> 24 <div id="om_containerCombo" style="height: 235px; padding-top: 5px;"> 25 </div> 26 </td> 27 </tr> 28 </table> 29 <script type="text/javascript"> 30 var om_chart; 31 function om_initLineChart(mainDate, categoriesData, seriesDataArray) { 32 var chartOptions = { 33 chart: { 34 renderTo: 'om_containerLine', 35 defaultSeriesType: 'line', 36 borderWidth: 1, 37 borderColor: '#C6D8E0', 38 marginBottom:100 39 }, 40 title: { 41 text: mainDate + '客運量狀況' 42 }, 43 subtitle: { 44 text: '備註：（點擊鄰線換乘顯示詳細）', 45 floating: true, 46 align: 'right', 47 verticalAlign: 'bottom', 48 x: 13, 49 y: 5 50 }, 51 xAxis: { 52 title: { 53 text: '' 54 }, 55 categories: categoriesData, 56 tickmarkPlacement: 'between' 57 }, 58 yAxis: [{ 59 min: 0, 60 title: { 61 text: '萬（人次）' 62 }, 63 labels: { 64 formatter: function () { 65 return this.value / 10000; 66 } 67 } 68 }, { 69 min: 0, 70 opposite: true, 71 title: { 72 text: '萬（人次）', 73 style: { 74 color: '#703092' 75 } 76 }, 77 labels: { 78 formatter: function () { 79 return this.value / 10000; 80 }, 81 style: { 82 color: '#703092' 83 } 84 } 85 }], 86 legend: { 87 enabled: true, 88 width: 510, 89 lineHeight: 250, 90 align: 'left', 91 floating: true, 92 itemStyle: { 93 paddingBottom:8 94 } 95 }, 96 tooltip: { 97 shared: true, 98 crosshairs: true, 99 formatter: function () { 100 var s = [], totalPoint = this.points; 101 s.push('<b>'); 102 s.push(totalPoint[0].x); 103 s.push('</b>'); 104 for (var i = 0, len = totalPoint.length; i < len; i++) { 105 s.push('<br/>'); 106 s.push(totalPoint[i].series.name); 107 s.push('：'); 108 s.push(totalPoint[i].y / 10000); 109 s.push('萬'); 110 } 111 return s.join(''); 112 } 113 }, 114 plotOptions: { 115 line: { 116 pointPadding: 0.2, 117 borderWidth: 0 118 } 119 }, 120 series: [{ 121 name: '本日客運量（A+B）', 122 data: null 123 }, { 124 name: '本日乘客人次（A）', 125 data: null 126 }, { 127 name: '鄰線換乘到本線的客運量（B）', 128 data: null, 129 cursor: 'pointer', 130 point: { 131 events: { 132 click: function () { 133 if ($('#om_openSub1_' + this.x).length == 0) 134 $('#om_containerLine').parent('td').append('<a id="om_openSub1_' + this.x + '"></a>'); 135 hs.htmlExpand($('#om_openSub1_' + this.x)[0], { 136 headingText: '（' + this.category + '）' + this.series.name, 137 width: 400, 138 align: 'center', 139 outlineType: 'rounded-white', 140 wrapperClassName: 'draggable-header', 141 objectType: 'iframe', 142 src: 'modules/operationMaintenanceSub1.html?index=' + this.x 143 }); 144 } 145 } 146 } 147 148 }, { 149 name: '本月本日止累計客運量', 150 data: null, 151 yAxis: 1 152 }, { 153 name: '本月本日止日均客運量', 154 data: null 155 }] 156 }; 157 for (var i = 0, len = seriesDataArray.length; i < len; i++) 158 chartOptions.series[i].data = seriesDataArray[i]; 159 om_chart = new Highcharts.Chart(chartOptions); 160 } 161 162 function om_initComboChart(mainDate, categoriesData, seriesDataArray) { 163 var chartOptions = { 164 chart: { 165 renderTo: 'om_containerCombo', 166 defaultSeriesType: 'column', 167 borderWidth: 1, 168 borderColor: '#C6D8E0' 169 }, 170 title: { 171 text: mainDate + '電能消耗狀況' 172 }, 173 subtitle: { 174 text: '備註：（點擊總電耗顯示詳細）', 175 floating: true, 176 align: 'right', 177 verticalAlign: 'bottom', 178 x: 13, 179 y: 5 180 }, 181 xAxis: { 182 title: { 183 text: '' 184 }, 185 categories: categoriesData, 186 tickmarkPlacement: 'between' 187 }, 188 yAxis: { 189 min: 0, 190 title: { 191 text: '萬（千瓦時）' 192 }, 193 labels: { 194 formatter: function () { 195 return this.value / 10000; 196 } 197 } 198 }, 199 legend: { 200 enabled: true 201 }, 202 tooltip: { 203 formatter: function () { 204 var seriesName = this.series.name; 205 return '<b>' + this.x + '</b><br/>' + seriesName + '：</b>' + this.y / 10000 + '萬<br/>' 206 + (seriesName != '總電耗' ? seriesName + '/總電耗：' + chartOptions.series[{ 207 牽引電耗: 0, 208 動力及照明: 1, 209 線損及其它: 2 210 }[seriesName]].data[this.point.x].percent + '%（佔比）<br/>' + '總和：' + this.point.stackTotal / 10000 + '萬' : ''); 211 } 212 }, 213 plotOptions: { 214 column: { 215 pointPadding: 0.2, 216 borderWidth: 0, 217 stacking: 'normal' 218 } 219 }, 220 series: [{ 221 name: '牽引電耗', 222 data: null, 223 stack: 'subPower' 224 }, { 225 name: '動力及照明', 226 data: null, 227 stack: 'subPower' 228 }, { 229 name: '線損及其它', 230 data: null, 231 stack: 'subPower' 232 }, { 233 name: '總電耗', 234 data: null, 235 type: 'line', 236 dataLabels: { 237 enabled: true, 238 formatter: function () { 239 return this.y / 10000; 240 } 241 }, 242 cursor: 'pointer', 243 point: { 244 events: { 245 click: function () { 246 if ($('#om_openSub2_' + this.x).length == 0) 247 $('#om_containerCombo').parent('td').append('<a id="om_openSub2_' + this.x + '"></a>'); 248 hs.htmlExpand($('#om_openSub2_' + this.x)[0], { 249 headingText: this.category + this.series.name, 250 width: 400, 251 align: 'center', 252 outlineType: 'rounded-white', 253 wrapperClassName: 'draggable-header', 254 objectType: 'iframe', 255 src: 'modules/operationMaintenanceSub2.html?index=' + this.x 256 }); 257 } 258 } 259 } 260 }] 261 }; 262 for (var i = 0, len = seriesDataArray.length; i < len; i++) 263 chartOptions.series[i].data = seriesDataArray[i]; 264 om_chart = new Highcharts.Chart(chartOptions); 265 } 266 267 $(function () { 268 var testData = [ 269 { 270 info: { 271 mainDate: '2011年06月02日' 272 }, 273 line: { 274 categoriesData: ['一號線', '二號線', '三號線', '三號線北延線', '四號線', '五號線', '八號線', 'APM', '廣佛線'], 275 data: [ 276 [ 277 2300000, 2100000, 2200000, 2500000, 2600000, 278 2700000, 1800000, 1100000, 2500000 279 ], 280 [ 281 800000, 1200000, 1400000, 1000000, 1200000, 282 1800000, 600000, 1100000, 1200000 283 ], 284 [ 285 1500000, 900000, 800000, 1500000, 1400000, 286 900000, 1200000, null, 1300000 287 ], 288 [ 289 10000000, 12000000, 14000000, 13000000, 15000000, 290 11000000, 16000000, 12000000, 14000000 291 ], 292 [ 293 1800000, 2200000, 1800000, 2400000, 2100000, 294 1600000, 1900000, 1200000, 1500000 295 ] 296 ] 297 }, 298 combo: { 299 categoriesData: ['一號線', '二號線', '三號線', '三號線北延線', '四號線', '五號線', '八號線', 'APM', '廣佛線'], 300 data: [ 301 [ 302 { y: 4000000, percent: 40 }, 303 { y: 4000000, percent: 40 }, 304 { y: 4000000, percent: 40 }, 305 { y: 4000000, percent: 40 }, 306 { y: 4000000, percent: 40 }, 307 { y: 4000000, percent: 40 }, 308 { y: 4000000, percent: 40 }, 309 { y: 4000000, percent: 40 }, 310 { y: 4000000, percent: 40 } 311 ], 312 [ 313 { y: 3000000, percent: 30 }, 314 { y: 3000000, percent: 30 }, 315 { y: 3000000, percent: 30 }, 316 { y: 3000000, percent: 30 }, 317 { y: 3000000, percent: 30 }, 318 { y: 3000000, percent: 30 }, 319 { y: 3000000, percent: 30 }, 320 { y: 3000000, percent: 30 }, 321 { y: 3000000, percent: 30 } 322 ], 323 [ 324 { y: 2000000, percent: 20 }, 325 { y: 2000000, percent: 20 }, 326 { y: 2000000, percent: 20 }, 327 { y: 2000000, percent: 20 }, 328 { y: 2000000, percent: 20 }, 329 { y: 2000000, percent: 20 }, 330 { y: 2000000, percent: 20 }, 331 { y: 2000000, percent: 20 }, 332 { y: 2000000, percent: 20 } 333 ], 334 [ 335 10000000, 10000000, 10000000, 10000000, 10000000, 336 10000000, 10000000, 10000000, 10000000 337 ] 338 ] 339 } 340 } 341 ]; 342 343 testData[0].info.mainDate = new Date().toLocaleDateString(); 344 $('#txt_om_search').val(testData[0].info.mainDate.replace('年', '-').replace('月', '-').replace('日', '')); 345 346 var lineObj = testData[0].line; 347 om_initLineChart(testData[0].info.mainDate, lineObj.categoriesData, lineObj.data); 348 var comboObj = testData[0].combo; 349 om_initComboChart(testData[0].info.mainDate, comboObj.categoriesData, comboObj.data); 350 }); 351 </script> 352 </body> 353 </html>
operationMaintenanceSub1.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="X-UA-Compatible" content="IE=7" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>運營管理鄰線換乘子項</title> 7 <script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script> 8 <script type="text/javascript" src="../Scripts/queryString.js"></script> 9 <script type="text/javascript" src="../Scripts/Highcharts/highcharts-2.1.4.min.js"></script> 10 </head> 11 <body> 12 <div id="omSub1_containerColumn" style="height: 400px;"> 13 </div> 14 <script type="text/javascript"> 15 var omSub1_chart; 16 function omSub1_initColumnChart(seriesData) { 17 var chartOptions = { 18 chart: { 19 renderTo: 'omSub1_containerColumn', 20 defaultSeriesType: 'column', 21 borderWidth: 1, 22 borderColor: '#C6D8E0' 23 }, 24 title: { 25 text: '' 26 }, 27 xAxis: { 28 title: { 29 text: '萬（人次）' 30 }, 31 categories: ['本日換乘客運量狀況'], 32 tickmarkPlacement: 'between' 33 }, 34 yAxis: { 35 title: { 36 text: '百分比' 37 } 38 }, 39 tooltip: { 40 formatter: function () { 41 return '<b>' + this.series.name + '</b><br/>' + '換乘客運量：' + this.y / 10000 + 42 '萬<br/>' + this.x + '：' + this.point.stackTotal / 10000 + '萬<br/>百分比：'+ 43 Highcharts.numberFormat(this.percentage,2,'.') + '%'; 44 } 45 }, 46 plotOptions: { 47 column: { 48 stacking: 'percent', 49 dataLabels: { 50 enabled: true, 51 formatter: function () { 52 return this.y / 10000; 53 }, 54 color: '#FFFFFF', 55 y:15 56 } 57 } 58 }, 59 series: seriesData 60 }; 61 62 omSub1_chart = new Highcharts.Chart(chartOptions); 63 } 64 65 $(function () { 66 var testData = [ 67 [ 68 { name: '二號線', data: [200000] }, 69 { name: '三號線', data: [300000] }, 70 { name: '三號線北延線', data: [300000] }, 71 { name: '四號線', data: [200000] }, 72 { name: '五號線', data: [100000] }, 73 { name: '八號線', data: [200000] }, 74 { name: '廣佛線', data: [200000] } 75 ], 76 [ 77 { name: '一號線', data: [140000] }, 78 { name: '三號線', data: [100000] }, 79 { name: '三號線北延線', data: [100000] }, 80 { name: '四號線', data: [150000] }, 81 { name: '五號線', data: [150000] }, 82 { name: '八號線', data: [100000] }, 83 { name: '廣佛線', data: [160000] } 84 ], 85 [ 86 { name: '一號線', data: [160000] }, 87 { name: '二號線', data: [100000] }, 88 { name: '三號線北延線', data: [150000] }, 89 { name: '四號線', data: [50000] }, 90 { name: '五號線', data: [100000] }, 91 { name: '八號線', data: [100000] }, 92 { name: '廣佛線', data: [140000] } 93 ], 94 [ 95 { name: '一號線', data: [300000] }, 96 { name: '二號線', data: [200000] }, 97 { name: '三號線', data: [300000] }, 98 { name: '四號線', data: [200000] }, 99 { name: '五號線', data: [100000] }, 100 { name: '八號線', data: [200000] }, 101 { name: '廣佛線', data: [200000] } 102 ], 103 [ 104 { name: '一號線', data: [300000] }, 105 { name: '二號線', data: [200000] }, 106 { name: '三號線', data: [300000] }, 107 { name: '三號線北延線', data: [200000] }, 108 { name: '五號線', data: [100000] }, 109 { name: '八號線', data: [200000] }, 110 { name: '廣佛線', data: [100000] } 111 ], 112 [ 113 { name: '一號線', data: [140000] }, 114 { name: '二號線', data: [150000] }, 115 { name: '三號線', data: [100000] }, 116 { name: '三號線北延線', data: [100000] }, 117 { name: '四號線', data: [150000] }, 118 { name: '八號線', data: [100000] }, 119 { name: '廣佛線', data: [160000] } 120 ], 121 [ 122 { name: '一號線', data: [240000] }, 123 { name: '二號線', data: [150000] }, 124 { name: '三號線', data: [200000] }, 125 { name: '三號線北延線', data: [100000] }, 126 { name: '四號線', data: [150000] }, 127 { name: '五號線', data: [200000] }, 128 { name: '廣佛線', data: [160000] } 129 ], 130 [ 131 ], 132 [ 133 { name: '一號線', data: [240000] }, 134 { name: '二號線', data: [150000] }, 135 { name: '三號線', data: [240000] }, 136 { name: '三號線北延線', data: [160000] }, 137 { name: '四號線', data: [150000] }, 138 { name: '五號線', data: [200000] }, 139 { name: '八號線', data: [160000] } 140 ] 141 ]; 142 143 queryString.initial(); 144 var index = parseInt(queryString.getValue("index")); 145 omSub1_initColumnChart(testData[index]); 146 }); 147 </script> 148 </body> 149 </html>
operationMaintenanceSub2.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="X-UA-Compatible" content="IE=7" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>運營管理總電耗子項</title> 7 <script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script> 8 <script type="text/javascript" src="../Scripts/queryString.js"></script> 9 <script type="text/javascript" src="../Scripts/Highcharts/highcharts-2.1.4.min.js"></script> 10 </head> 11 <body> 12 <div id="omSub2_containerColumn" style="height: 400px;"> 13 </div> 14 <script type="text/javascript"> 15 var omSub2_chart; 16 function omSub2_initColumnChart(seriesData) { 17 var chartOptions = { 18 chart: { 19 renderTo: 'omSub2_containerColumn', 20 defaultSeriesType: 'column', 21 borderWidth: 1, 22 borderColor: '#C6D8E0' 23 }, 24 title: { 25 text: '' 26 }, 27 xAxis: { 28 title: { 29 text: '萬（千瓦時）' 30 }, 31 categories: ['總電耗'], 32 tickmarkPlacement: 'between' 33 }, 34 yAxis: { 35 title: { 36 text: '百分比' 37 } 38 }, 39 tooltip: { 40 formatter: function () { 41 return '<b>' + this.series.name + '</b><br/>' + '電耗：' + this.y / 10000 + 42 '萬<br/>' + this.x + '：' + this.point.stackTotal / 10000 + '萬<br/>百分比：'+ 43 Highcharts.numberFormat(this.percentage,2,'.') + '%'; 44 } 45 }, 46 plotOptions: { 47 column: { 48 stacking: 'percent', 49 dataLabels: { 50 enabled: true, 51 formatter: function () { 52 return this.y / 10000; 53 }, 54 color: '#FFFFFF', 55 y:15 56 } 57 } 58 }, 59 series: seriesData 60 }; 61 62 omSub2_chart = new Highcharts.Chart(chartOptions); 63 } 64 65 $(function () { 66 var testData = [ 67 [ 68 {name:'廣和', data:[6000000]}, 69 {name:'坑口', data:[4000000]} 70 ], 71 [ 72 { name: '瑤臺2', data: [3000000] }, 73 { name: '榕景2及望崗', data: [7000000] } 74 ], 75 [ 76 { name: '河南2', data: [5000000] }, 77 { name: '金山', data: [4000000] }, 78 { name: '五山', data: [1000000] } 79 ], 80 [ 81 { name: '望崗', data: [8000000] }, 82 { name: '燕嶺', data: [2000000] } 83 ], 84 [ 85 { name: '河南3', data: [4000000] }, 86 { name: '慶盛', data: [4000000] }, 87 { name: '興業', data: [2000000] } 88 ], 89 [ 90 { name: '瑤臺2', data: [5000000] }, 91 { name: '魚珠', data: [5000000] } 92 ], 93 [ 94 { name: '河南8', data: [3000000] }, 95 { name: '榕景8', data: [7000000] } 96 ], 97 [ 98 { name: 'XX', data: [4000000] }, 99 { name: 'XX2', data: [6000000] } 100 ], 101 [ 102 { name: 'XX', data: [9000000] }, 103 { name: '海五路', data: [1000000] } 104 ] 105 ]; 106 107 queryString.initial(); 108 var index = parseInt(queryString.getValue("index")); 109 omSub2_initColumnChart(testData[index]); 110 }); 111 </script> 112 </body> 113 </html>
financeManage.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>財務管理</title> 6 <style type="text/css"> 7 #fm_table_profit td, #fm_table_profit th, #fm_table_debt td, #fm_table_debt th 8 { 9 text-align: center; 10 border-bottom: 1px dotted #dedede; 11 border-left: 1px dotted #dedede; 12 } 13 #fm_table_profit .thTitle, #fm_table_debt .thTitle 14 { 15 background: #F4F6F8; 16 color: #444; 17 padding: 8px 2px; 18 text-align: right; 19 } 20 #fm_table_profit .thColumn, #fm_table_debt .thColumn 21 { 22 background: #F4F6F8; 23 color: #444; 24 padding: 8px 2px; 25 } 26 #fm_table_profit .canClick, #fm_table_debt .canClick 27 { 28 cursor: pointer; 29 color: Blue; 30 } 31 .divShowTitle 32 { 33 text-indent: 2em; 34 line-height: 20px; 35 } 36 #fm_table_profit caption, #fm_table_debt caption 37 { 38 height: 20px; 39 background: url(Themes/Default/bg_main.gif) no-repeat 0 -103px; 40 font-size: 14px; 41 font-weight: bold; 42 vertical-align: middle; 43 } 44 </style> 45 </head> 46 <body> 47 <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> 48 <tr> 49 <td width="49%" valign="top" style="border: #C6D8E0 1px solid"> 50 <table id="fm_table_profit" width="100%" cellspacing="0" cellpadding="3"> 51 <caption> 52 2011年02月28日--利潤表</caption> 53 <thead> 54 <tr> 55 <th class="thColumn"> 56 合計 57 </th> 58 <th class="thColumn"> 59 本期金額（元） 60 </th> 61 <th class="thColumn"> 62 本年累計（元） 63 </th> 64 </tr> 65 </thead> 66 <tbody> 67 <tr> 68 <th style="width: 33%;" class="thTitle"> 69 營業總收入： 70 </th> 71 <td> 72 <span id="Span0" class="canClick">1000000</span> 73 </td> 74 <td> 75 <span id="Span1" class="canClick">11000000</span> 76 </td> 77 </tr> 78 <tr> 79 <th class="thTitle"> 80 營業總成本： 81 </th> 82 <td> 83 <span id="Span2" class="canClick">800000</span> 84 </td> 85 <td> 86 <span id="Span3" class="canClick">8000000</span> 87 </td> 88 </tr> 89 <tr> 90 <th class="thTitle"> 91 營業利潤： 92 </th> 93 <td> 94 <span id="Span4">200000</span> 95 </td> 96 <td> 97 <span id="Span5">3000000</span> 98 </td> 99 </tr> 100 <tr> 101 <th class="thTitle"> 102 利潤總額： 103 </th> 104 <td> 105 <span id="Span6">1000000</span> 106 </td> 107 <td> 108 <span id="Span7">11000000</span> 109 </td> 110 </tr> 111 <tr> 112 <th class="thTitle"> 113 淨利潤： 114 </th> 115 <td> 116 <span id="Span8">1000000</span> 117 </td> 118 <td> 119 <span id="Span9">11000000</span> 120 </td> 121 </tr> 122 </tbody> 123 </table> 124 </td> 125 <td width="2%" valign="top"> 126 127 </td> 128 <td width="49%" valign="top"> 129 <div id="fm_containerColumn1" style="width: 350px; height: 202px"> 130 </div> 131 </td> 132 </tr> 133 <tr> 134 <td colspan="3" style="height: 5px; visibility: hidden"> 135 </td> 136 </tr> 137 <tr> 138 <td width="49%" valign="top" style="border: #C6D8E0 1px solid"> 139 <table id="fm_table_debt" width="100%" cellspacing="0" cellpadding="3"> 140 <caption> 141 2011年02月28日--資產負債表</caption> 142 <thead> 143 <tr> 144 <th class="thColumn"> 145 合計 146 </th> 147 <th class="thColumn"> 148 期末餘額（元） 149 </th> 150 <th class="thColumn"> 151 年初餘額（元） 152 </th> 153 </tr> 154 </thead> 155 <tbody> 156 <tr> 157 <th style="width: 33%;" class="thTitle"> 158 流動資產： 159 </th> 160 <td> 161 <span id="Span10">100000</span> 162 </td> 163 <td> 164 <span id="Span11">100000</span> 165 </td> 166 </tr> 167 <tr> 168 <th class="thTitle"> 169 非流動資產： 170 </th> 171 <td> 172 <span id="Span12">100000</span> 173 </td> 174 <td> 175 <span id="Span13">100000</span> 176 </td> 177 </tr> 178 <tr> 179 <th class="thTitle"> 180 資產： 181 </th> 182 <td> 183 <span id="Span14">100000</span> 184 </td> 185 <td> 186 <span id="Span15">100000</span> 187 </td> 188 </tr> 189 <tr> 190 <th class="thTitle"> 191 流動負債： 192 </th> 193 <td> 194 <span id="Span16">100000</span> 195 </td> 196 <td> 197 <span id="Span17">100000</span> 198 </td> 199 </tr> 200 <tr> 201 <th class="thTitle"> 202 非流動負債： 203 </th> 204 <td> 205 <span id="Span18">100000</span> 206 </td> 207 <td> 208 <span id="Span19">100000</span> 209 </td> 210 </tr> 211 <tr> 212 <th class="thTitle"> 213 負債： 214 </th> 215 <td> 216 <span id="Span20">100000</span> 217 </td> 218 <td> 219 <span id="Span21">100000</span> 220 </td> 221 </tr> 222 <tr> 223 <th class="thTitle"> 224 全部者權益： 225 </th> 226 <td> 227 <span id="Span22">100000</span> 228 </td> 229 <td> 230 <span id="Span23">100000</span> 231 </td> 232 </tr> 233 <tr> 234 <th class="thTitle"> 235 負債及全部者權益： 236 </th> 237 <td> 238 <span id="Span24">100000</span> 239 </td> 240 <td> 241 <span id="Span25">100000</span> 242 </td> 243 </tr> 244 </tbody> 245 </table> 246 </td> 247 <td width="2%" valign="top"> 248 249 </td> 250 <td width="49%" valign="top"> 251 <div id="fm_containerColumn2" style="width: 350px; height: 290px"> 252 </div> 253 </td> 254 </tr> 255 </table> 256 <script type="text/javascript"> 257 Highcharts.visualize = function (table, chartOptions) { 258 chartOptions.xAxis.categories = []; 259 $('tbody th', table).each(function (i) { 260 chartOptions.xAxis.categories.push(this.innerHTML); 261 }); 262 263 chartOptions.series = []; 264 $('tr', table).each(function (i) { 265 var tr = this; 266 $('th, td>span', tr).each(function (j) { 267 if (j > 0) { 268 if (i == 0) { 269 chartOptions.series[j - 1] = { 270 name: this.innerHTML, 271 data: [] 272 }; 273 } else { 274 chartOptions.series[j - 1].data.push(parseFloat(this.innerHTML)); 275 } 276 } 277 }); 278 }); 279 280 var chart = new Highcharts.Chart(chartOptions); 281 } 282 283 function fm_initColumnChart() { 284 var chartOptions = { 285 chart: { 286 renderTo: 'fm_containerColumn1', 287 defaultSeriesType: 'column', 288 borderWidth: 1, 289 borderColor: '#C6D8E0', 290 marginTop: 20, 291 marginBottom: 90 292 }, 293 title: { 294 text: '' 295 }, 296 subtitle: { 297 text: '備註：（k表示千，M表示百萬）', 298 floating: true, 299 align: 'right', 300 verticalAlign: 'bottom', 301 y: 5 302 }, 303 xAxis: { 304 labels: { 305 formatter: function () { 306 return this.value.replace('：', ''); 307 } 308 } 309 }, 310 yAxis: { 311 title: { 312 text: '金額單位：元' 313 } 314 }, 315 legend: { 316 layout: 'vertical', 317 backgroundColor: '#FFFFFF', 318 align: 'left', 319 verticalAlign: 'bottom', 320 x: 0, 321 y: 5, 322 floating: true, 323 shadow: true 324 }, 325 tooltip: { 326 formatter: function () { 327 return '<b>' + this.series.name + '</b><br/>' + this.x + this.y + '元'; 328 } 329 } 330 }; 331 Highcharts.visualize($('#fm_table_profit').get(0), chartOptions); 332 333 chartOptions.chart.renderTo = 'fm_containerColumn2'; 334 chartOptions.chart.marginBottom = 140; 335 Highcharts.visualize($('#fm_table_debt').get(0), chartOptions); 336 } 337 338 function initSpan() { 339 $('#fm_table_profit span.canClick') 340 .bind('mouseover', function () { 341 $(this).css('color', 'red'); 342 }) 343 .bind('mouseout', function () { 344 $(this).css('color', 'blue'); 345 }) 346 .each(function (index) { 347 $(this).click(function (e) { 348 hs.htmlExpand(this, { 349 headingText: $(this).parents('table').children('caption').html(), 350 width: 800, 351 align: 'center', 352 outlineType: 'rounded-white', 353 wrapperClassName: 'draggable-header', 354 objectType: 'iframe', 355 src:'modules/financeManageSub.html?index=' + parseInt(index/2) 356 }); 357 }); 358 }); 359 } 360 361 $(function () { 362 initSpan(); 363 fm_initColumnChart(); 364 }); 365 </script> 366 </body> 367 </html>
financeManageSub.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="X-UA-Compatible" content="IE=7" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>財務管理子項</title> 7 <script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script> 8 <script type="text/javascript" src="../Scripts/queryString.js"></script> 9 <script type="text/javascript" src="../Scripts/Highcharts/highcharts-2.1.4.min.js"></script> 10 </head> 11 <body> 12 <div id="fmSub_containerCombo" style="height: 400px;"> 13 </div> 14 <script type="text/javascript"> 15 var fmSub_chart; 16 function hrSub_initComboChart(titleText, categoriesData, seriesDataArray) { 17 var chartOptions = { 18 chart: { 19 renderTo: 'fmSub_containerCombo', 20 borderWidth: 1, 21 borderColor: '#C6D8E0' 22 }, 23 title: { 24 text: titleText 25 }, 26 subtitle: { 27 text: '備註：（k表示千，M表示百萬）', 28 floating: true, 29 align: 'right', 30 verticalAlign: 'bottom', 31 y: 5 32 }, 33 xAxis: { 34 categories: categoriesData, 35 tickmarkPlacement: 'between' 36 }, 37 yAxis: { 38 title: { 39 text: '金額單位：元' 40 } 41 }, 42 tooltip: { 43 formatter: function () { 44 return '<b>' + this.series.name + '</b><br/>' + 45 (this.point.name ? (this.point.name + '：' + this.y + '%（佔比）') : 46 (this.x + '：' + this.y + '元')); 47 } 48 }, 49 series: seriesDataArray 50 }; 51 52 fmSub_chart = new Highcharts.Chart(chartOptions); 53 } 54 55 $(function () { 56 var testData = [ 57 { 58 name: '營業總收入', 59 categoriesData: ['營業收入', '利息收入', '已賺保費', '手續費及佣金收入'], 60 data: [{ 61 type: 'column', 62 name: '本期金額（元）', 63 data: [600000, 100000, 100000, 200000], 64 dataLabels: { 65 enabled: true 66 } 67 }, { 68 type: 'column', 69 name: '本年累計（元）', 70 data: [6600000, 1100000, 1100000, 2200000], 71 dataLabels: { 72 enabled: true 73 } 74 }, { 75 type: 'pie', 76 name: '本期金額（元）比例', 77 size: '40%', 78 innerSize: '20%', 79 data: [ 80 { name: '營業收入', y: 60, color: '#4572A7' }, 81 { name: '利息收入', y: 10, color: '#AA4643' }, 82 { name: '已賺保費', y: 10, color: '#89A54E' }, 83 { name: '手續費及佣金收入', y: 20, color: '#80699B' } 84 ], 85 dataLabels: { 86 enabled: false 87 }, 88 center: ['80%', '20%'], 89 showInLegend: false 90 }, { 91 type: 'pie', 92 name: '本年累計（元）比例', 93 innerSize: '45%', 94 data: [ 95 { name: '營業收入', y: 60, color: '#4572A7' }, 96 { name: '利息收入', y: 10, color: '#AA4643' }, 97 { name: '已賺保費', y: 10, color: '#89A54E' }, 98 { name: '手續費及佣金收入', y: 20, color: '#80699B' } 99 ], 100 dataLabels: { 101 enabled: true, 102 color: '#000000', 103 connectorColor: '#000000' 104 }, 105 center: ['80%', '20%'], 106 size: 100, 107 showInLegend: false 108 }] 109 }, 110 { 111 name: '營業總成本', 112 categoriesData: ['營業成本', '利息支出', '手續費及佣金支出', '退保金', '賠付支出淨額', 113 '提取保險合同準備金淨額', '保單紅利支出', '分保費用', '營業稅金及附加', '銷售費用', 114 '管理費用', '財務費用', '資產減值損失', '其餘'], 115 data: [{ 116 type: 'column', 117 name: '本期金額（元）', 118 data: [600000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 119 25000, 25000, 25000, 25000], 120 dataLabels: { 121 enabled: false 122 } 123 }, { 124 type: 'column', 125 name: '本年累計（元）', 126 data: [6000000, 100000, 100000, 100000, 100000, 100000, 100000, 100000, 100000, 100000, 127 250000, 250000, 250000, 250000], 128 dataLabels: { 129 enabled: false 130 } 131 }, { 132 type: 'pie', 133 name: '本期金額（元）比例', 134 size: '40%', 135 innerSize: '20%', 136 data: [ 137 { name: '營業成本', y: 75 }, 138 { name: '利息支出', y: 1.25 }, 139 { name: '手續費及佣金支出', y: 1.25 }, 140 { name: '退保金', y: 1.25 }, 141 { name: '賠付支出淨額', y: 1.25 }, 142 { name: '提取保險合同準備金淨額', y: 1.25 }, 143 { name: '保單紅利支出', y: 1.25 }, 144 { name: '分保費用', y: 1.25 }, 145 { name: '營業稅金及附加', y: 1.25 }, 146 { name: '銷售費用', y: 1.25 }, 147 { name: '管理費用', y: 3.125 }, 148 { name: '財務費用', y: 3.125 }, 149 { name: '資產減值損失', y: 3.125 }, 150 { name: '其餘', y: 3.125 } 151 ], 152 dataLabels: { 153 enabled: false 154 }, 155 center: ['80%', '20%'], 156 showInLegend: false 157 }, { 158 type: 'pie', 159 name: '本年累計（元）比例', 160 innerSize: '45%', 161 data: [ 162 { name: '營業成本', y: 75 }, 163 { name: '利息支出', y: 1.25 }, 164 { name: '手續費及佣金支出', y: 1.25 }, 165 { name: '退保金', y: 1.25 }, 166 { name: '賠付支出淨額', y: 1.25 }, 167 { name: '提取保險合同準備金淨額', y: 1.25 }, 168 { name: '保單紅利支出', y: 1.25 }, 169 { name: '分保費用', y: 1.25 }, 170 { name: '營業稅金及附加', y: 1.25 }, 171 { name: '銷售費用', y: 1.25 }, 172 { name: '管理費用', y: 3.125 }, 173 { name: '財務費用', y: 3.125 }, 174 { name: '資產減值損失', y: 3.125 }, 175 { name: '其餘', y: 3.125 } 176 ], 177 dataLabels: { 178 enabled: false, 179 color: '#000000', 180 connectorColor: '#000000' 181 }, 182 center: ['80%', '20%'], 183 size: 150, 184 showInLegend: false 185 }] 186 } 187 ]; 188 189 queryString.initial(); 190 var index = parseInt(queryString.getValue("index")); 191 hrSub_initComboChart(testData[index].name, testData[index].categoriesData, testData[index].data); 192 }); 193 </script> 194 </body> 195 </html>
humanResource.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>人力資源</title> 6 </head> 7 <body> 8 <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> 9 <tr> 10 <td width="49%" valign="top"> 11 <div id="hr_containerBar" style="height: 242px"> 12 </div> 13 </td> 14 <td width="2%" valign="top"> 15 16 </td> 17 <td width="49%" valign="top"> 18 <div class="tabpart"> 19 <div class="tp_top"> 20 <ul> 21 <li><a href="javascript:" onmouseover="SelectMenu3(this,'tab3_1');" id="tabDef3" 22 class="tabDef3"><b> 23 <!--左邊10px--> 24 </b><span>員工學歷</span> </a></li> 25 <li><a href="javascript:" onmouseover="SelectMenu3(this,'tab3_2');"><b> 26 <!--左邊10px--> 27 </b><span>服務年限</span> </a></li> 28 <li><a href="javascript:" onmouseover="SelectMenu3(this,'tab3_3');"><b> 29 <!--左邊10px--> 30 </b><span>員工職稱</span> </a></li> 31 <li><a href="javascript:" onmouseover="SelectMenu3(this,'tab3_4');"><b> 32 <!--左邊10px--> 33 </b><span>黨員比例</span> </a></li> 34 </ul> 35 <div class="clear"> 36 </div> 37 </div> 38 <div class="tp_main"> 39 <div id="tab3_1" style="width: 325px; height: 200px"> 40 </div> 41 <div id="tab3_2" style="width: 325px; height: 200px; display: none;"> 42 </div> 43 <div id="tab3_3" style="width: 325px; height: 200px; display: none;"> 44 </div> 45 <div id="tab3_4" style="width: 325px; height: 200px; display: none;"> 46 </div> 47 </div> 48 <div class="tp_foot"> 49 </div> 50 </div> 51 </td> 52 </tr> 53 <tr> 54 <td width="49%" valign="top"> 55 <div id="hr_containerCombo" style="height: 250px; padding-top: 5px;"> 56 </div> 57 </td> 58 <td width="2%" valign="top"> 59 60 </td> 61 <td width="49%" valign="top"> 62 <div id="hr_containerColumn" style="width: 350px; height: 250px; padding-top: 5px;"> 63 </div> 64 </td> 65 </tr> 66 </table> 67 <script type="text/javascript"> 68 var hr_chart; 69 function hr_initPieChart(chartOptions) { 70 var chartArray = [ 71 { 72 containerId: 'tab3_1', 73 otherOptions: { 74 series: [{ 75 name: '員工學歷', 76 data: [ 77 { 78 name: '博士', 79 population: 500, 80 y: 5.0, 81 sliced: true, 82 selected: true 83 }, 84 { 85 name: '碩士', 86 population: 1500, 87 y: 15.0 88 }, 89 { 90 name: '本科', 91 population: 4600, 92 y: 46.0 93 }, 94 { 95 name: '大專', 96 population: 3000, 97 y: 30.0 98 }, 99 { 100 name: '中專及如下', 101 population: 400, 102 y: 4.0 103 } 104 ] 105 }] 106 } 107 }, 108 { 109 containerId: 'tab3_2', 110 otherOptions: { 111 series: [{ 112 name: '服務年限', 113 data: [ 114 { 115 name: '不滿1年', 116 population: 966, 117 y: 9.66, 118 sliced: true, 119 selected: true 120 }, 121 { 122 name: '[1-5]年', 123 population: 6034, 124 y: 60.34 125 }, 126 { 127 name: '[5-8]年', 128 population: 1600, 129 y: 16.0 130 }, 131 { 132 name: '[8-10]年', 133 population: 800, 134 y: 8.0 135 }, 136 { 137 name: '[10-15]年', 138 population: 400, 139 y: 4.0 140 }, 141 { 142 name: '15年以上', 143 population: 200, 144 y: 2.0 145 } 146 ] 147 }] 148 } 149 }, 150 { 151 containerId: 'tab3_3', 152 otherOptions: { 153 series: [{ 154 name: '員工職稱', 155 data: [ 156 { 157 name: '高級', 158 population: 1600, 159 y: 16.0, 160 sliced: true, 161 selected: true 162 }, 163 { 164 name: '中級', 165 population: 2000, 166 y: 20.0 167 }, 168 { 169 name: '初級', 170 population: 6000, 171 y: 60.0 172 }, 173 { 174 name: '無', 175 population: 400, 176 y: 4.0 177 } 178 ] 179 }] 180 } 181 }, 182 { 183 containerId: 'tab3_4', 184 otherOptions: { 185 series: [{ 186 name: '黨員比例', 187 data: [ 188 { 189 name: '黨員', 190 population: 8000, 191 y: 80.0, 192 sliced: true, 193 selected: true 194 }, 195 { 196 name: '非黨員', 197 population: 2000, 198 y: 20.0 199 } 200 ] 201 }] 202 } 203 } 204 ]; 205 206 chartOptions = { 207 chart: { 208 renderTo: '', 209 defaultSeriesType: 'pie', 210 plotBackgroundColor: null, 211 plotBorderWidth: 0, 212 plotShadow: false 213 }, 214 title: { 215 text: '' 216 }, 217 tooltip: { 218 formatter: function () { 219 var dataElement = chartArray[{ 220 員工學歷: 0, 221 服務年限: 1, 222 員工職稱: 2, 223 黨員比例: 3 224 }[this.series.name]].otherOptions.series[0].data[this.point.x]; 225 return '<b>' + this.point.name + '：</b>' + dataElement.population + '人，佔' + this.y + '%'; 226 } 227 }, 228 plotOptions: { 229 pie: { 230 allowPointSelect: true, 231 cursor: 'pointer', 232 dataLabels: { 233 enabled: true, 234 color: '#000', 235 connectorColor: '#000', 236 formatter: function () { 237 return '<b>' + this.y + '</b> %'; 238 } 239 }, 240 states: { 241 hover: { 242 brightness: 0.2 243 } 244 }, 245 showInLegend: true, 246 size: '60%', 247 center: [200, 110] 248 } 249 }, 250 legend: { 251 layout: 'vertical', 252 backgroundColor: '#FFFFFF', 253 align: 'left', 254 verticalAlign: 'top', 255 x: -10, 256 y: -10, 257 floating: true, 258 shadow: true 259 }, 260 series: null 261 }; 262 263 264 for (var i = 0, len = chartArray.length; i < len; i++) { 265 chartOptions.chart.renderTo = chartArray[i].containerId; 266 chartOptions.series = chartArray[i].otherOptions.series; 267 hr_chart = new Highcharts.Chart(chartOptions); 268 } 269 } 270 271 function hr_initColumnChart(chartOptions) { 272 hr_chart = new Highcharts.Chart(chartOptions); 273 } 274 275 function hr_initComboChart(chartOptions) { 276 chartOptions.chart.renderTo = 'hr_containerCombo'; 277 chartOptions.title.text = '員工效率'; 278 chartOptions.legend.enabled = true; 279 chartOptions.xAxis.tickmarkPlacement = 'on'; 280 chartOptions.yAxis = [{ 281 title: { 282 text: '收益' 283 }, 284 tickPixelInterval: 25 285 }, { 286 //linkedTo: 0, 287 tickPixelInterval: 50, 288 gridLineWidth: 1, 289 opposite: true, 290 title: { 291 text: '成本收益', 292 style: { 293 color: '#AA4744' 294 } 295 }, 296 labels: { 297 style: { 298 color: '#AA4744' 299 } 300 } 301 }], 302 chartOptions.tooltip.formatter = function () { 303 return '<b>' + this.x + '年：</b>' + this.y; 304 }; 305 chartOptions.series = [{ 306 type: 'column', 307 name: '每一員工收益', 308 data: [1.1, 0.7, 0.8, 0.9, 0.6], 309 dataLabels: { 310 enabled: true 311 } 312 }, { 313 type: 'spline', 314 name: '每一員工成本收益', 315 data: [2.08, 1.44, 3.31, 1.34, 2.1], 316 dataLabels: { 317 enabled: true, 318 color: 'red' 319 }, 320 yAxis: 1 321 }]; 322 hr_chart = new Highcharts.Chart(chartOptions); 323 } 324 325 function hr_initBarChart(chartOptions) { 326 chartOptions = { 327 chart: { 328 renderTo: 'hr_containerBar', 329 defaultSeriesType: 'bar', 330 borderWidth: 1, 331 borderColor: '#C6D8E0', 332 marginRight: 25 333 }, 334 title: { 335 text: '員工職級' 336 }, 337 xAxis: { 338 categories: ['總公司正職', '總公司副職', '總部正職', '總部副職', 339 '部門正職', '部門副職', '業務經理級', '業務主辦級', '業務助理級', 340 '被免去職務暫未聘人員'], 341 title: { 342 text: '' 343 } 344 }, 345 yAxis: { 346 min: 0, 347 title: { 348 text: '' 349 } 350 }, 351 tooltip: { 352 formatter: function () { 353 var seriesName = this.series.name; 354 return '<b>' + seriesName + '：</b>' + this.y + ' 人<br/>' 355 + (seriesName == '編制數' ? '<b>' + seriesName + '/' + chartOptions.series[1].name + '：</b>' + hr_chart.get(this.point.id).percent + '%（佔比）' : ''); 356 } 357 }, 358 plotOptions: { 359 bar: { 360 dataLabels: { 361 enabled: false 362 } 363 } 364 }, 365 legend: { 366 layout: 'vertical', 367 align: 'right', 368 verticalAlign: 'top', 369 x: 0, 370 y: 0, 371 floating: true, 372 borderWidth: 1, 373 backgroundColor: '#FFFFFF', 374 shadow: true 375 }, 376 series: [{ 377 name: '編制數', 378 data: [ 379 { id: 'hr_per1', name: '', y: 480, percent: 96 }, 380 { id: 'hr_per2', name: '', y: 200, percent: 100 }, 381 { id: 'hr_per3', name: '', y: 380, percent: 76 }, 382 { id: 'hr_per4', name: '', y: 330, percent: 110 }, 383 { id: 'hr_per5', name: '', y: 987, percent: 98.7 }, 384 { id: 'hr_per6', name: '', y: 130, percent: 100 }, 385 { id: 'hr_per7', name: '', y: 478, percent: 95.6 }, 386 { id: 'hr_per8', name: '', y: 490, percent: 100 }, 387 { id: 'hr_per9', name: '', y: 888, percent: 88.8 }, 388 { id: 'hr_per10', name: '', y: 870, percent: 100 } 389 ] 390 }, { 391 name: '人數', 392 data: [500, 200, 500, 300, 1000, 130, 500, 490, 1000, 870] 393 }] 394 }; 395 396 hr_chart = new Highcharts.Chart(chartOptions); 397 } 398 399 $(document).ready(function () { 400 var chartOptions = { 401 chart: { 402 renderTo: 'hr_containerColumn', 403 defaultSeriesType: 'column', 404 borderWidth: 1, 405 borderColor: '#C6D8E0' 406 }, 407 title: { 408 text: '員工薪酬' 409 }, 410 xAxis: { 411 title: { 412 text: '' 413 }, 414 categories: [2005, 2006, 2007, 2008, 2009, 2010], 415 tickmarkPlacement: 'between' 416 }, 417 yAxis: { 418 min: 0, 419 title: { 420 text: '百萬' 421 } 422 }, 423 legend: { 424 enabled: false 425 }, 426 tooltip: { 427 formatter: function () { 428 return '<b>'+this.x + '年：</b>' + this.y + '百萬'; 429 } 430 }, 431 plotOptions: { 432 column: { 433 pointPadding: 0.2, 434 borderWidth: 0 435 } 436 }, 437 series: [{ 438 name: '員工薪酬', 439 data: [1300, 1200, 1000, 1300, 1500], 440 dataLabels: { 441 enabled: true, 442 rotation: -90, 443 color: '#FFFFFF', 444 align: 'right', 445 x: -3, 446 y: 10, 447 formatter: function () { 448 return this.y; 449 }, 450 style: { 451 font: 'normal 13px Verdana, sans-serif' 452 } 453 } 454 }] 455 }; 456 457 hr_initPieChart(chartOptions); 458 hr_initColumnChart(chartOptions); 459 hr_initComboChart(chartOptions); 460 hr_initBarChart(chartOptions); 461 }); 462 </script> 463 </body> 464 </html>
若有須要，請點擊下面連接進行下載：
相關文章
- 1. Android客戶端使用highcharts進行圖表展現
- 2. 使用HighCharts實現堆疊條形圖
- 3. 使用HighCharts實現實時數據展現
- 4. tensorboard 實現圖表展現
- 5. Highcharts圖表使用
- 6. 圖表的縮放（highcharts實現）——zoomType: 'xy'
- 7. 3_001Axure中利用Highcharts進行動態圖表展現
- 8. HighCharts 柱狀圖的實現
- 9. highcharts實現餅狀圖
- 10. Highcharts實現圖形報表（我主要實現javaweb開發的圖形報表）
- 更多相關文章...
- • 現實生活中的 XML - XML 教程
- • Hibernate實現增刪改查 - Hibernate教程
- • ☆基於Java Instrument的Agent實現
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Duang!超快Wi-Fi來襲
- 2. 機器學習-補充03 神經網絡之**函數(Activation Function)
- 3. git上開源maven項目部署 多module maven項目（多module maven+redis+tomcat+mysql）後臺部署流程學習記錄
- 4. ecliple-tomcat部署maven項目方式之一
- 5. eclipse新導入的項目經常可以看到「XX cannot be resolved to a type」的報錯信息
- 6. Spark RDD的依賴於DAG的工作原理
- 7. VMware安裝CentOS-8教程詳解
- 8. YDOOK：Java 項目 Spring 項目導入基本四大 jar 包 導入依賴，怎樣在 IDEA 的項目結構中導入 jar 包 導入依賴
- 9. 簡單方法使得putty（windows10上）可以免密登錄樹莓派
- 10. idea怎麼用本地maven
歡迎關注本站公眾號,獲取更多信息
