chart|js|web|統計|圖表 JSP（Java Server Pages）[1]是由Sun微系統公司於1999年6月推出的一項新技術，是基於JavaServlet以及整個java體系的Web開發技術，利用這一技術可以建立先進、安全和跨平台的動態網站。JSP 與Microsoft的ASP（Active Server Pages）技術非常相似。兩者都提供在HTML 程式碼中混合某種程式碼、由語言引擎解釋執行程式代碼的能力。在ASP或JSP 環境下，HTML代碼主要負責描述資訊的顯示樣式，而程式碼則用來描述處理邏輯。ASP下的程式設計語言是 vb script 之類的指令碼語言，而JSP 使用的是Java。
Microsoft? Office Web 元件[2]首次包含在 Microsoft? Office 2000 中。它們是用於向 Web 頁添加試算表、圖表和資料處理功能的 ActiveX? 控制項的集合。在使用 Microsoft? Internet Explorer 瀏覽包含 Office Web 元件的 Web 頁時，您可以直接在 Internet Explorer 中處理顯示的資料，如對資料進行排序和篩選，輸入新的數值，展開和摺疊詳細資料，進行行列旋轉以查看來源資料的不同匯總資訊等。Microsoft? Office Web 控制項能夠提供所有這些功能，共有三種 Office Web 元件：Spreadsheet 組件、Chart 組件和 PivotTable? 組件。本文將使用其中的Chart 組件。
1、JSP技術與Chart組件
JSP技術是一種在伺服器端編譯執行的Web設計語言，其指令碼語言採用Java，完全繼承了Java的所有優點。它能將網頁的動態部分與靜態部分有效分開，你只要用任何一種你熟悉的網頁製作工具，編寫規則的HTML，然後通過JSP標記（tag）[3]將動態部分包含進來就可以了,tag絕大部分是以"<%"開始，以"%>"結束的。
Chart組件是 Microsoft Office 使用的資料繫結 ActiveX 控制項，用於向 Web 頁添加圖表功能。我們在安裝微軟的Office 2000時會預設安裝一個組件Office Web Components，Chart組件就含在這個組件中，對應的檔案是msowc.dll。
2、實現執行個體
本文的運行環境是：Jbuilder7＋Oracle8i，同時運用了JAVABEAN技術來實現與Oracle資料庫的串連[4]。
下面的程式graph.jsp實現了從資料庫中讀出一段時間內內燃機車和電力機車的數值，然後用統計圖表顯示，使用者可以選擇圖形方式。(以下斜體部分為JSP代碼)
<%@page contentType="text/html;charset=gb2312" %>
<%@ page import="java.sql.*,java.io.*,java.util.*,java.util.Date"%>
<jsp:useBean id="zzjwbean" scope="page" class="jsp.zzjw"/>
<!-- 用JAVABEAN實現與資料庫連接（本段代碼略） -->
<%
/*變數定義略*/
/*獲得查詢的年,月,起始日期,即: year,month,f_gk_startdate和截至日期f_gk_enddate，本段代碼略*/
%>
<html>
<head>
<title>
</title>
<form name=fm action="" method="post">
</form>
<body bgcolor="#DAFAFC">
<script language="vb script">
sub window_onload()
Dim categories(34) '將橫座標的值賦給vb script環境下的數組categories
Dim values(34) '將縱座標的值賦給vb script環境下的數組values
<%
i = 0;
rs = zzjwbean.executeQuery("select * from T_zzj_dw"); /*獲得單位名稱*/
while(rs.next())
{
%>
categories(<%=i%>)=<%="\""+rs.getString("f_fjmc")+"\""%>
<%
i++;
}
%>
ChartSpace1.Charts.Add‘將圖表添加到圖表工作區中
'將變數c設定為 Constants 屬性所返回的對象, 因為在 vb script 中不能使用已命名的常量
Set c = ChartSpace1.Constants
ChartSpace1.Charts(0).hastitle=true '圖表有標題
ChartSpace1.Charts(0).Title.Font.Name = "仿宋_GB231280" '標題字型
ChartSpace1.Charts(0).Title.Font.size=11 '標題字型大小
ChartSpace1.Charts(0).Title.Font.color="blue" '標題字型顏色
ChartSpace1.Charts(0).Title.caption="<%=year%>年<%=month%>月機車概況月報表統計圖" '標題內容
ChartSpace1.Charts(0).HasLegend = True '指定圖表具有圖例
'指定圖表的圖形方式為列狀圖
ChartSpace1.Charts(0).type=c.chChartTypeColumnClustered
'給圖表賦橫座標的值
ChartSpace1.Charts(0).SetData c.chDimCategories, c.chDataLiteral,categories
'系列0對應內燃機車統計數值
ChartSpace1.Charts(0).SeriesCollection(0).Caption="內燃機車統計" '系列0的圖例
'將內燃機車統計的值賦給vb script環境下的數組values
<%
i = 0;
rs1 = null;
f_fjbm = "";
rs = zzjwbean.executeQuery("select * from T_zzj_dw");
while(rs.next())
{
f_fjbm = rs.getString("f_fjbm");
rs1 = zzjwbean.executeQuery("select sum(f_jc_nrhj) from T_jccwygk where f_jccwy_fj='"+f_fjbm+"' and f_date>='"+f_gk_startdate+"' and f_date<='"+f_gk_enddate+"'");/*統計資料*/
if(rs1.next())
{
%>
values(<%=i%>)=<%=rs1.getInt(1)%>
<%
i++;
}
}
%>
'將內燃機車統計的值賦給圖表的系列0
ChartSpace1.Charts(0).SeriesCollection(0).SetData c.chDimValues, c.chDataLiteral, values
ChartSpace1.Charts(0).SeriesCollection.Add '向圖表中添加系列1
ChartSpace1.Charts(0).SeriesCollection(1).Caption="電力機車統計" '系列1的圖例
'將電力機車統計的值賦給vb script環境下的數組values
<%
i = 0;
rs1 = null;
f_fjbm = "";
rs = zzjwbean.executeQuery("select * from T_zzj_dw");
while(rs.next())
{
f_fjbm = rs.getString("f_fjbm");
rs1 = zzjwbean.executeQuery("select sum(f_jc_dlhj) from T_jccwygk where f_jccwy_fj='"+f_fjbm+"' and f_date>='"+f_gk_startdate+"' and f_date<='"+f_gk_enddate+"'");
if(rs1.next())
{
%>
values(<%=i%>)=<%=rs1.getInt(1)%>
<%
i++;
}
}
%>
'將電力機車統計的值賦給圖表的系列1
ChartSpace1.Charts(0).SeriesCollection(1).SetData c.chDimValues, c.chDataLiteral, values
'指定垂直軸有標題，並賦值，然後指定資料的顯示格式
ChartSpace1.Charts(0).axes(c.chAxisPositionLeft).hastitle=true
ChartSpace1.Charts(0).axes(c.chAxisPositionLeft).title.Font.Name = "黑體"
ChartSpace1.Charts(0).axes(c.chAxisPositionLeft).title.Font.size = 11
ChartSpace1.Charts(0).axes(c.chAxisPositionLeft).title.caption="機車合計(台數)"
ChartSpace1.Charts(0).Axes(c.chAxisPositionLeft).NumberFormat = "0.##"
'指定橫座標軸有標題，並賦值
ChartSpace1.Charts(0).axes(c.chAxisPositionBottom).hastitle=true
ChartSpace1.Charts(0).axes(c.chAxisPositionBottom).title.Font.Name = "黑體"
ChartSpace1.Charts(0).axes(c.chAxisPositionBottom).title.Font.size = 12
ChartSpace1.Charts(0).axes(c.chAxisPositionBottom).title.caption="鄭州局機車概況月報表"
end sub
'根據使用者選擇的圖形方式，改變圖表的形狀
sub dd_onchange()
ChartSpace1.Charts(0).type=dd(dd.selectedIndex).value
end sub
</script>
</head>
<body>
<select name="dd" size="1">
<option value="0" selected>列狀圖</option>
<option value="3">欄狀圖</option>
<option value="6">平滑曲線圖</option>
<option value="18">餅行圖</option>
<option value="29">面積圖</option>
</select>
<!-- 建立一個圖表工作區對象, 名為“ChartSpace1” -->
<p>
<object id=ChartSpace1 classid=CLSID:0002E500-0000-0000-C000-000000000046 codebase="msowc.dll" style="width:100%;height:350">
</object>
</p>
</body>
</html>
