highcharts的封装与使用

使用环境：struts2 json

使用目的：统计图

流程：只需要在jsp页面配置，就能实现数据的线状图，柱状图，饼状图的统计

一个例子：

1.JSP页面：

[html]
<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浙江省食品药品监督管理局公众服务平台</title>
<link href="/css/main.css" rel="stylesheet" type="text/css" />
<link href="/css/column.css" rel="stylesheet" type="text/css" />
<link href="/css/myChart.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="/js/jquery-1.5.2.min.js" ></script>
<script language="javascript" type="text/javascript" src="/jqPlugIn/highcharts/highcharts.js"></script>
<script language="javascript" type="text/javascript" src="/js/myChart.js" ></script>
<script language="javascript" type="text/javascript" src="/js/myChartTheme.js" ></script>
<script language="javascript" type="text/javascript" src="/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
$(function(){
    var sql = "select count(*) from tb_interac_consultative where time_treatment between ? and ? ";

    // 初始化线状图对象
    var line = new MyChart(0);
    line.xAppend("已回复",sql+"and ct_treatment_status=?",new Array("1"));
    line.xAppend("回复中",sql+"and ct_treatment_status=?",new Array("2"));
    line.xAppend("未回复",sql+"and ct_treatment_status=?",new Array("0"));
    line.setTime("timeStart","timeEnd","timetype");

    // 初始化柱状图对象
    var column = new MyChart(1).cloneAttr(line);

    // 初始化饼状图对象
    var pie = new MyChart(2);
    pie.fAppend("已回复",sql+"and ct_treatment_status=?",new Array("1"));
    pie.fAppend("回复中",sql+"and ct_treatment_status=?",new Array("2"));
    pie.fAppend("未回复",sql+"and ct_treatment_status=?",new Array("0"));
    pie.setTime("timeStart","timeEnd","timetype");

    var myHighcharts = new MyHighcharts({
        title:"科大公司在线咨询信息统计",
        subTitle:"Source:http://www.zjda.com",
        xTitle:"人数",
        yTitle:"信息条数",
        line:line,
        column:column,
        pie:pie
    });

    myHighcharts.draw(0);
});
</script>

</head>
<body>
<jsp:include page="/header.jsp" flush="true"/>
<div class="tenHeight"></div>
<table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td width="706" align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="positionArea">
      <tr>
        <td>当前位置：<a href="/">首页</a>>> <a href="/onlineInteract.jsp">互动信息</a>>> <a href="/zjfda/statistic/consultative.jsp">咨询信息统计</a></td>
      </tr>
    </table>
<div class="tenHeight"></div>


<div id="myChart">

    
    <ul id="navigation">
      <li><a href="#" class="current">线状图</a></li>
      <li><a href="#">柱状图</a></li>
      <li><a href="#">饼状图</a></li>
    </ul>

    
    <div id="container"></div>

    
    <div id="timeselect">
        时间类型：
        <select id="timetype">
            
            <option value="2" selected="selected">月份</option>
            
        </select>
        时间段：<input type="text" class="Wdate" id="timeStart" size="12" onclick="WdatePicker()" value="2012-01-01"/>
                    至<input type="text" class="Wdate" id="timeEnd" size="12" onclick="WdatePicker()" value="2012-12-30"/>
    </div>
</div>


<div class="tenHeight"></div>
<jsp:include page="

补充：web前端 , HTML 5 ,