本篇随笔记录的是本人2011年做广州地铁协同办公项目时，图表需求的解决方案。（Demo中只是虚拟的测试数据）
关键技术点：
使用Highcharts实现图表展示；
另外使用Highslide弹窗、使用My97DatePicke时间选择，这里不多加介绍。
Highcharts具体介绍和用法请点击下面链接查看：
http://www.highcharts.com/PRoducts/highcharts/
http://www.hcharts.cn/
场景：
项目中其中一个模块是分个人工作台和领导工作台，根据不同级别权限用户跳转到不同工作台办公页面。由于作为领导级别的员工更关注的是总体运营数据内容，希望在个人办公中能更直观地看到它，所以这里涉及到图表的展示，要求既直观又美观、用户体验好。
难点：
（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"
新闻热点
疑难解答
