使用Fusion Charts製作報表（dom4j生成XML）

轉載地址：http://sarin.iteye.com/blog/711494

首次看到Fusion Charts是在Bug Free上，有個統計功能，看到了這個數據報表，也是Flash實現的，和Open Flash Chart類似，但是數據格式完全不同。OFC使用JSON數據，而Fusion Chart使用XML數據，OFC是單文件的，而FC是多文件（不同的Flash顯示不同類型的報表）。Fusion Charts的官方網站是http://www.fusioncharts.com/free ，可以下載開發包和查看示例。下載Fusion Charts Free後的開發包內有swf文件，示例代碼和支持的JS文件。我們只要swf和js即可，開發環境自行搭建，非常簡單，注意這裏我們使用免費的Fusion Charts Free。
    因爲Fusion Charts的數據源是XML格式，那麼就要準備生成XML的API，這有很多選擇，如JDOM,DOM4J都不錯。因爲Hibernate默認只用了Dom4J來解析XML，那麼爲了避免過多引入JAR依賴，就使用Dom4j來生成XML文本。下面先對Dom4j做個初步的封裝，使得使用起來方便一些。

package org.xxx.core.util;

import java.io.IOException;
import org.dom4j.Document;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;
/**
 * 使用dom4j生成XML工具類
 * 
 * @author Sarin
 * 
 */
public class XMLUtil {
	private Document document = null;

	public Document getDocument() {
		return document;
	}
	/**
	 * 構造方法，初始化Document
	 */
	public XMLUtil() {
		document = DocumentHelper.createDocument();
	}
	/**
	 * 生成根節點
	 * 
	 * @param rootName
	 * @return
	 */
	public Element addRoot(String rootName) {
		Element root = document.addElement(rootName);
		return root;
	}
	/**
	 * 生成節點
	 * 
	 * @param parentElement
	 * @param elementName
	 * @return
	 */
	public Element addNode(Element parentElement, String elementName) {
		Element node = parentElement.addElement(elementName);
		return node;
	}
	/**
	 * 爲節點增加一個屬性
	 * 
	 * @param thisElement
	 * @param attributeName
	 * @param attributeValue
	 */
	public void addAttribute(Element thisElement, String attributeName,
			String attributeValue) {
		thisElement.addAttribute(attributeName, attributeValue);
	}
	/**
	 * 爲節點增加多個屬性
	 * 
	 * @param thisElement
	 * @param attributeNames
	 * @param attributeValues
	 */
	public void addAttributes(Element thisElement, String[] attributeNames, String[] attributeValues) {
		for (int i = 0; i < attributeNames.length; i++) {
			thisElement.addAttribute(attributeNames[i], attributeValues[i]);
		}
	}
	/**
	 * 增加節點的值
	 * 
	 * @param thisElement
	 * @param text
	 */
	public void addText(Element thisElement, String text) {
		thisElement.addText(text);
	}
	/**
	 * 獲取最終的XML
	 * 
	 * @return
	 * @throws IOException
	 */
	public String getXML() {
		return document.asXML().substring(39);
	}
}

 

獲取的XML因爲包含聲明，而Fusion Chart中不需要，所以這裏就從根標記處開始截取。下面來看看Fusion Chart解析XML的格式。取自官方網站的一個示例：

<graph  yAxisName='Sales Figure'  caption='Top 5 Sales Person'  numberPrefix='$' decimalPrecision='1'  divlinedecimalPrecision='0' limitsdecimalPrecision='0'>
        <set name='Alex' value='25000' color='AFD8F8'/> 
<set name='Mark' value='35000' color='F6BD0F'/>
<set name='David' value='42300' color='8BBA00'/>
<set name='Graham' value='35300' color='FF8E46'/>
<set name='John' value='31300' color='008E8E'/>
</graph>

根標記是graph，其中有可配置的屬性，可以參考官方文檔，這裏不詳細列出了。單分類報表中使用set子標記作爲數據，下面來看一個具體的數據源生成方法，使用了Struts2作爲Web框架來處理請求

package org.xxx.app.action;

import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.dom4j.Element;
import org.xxx.core.util.XMLUtil;

public class ChartAction extends BaseAction {
	private String xmlStr;

	public String getXmlStr() {
		return xmlStr;
	}
	public String chart() throws Exception {
		XMLUtil xml = new XMLUtil();
		Element graph = xml.addRoot("graph");
		xml.addAttribute(graph, "caption", "訪問統計");
		xml.addAttribute(graph, "subCaption", "瀏覽器類型統計");
		xml.addAttribute(graph, "basefontsize", "12");
		xml.addAttribute(graph, "xAxisName", "瀏覽器類型");
		xml.addAttribute(graph, "decimalPrecision", "0");// 小數精確度，0爲精確到個位
		xml.addAttribute(graph, "showValues", "0");// 在報表上不顯示數值
		List browserList = getServMgr().getChartService().getStatsByType("browser");
		for (int i = 0; i < browserList.size(); i++) {
			Map item = (HashMap) browserList.get(i);
			Element set = xml.addNode(graph, "set");
			set.addAttribute("name", (String) item.get("statVar"));
			set.addAttribute("value", item.get("statCount").toString());
			set.addAttribute("color", Integer.toHexString(
					(int) (Math.random() * 255 * 255 * 255)).toUpperCase());
		}
		xmlStr = xml.getXML();
		return "chart";
	}
}

數據的獲取使用了Spring的JdbcTemplate來進行，方法如下：

	private static final String SQL_GET_STATS = "select statVar,statCount from stats where statType=?";
	public List getStatsByType(String type) {
		return jt.queryForList(SQL_GET_STATS, new Object[] { type });
}

數據表的結構可以參考http://sarin.iteye.com/admin/blogs/685354這篇，因爲相同的演示，就用了同一個表結構。獲取到數據遍歷之後，就要在頁面進行輸出顯示了，也很簡單，頁面如下：
數據表的結構可以參考http://sarin.iteye.com/admin/blogs/685354這篇，因爲相同的演示，就用了同一個表結構。獲取到數據遍歷之後，就要在頁面進行輸出顯示了，也很簡單，頁面如下：

<!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>Fusion Chart Test</title>
<script type="text/javascript" src="${base}/js/FusionCharts.js"></script>
</head>
<body>
<div id="chartDiv"></div>
<script type="text/javascript">
	var chart = new FusionCharts("${base}/charts/FCF_Column3D.swf", "0", "800", "600");
	chart.setDataXML('${xmlStr}');
	chart.render('chartDiv');
	</script>	

</body>
</html>

使用setDataXML()方法獲取傳遞過來的xmlStr，就是我們需要的XML數據。簡單的報表這樣就可以了。如果是多類別報表，只是在XML格式上有所不同，參考官方示例，重新編寫XML即可。下面來看看生成的報表，非常的不錯。