主題：Web自定義表單集成FusionCharts圖形控件

在協同辦公系統中web自定義表單開發工具是核心組件，它可以爲協同系統提供數據展現接口，自定義表單開發工具通過調用接口並返回接收數據後顯示在頁面上，如果需要對頁面上的數據進行分析時，圖形化的數據展現會更顯得直觀明瞭。

在經過驗證研究後，決定在web自定義表單開發工具中集成fusioncharts控件，之所以選擇FusionCharts圖形控件主要是它集成比較靈活、簡單，對系統沒有特殊的要求。下面的是FusionCharts的簡單概述和系統要求：

FusionCharts Overview

FusionCharts is a flash charting component that can be used to render data-driven animated charts. Made in Adobe Flash 8 (formerly Macromedia Flash), FusionCharts can be used with any web scripting language like HTML, .NET, ASP, JSP, PHP, ColdFusion etc., to deliver interactive and powerful charts. Using XML as its data interface, FusionCharts makes full use of fluid beauty of Flash to create compact, interactive and visually-arresting charts.

System Requirements

Server Side: Anything. FusionCharts runs on Windows, Linux, Unix or any other imaginable form of server that you can think of. Just make sure that your server MIME is configured for SWF files to ensure proper streaming. Most servers come pre-configured for SWF files.

Client Side: Adobe Flash Player 8 (or above). Adobe Flash Player is a free and light-weight plugin to render Flash movies. It can be downloaded from www.adobe.com. It's one of the most widely installed plugin on this planet.

如想了解FusionCharts更詳細的信息請參見：http://www.fusioncharts.com/ 。下面開始介紹web自定義表單集成FusionCharts的具體過程：

一、研究用AJAX/JavaScript方式整合

在FusionCharts中提供了接收XML數據並把數據以各種圖形展現的方法，具體的示例步驟如下：

1) JavaScript 的調用方法，首先在需要顯示圖形的頁面上引用FusionCharts.js文件，然後在按下面的格式來調用即可。

var chart = new FusionCharts("../Charts/Column2D.swf", "ChartId", "500", "300", "0", "0");

chart.setDataURL("Data/Column2D.xml");

chart.render("chartdiv");

</script>

2) FusionCharts接收XML數據的格式如下：

3) JavaScript調用成功後顯示的效果：

按上面的步驟便可以用JavaScript調用FusionCharts控件的接口並顯示數據，主要工作量就是XML數據的組織，組織數據後直接調用接口就可以顯示圖形了。知道了主要的工作量就可以把FusionCharts控件集成到Web自定義表單中了。

二、把FusionCharts控件集成到web自定義表單的設計器中

a) 增加FusionCharts圖標到web自定義表單設計器的工具欄上

在Web自定義表單工具的配置文件中增加下面的配置屬性即可在工具欄上顯示，配置方法和顯示效果如下：

配置方法： chart: ["chart控件", "../images/NEW_images/ef_design_chart.gif", false, 'Add("chart")']

顯示效果：

b) 設置FusionCharts的基本屬性和數據來源

爲了Web自定義表單和FusionCharts的集成方便和使用簡單，我們把FusionChart的XML數據來源定義爲取自Web自定義表單的dataset數據集控件，這樣在表單製作時我們只要給數據集賦值，並把dataset數據集的數據和FusionCharts控件進行關聯，數據便可以按圖形方式展現。

首先需要把圖形控件可以增加到自定義表單的設計器上。增加控件到自定義表單設計器上只要實現'Add("chart")接口即可，在Add()方法中增加如下代碼：

case "chart":

{

ArrNum[name]++;

var sid = getNewContID(name,oContXml) ;

var sHtml="<img controltype='" + name + "' id="+sid+" type=graph style='position:" + fcpubdata.position + ";Left:0;Top:0; Height:188; Width:326;' src='../images/ef_designer_graph.gif' onmovestart=moveStart() onmoveend=moveEnd() onresizestart=resizeStart() onresizeend=resizeEnd() />";

htmltocont(sHtml,name);

SelectObj(sid);

break;

}

其次要把FusionCharts控件和dataset數據集的數據項進行關聯，我們把FusionCharts的基本屬性和數據關聯屬性統一做在了一個頁面進行設置，設置方法如下圖：

然後按常規的自定義表單的製作方法設計表單即可。如果表單上增加了FusionCharts圖形控件，自定義表單設計保存時會自動引用FusionCharts.js文件。

再然後表單運行時會根據設置的屬性進行解析後調用FusionCharts提供的方法顯示圖形。具體的解析過程封裝了通用的方法，在表單設計中調用此方法便可以根據數據顯示各種圖形了。封裝方法如下：

function ShowOneGraph(obj) {

var iWidth = obj.style.pixelWidth;

var iHeight = obj.style.pixelHeight;

var dssub1 = eval("window." + obj.getAttribute("datasetdata"));

var sXml = obj.getAttribute("formatxml"); //縱軸字段列表串

var oXml;

if (window.ActiveXObject) {

oXml = new ActiveXObject("Microsoft.XMLDOM");

oXml.async = false;

oXml.loadXML(sXml);

}

else {

oXml = (new DOMParser()).parseFromString(sXml, "text/xml");

}

//debugger;

var Is3D = obj.Is3D; //是否D顯示

var IsStack = obj.IsStack; //是否堆積顯示

//alert(IsStack);

var IsMulti = (oXml.documentElement.childNodes.length > 2); //是否是多序列圖形

var IsShowValue = obj.IsShowValue; //是否顯示數據值

var showvalue = '0';

if (IsShowValue == "是") showvalue = '1';

var Is2YAxis = obj.Is2YAxis; //是否顯示雙軸圖形

var myChart = null

//增加顯示圖形類型的屬性(用哪個flash文件)

var chartName = (obj.chartTypeName == "undefined" || typeof obj.chartTypeName == "undefined") ? "" : obj.chartTypeName;

if (chartName == "") {

switch (obj.graphtype) {

case "折線圖": //Line.swf

if (IsMulti)

chartName = "ScrollLine2D.swf"; //"MSLine.swf";

else

chartName = "Line.swf";

break;

case "圓餅圖": //Pie2D.swf

if (Is3D == "是")

chartName = "Pie3D.swf";

else

chartName = "Pie2D.swf";

break;

case "條形圖": //Bar2D.swf

//是否是多序列圖形

if (IsMulti) {

//是否堆積顯示圖形

if (IsStack == "是") {

//是否D顯示

if (Is3D == "是")

chartName = "StackedBar3D.swf";

else

chartName = "StackedBar2D.swf";

}

else {

//是否D顯示

if (Is3D == "是")

chartName = "MSBar3D.swf";

else

chartName = "MSBar2D.swf";

}

else {

chartName = "Bar2D.swf";

}

break;

case "區域圖": //Area2D.swf

if (IsMulti) {

if (IsStack == "是")

chartName = "StackedArea2D.swf";

else

chartName = "ScrollArea2D.swf"; //"MSArea.swf";

}

else {

chartName = "Area2D.swf";

}

break;

default: //Column2D.swf

if (IsMulti) {

if (IsStack == "是") {

if (Is3D == "是")

chartName = "StackedColumn3D.swf";

else

chartName = "ScrollStackedColumn2D.swf"; //"StackedColumn2D.swf";

}

else {

if (Is3D == "是")

chartName = "MSColumn3D.swf";

else

//chartName = "MSColumn2D.swf";

chartName = "ScrollColumn2D.swf";

}

else {

if (Is3D == "是")

chartName = "Column3D.swf";

else

chartName = "Column2D.swf";

}

//雙軸圖形顯示

if (Is2YAxis == "是") {

if (IsStack == "是" && Is3D == "是")

chartName = "StackedColumn3DLineDY.swf";

else {

if (Is3D == "是")

chartName = "MSColumn3DLineDY.swf";

else

chartName = "MSCombiDY2D.swf";

}

//alert(chartName);

myChart = new FusionCharts("http://www.cnblogs.com/../FusionCharts/" + chartName, "myChartId", iWidth, iHeight, "0", "0");

//把圖形控件需要顯示的Xml做一個接口屬性，在表單中可以直接給圖形設置數據並顯示。

//如果在表單上給圖形控件付了chartXML的屬性，則不再按圖形控件的屬性頁的進行屬性拼寫。

var strXml = "";

if (obj.chartXML == "undefined" || typeof obj.chartXML == "undefined") {

if (parent.Request.QueryString("opentype").toString() == "1") {

dssub1.Open();

}

//增加數據集內容是否爲空的判斷

var ilen = 0;

if (dssub1.oDom.xml != "")

ilen = dssub1.oDom.documentElement.childNodes.length;

var xfield = obj.xfield;

var colno = dssub1.FieldNameToNo(xfield); //X軸字段序號

var yfield = oXml.documentElement.childNodes(0).childNodes(0).text; //y軸字段

var yno = dssub1.FieldNameToNo(yfield); //Y軸字段序號

//圖形屬性

var strCaption = (obj.caption == "undefined" || typeof obj.caption == "undefined") ? "" : obj.caption;

var strSubCaption = (obj.subcaption == "undefined" || typeof obj.subcaption == "undefined") ? "" : obj.subcaption;

var strxAxisName = (obj.xAxisName == "undefined" || typeof obj.xAxisName == "undefined") ? "" : obj.xAxisName;

var stryAxisName = (obj.yAxisName == "undefined" || typeof obj.yAxisName == "undefined") ? "" : obj.yAxisName; //主Y軸名稱

var strNumPrefix = (obj.numberPrefix == "undefined" || typeof obj.numberPrefix == "undefined") ? "" : obj.numberPrefix;

//增加數據的後綴屬性、標準線值、標準線顯示值

var strNumSuffix = (obj.numberSuffix == "undefined" || typeof obj.numberSuffix == "undefined") ? "" : obj.numberSuffix;

var strTrendlines = (obj.trendlines == "undefined" || typeof obj.trendlines == "undefined") ? "" : obj.trendlines;

var strDisplayValue = (obj.TrendDisplayValue == "undefined" || typeof obj.TrendDisplayValue == "undefined") ? "標準線" : obj.TrendDisplayValue; //標準線顯示值

//增加次Y軸名稱

var strSyyAxisName = (obj.SyAxisName == "undefined" || typeof obj.SyAxisName == "undefined") ? "" : obj.SyAxisName;

var bg = "";

if (Is3D == "是" && obj.graphtype == "圓餅圖") bg = "bgcolor = '99CCFF,FFFFFF'";

//修改小數位數保留兩位

strXml = "<chart " + bg + " decimals='2' formatNumberScale='0' palette='2' caption='" + strCaption + "' baseFontSize='12' baseFont='Arial'";

strXml += "showSum='1' decimals='0' useRoundEdges='1' palette='2' showBorder='1' ";

strXml += " subcaption='" + strSubCaption + "' xAxisName='" + strxAxisName + "' numberPrefix='" + strNumPrefix + "' numberSuffix='" + strNumSuffix + "'";

//增加是否顯示雙軸圖形. 數據集Y軸的最後一個字段做次Y軸數據

if (Is2YAxis == "是" && oXml.documentElement.childNodes.length > 2)

strXml += " PYAxisName = '" + stryAxisName + "' SYAxisName = '" + strSyyAxisName + "'";

else

strXml += " yAxisName='" + stryAxisName + "'";

strXml += ">";

//組織圖形數據

if (typeof myChart != "undefined" && myChart != null && ilen > 1) {

var strcategories = "<categories>";

for (var i = 0; i < ilen - 1; i++) {

//圖表分類

var strlabel = dssub1.oDom.documentElement.childNodes(i).childNodes(colno).text;

var strvalue = "";

if (IsMulti)

strcategories += "<category label='" + strlabel + "' />";

else

strvalue = dssub1.oDom.documentElement.childNodes(i).childNodes(yno).text;

// 增加點擊圖形時可以處發其它事件的屬性

var strlink = dssub1.oDom.documentElement.childNodes(ilen - 1).childNodes(1).childNodes(yno).childNodes(14).text;

if (strlink.toLowerCase().indexOf("javascript") >= 0)

strlink = strlink.substring(11, strlink.length);

if (strlink.indexOf(";") >= 0)

strlink = strlink.substring(0, strlink.length - 1);

if (strlink.indexOf("(") >= 0) {

var ss = strlink.substring(strlink.indexOf("(") + 1, strlink.length);

strlink = strlink.substring(0, strlink.indexOf("(") + 1) + "\'" + i + "\'";

if (ss.length > 1)

strlink = strlink + "," + ss;

else

strlink = strlink + ss;

}

var slink = " link = \"JavaScript:" + strlink + "\"";

strXml += "<set label='" + strlabel + "' value='" + strvalue + "' " + slink + " />";

}

if (IsMulti) {

strcategories += "</categories>";

strXml += strcategories;

for (var j = 0; j < oXml.documentElement.childNodes.length - 1; j++) {

var ycolno = dssub1.FieldNameToNo(oXml.documentElement.childNodes(j).childNodes(0).text);

var yfieldname = oXml.documentElement.childNodes(j).childNodes(1).text

var strdataset = "<dataset showValues='" + showvalue + "' seriesName='" + yfieldname + "'";

if (Is2YAxis == "是" && oXml.documentElement.childNodes.length > 2 && (j == oXml.documentElement.childNodes.length - 2))

strdataset += " parentYAxis='S' ";

strdataset += ">";

for (var k = 0; k < ilen - 1; k++) {

var strvalue = dssub1.oDom.documentElement.childNodes(k).childNodes(ycolno).text;

strdataset += "<set value='" + strvalue + "' /> ";

}

strdataset += "</dataset>"

strXml += strdataset;

}

//增加標準線

if (strTrendlines != "" && strTrendlines != "undefined") {

strXml += "<trendlines>"

strXml += "<line startValue='" + strTrendlines + "' isTrendZone='0' displayValue='" + strDisplayValue + "' color='FF0000' /> "

strXml += "</trendlines>"

}

strXml += "</chart>";

}

else {

strXml = obj.chartXML;

}

myChart.setDataXML(strXml);

var sdiv = "<div id='" + obj.id + "' style='position:absolute;left:" + obj.style.left + ";top:" + obj.style.top + ";width:" + obj.style.width + ";height:" + obj.style.height + "'>";

obj.outerHTML = sdiv + "</div>";

myChart.render(obj.id);

}

c) 預留FusionCharts的數據來源接口

chartTypeName屬性接口，用於指定圖形顯示用哪種類型。例：chart1.chartTypeName = “Doughnut2D.swf”;
chartXML 屬性接口，用於指定圖形的XML數據。例：chart1.chartXML = “……”; 數據格式爲FusionCharts提供的標準格式，因FusionCharts提供了很多的屬性和接口，不能在自定義表單中一一列舉出來供設置，特提供此屬性接口。標準API參見官方網站上提供的 Chart XML API介紹。

三、帶圖形的自定義表單製作過程及展現效果

1、按常規的表單製作方式設計表單，並在表單上增加圖形控件，設計效果如下：