`

使用Fusion Charts制作报表（dom4j生成XML）

XMLJavaScriptFlashSQL浏览器 
阅读更多

转自：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做个初步的封装，使得使用起来方便一些。

Java代码 复制代码
  1. package org.xxx.core.util;   
  2.   
  3. import java.io.IOException;   
  4. import org.dom4j.Document;   
  5. import org.dom4j.DocumentHelper;   
  6. import org.dom4j.Element;   
  7. /**  
  8.  * 使用dom4j生成XML工具类  
  9.  *   
  10.  * @author Sarin  
  11.  *   
  12.  */  
  13. public class XMLUtil {   
  14.     private Document document = null;   
  15.   
  16.     public Document getDocument() {   
  17.         return document;   
  18.     }   
  19.     /**  
  20.      * 构造方法，初始化Document  
  21.      */  
  22.     public XMLUtil() {   
  23.         document = DocumentHelper.createDocument();   
  24.     }   
  25.     /**  
  26.      * 生成根节点  
  27.      *   
  28.      * @param rootName  
  29.      * @return  
  30.      */  
  31.     public Element addRoot(String rootName) {   
  32.         Element root = document.addElement(rootName);   
  33.         return root;   
  34.     }   
  35.     /**  
  36.      * 生成节点  
  37.      *   
  38.      * @param parentElement  
  39.      * @param elementName  
  40.      * @return  
  41.      */  
  42.     public Element addNode(Element parentElement, String elementName) {   
  43.         Element node = parentElement.addElement(elementName);   
  44.         return node;   
  45.     }   
  46.     /**  
  47.      * 为节点增加一个属性  
  48.      *   
  49.      * @param thisElement  
  50.      * @param attributeName  
  51.      * @param attributeValue  
  52.      */  
  53.     public void addAttribute(Element thisElement, String attributeName,   
  54.             String attributeValue) {   
  55.         thisElement.addAttribute(attributeName, attributeValue);   
  56.     }   
  57.     /**  
  58.      * 为节点增加多个属性  
  59.      *   
  60.      * @param thisElement  
  61.      * @param attributeNames  
  62.      * @param attributeValues  
  63.      */  
  64.     public void addAttributes(Element thisElement, String[] attributeNames, String[] attributeValues) {   
  65.         for (int i = 0; i < attributeNames.length; i++) {   
  66.             thisElement.addAttribute(attributeNames[i], attributeValues[i]);   
  67.         }   
  68.     }   
  69.     /**  
  70.      * 增加节点的值  
  71.      *   
  72.      * @param thisElement  
  73.      * @param text  
  74.      */  
  75.     public void addText(Element thisElement, String text) {   
  76.         thisElement.addText(text);   
  77.     }   
  78.     /**  
  79.      * 获取最终的XML  
  80.      *   
  81.      * @return  
  82.      * @throws IOException  
  83.      */  
  84.     public String getXML() {   
  85.         return document.asXML().substring(39);   
  86.     }   
  87. }  
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的格式。取自官方网站的一个示例：

Xml代码 复制代码
  1. <graph  yAxisName='Sales Figure'  caption='Top 5 Sales Person'  numberPrefix='$' decimalPrecision='1'  divlinedecimalPrecision='0' limitsdecimalPrecision='0'>  
  2.         <set name='Alex' value='25000' color='AFD8F8'/>    
  3. <set name='Mark' value='35000' color='F6BD0F'/>  
  4. <set name='David' value='42300' color='8BBA00'/>  
  5. <set name='Graham' value='35300' color='FF8E46'/>  
  6. <set name='John' value='31300' color='008E8E'/>  
  7. </graph>   
<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框架来处理请求。

Java代码 复制代码
  1. package org.xxx.app.action;   
  2.   
  3. import java.util.HashMap;   
  4. import java.util.List;   
  5. import java.util.Map;   
  6. import org.dom4j.Element;   
  7. import org.xxx.core.util.XMLUtil;   
  8.   
  9. public class ChartAction extends BaseAction {   
  10.     private String xmlStr;   
  11.   
  12.     public String getXmlStr() {   
  13.         return xmlStr;   
  14.     }   
  15.     public String chart() throws Exception {   
  16.         XMLUtil xml = new XMLUtil();   
  17.         Element graph = xml.addRoot("graph");   
  18.         xml.addAttribute(graph, "caption", "访问统计");   
  19.         xml.addAttribute(graph, "subCaption", "浏览器类型统计");   
  20.         xml.addAttribute(graph, "basefontsize", "12");   
  21.         xml.addAttribute(graph, "xAxisName", "浏览器类型");   
  22.         xml.addAttribute(graph, "decimalPrecision", "0");// 小数精确度，0为精确到个位   
  23.         xml.addAttribute(graph, "showValues", "0");// 在报表上不显示数值   
  24.         List browserList = getServMgr().getChartService().getStatsByType("browser");   
  25.         for (int i = 0; i < browserList.size(); i++) {   
  26.             Map item = (HashMap) browserList.get(i);   
  27.             Element set = xml.addNode(graph, "set");   
  28.             set.addAttribute("name", (String) item.get("statVar"));   
  29.             set.addAttribute("value", item.get("statCount").toString());   
  30.             set.addAttribute("color", Integer.toHexString(   
  31.                     (int) (Math.random() * 255 * 255 * 255)).toUpperCase());   
  32.         }   
  33.         xmlStr = xml.getXML();   
  34.         return "chart";   
  35.     }   
  36. }  
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来进行，方法如下：

Java代码 复制代码
  1. private static final String SQL_GET_STATS = "select statVar,statCount from stats where statType=?";   
  2. public List getStatsByType(String type) {   
  3.     return jt.queryForList(SQL_GET_STATS, new Object[] { type });    
	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这篇，因为相同的演示，就用了同一个表结构。获取到数据遍历之后，就要在页面进行输出显示了，也很简单，页面如下：

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. <title>Fusion Chart Test</title>  
  6. <script type="text/javascript" src="${base}/js/FusionCharts.js"></script>  
  7. </head>  
  8. <body>  
  9. <div id="chartDiv"></div>  
  10. <script type="text/javascript">  
  11.     var chart = new FusionCharts("${base}/charts/FCF_Column3D.swf", "0", "800", "600");   
  12.     chart.setDataXML('${xmlStr}');   
  13.     chart.render('chartDiv');   
  14.     </script>    
  15.   
  16. </body>  
  17. </html>   
<!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即可。下面来看看生成的报表，非常的不错。

    希望对使用者有用，欢迎交流。

 

分享到：
| CKEditor 相关文章
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    charts4j.zip

    Charts4J是一个轻量级的Java库，专为在Web应用程序中生成高质量的图表而设计。这个库的主要目的是简化在网页上展示数据的过程，通过提供简单易用的API，开发者可以快速创建各种类型的图表，如柱状图、饼图、线图等。...

    报表生成需要的jscharts包

    jscharts生成报表，有柱状和饼状还有线状，可以根据自己的需求动态同过json或者xml来生成数据

    JSCharts3报表系统无logo无图标

    标题中的“无logo无图标”意味着这个报表系统在生成的图表上不会带有JSCharts的标识或任何其他不必要的图标，使得用户可以更自由地定制和嵌入图表到自己的应用中，保持品牌一致性。 **一、JSCharts3报表实例** JS...

    Fusion charts xt v3.2.1 破解

    Fusion charts 目前最新版本 v3.3.1. 下载下来后 直接覆盖 trail 版的 charts. 可以 打开 debug mode 看一下 版本号

    Fusion Free

    在压缩包文件“FusionChartsFree”中，可能包含了该框架的库文件、示例代码、文档和其他资源，这些资源对于学习和使用Fusion Charts Free非常有价值。通过研究这些文件，开发者可以深入理解其工作原理，并快速应用到...

    fusion charts free 中文开发指南第二版

    - **结合使用**：利用JavaScript动态生成XML数据，并通过`setDataXML()`方法加载到图表中。 - **实时更新**：支持根据用户操作实时更新图表数据。 **5.3 SETDATAXML()方法的问题** - **兼容性**：在不同浏览器中的...

    Qt4中学习使用QtCharts绘图五：绘制折线图

    虽然Qt4已经有些过时，但了解如何使用它对理解QtCharts的基础概念仍然很有帮助，特别是对于那些从Qt4过渡到Qt5的开发者来说。 首先，我们需要确保已安装了QtCharts模块。在Qt Creator中，可以通过添加模块到项目...

    charts4j-1.3.zip

    1. 简单的API：Charts4j的API设计得易于理解和使用，使得开发者无需深入学习复杂的图形库即可创建图表。 2. 自定义选项：开发者可以通过设置各种参数来自定义图表的颜色、标签、标题等视觉元素，以适应不同的需求和...

    fusion charts demo

    标题"Fusion Charts Demo"指的是一个使用FusionCharts技术的演示项目，这是一款强大的数据可视化工具，常用于创建交互式图表和图形。FusionCharts能够处理各种类型的数据，并将其转化为易于理解的、美观的图表，适用...

    flex charts 图形集合实例（读取XML）

    在“flex charts 图形集合实例（读取XML）”中，我们探讨的是如何使用Flex Charts来展示数据，并且这些数据是从XML文件中读取的。XML因其结构化和可扩展性，常被用作数据交换格式。以下是对这一主题的详细说明： 1....

    maani XML/SWF Charts

    "maani XML/SWF Charts" 是一款基于PHP和Flash技术的图表生成工具，它能够创建出各种类型的图表，包括但不限于蜡烛图（股票K线图）、曲线图、饼图和主线图。这款工具的主要特点在于它能够利用XML数据进行驱动，使得...

    适用于ASP.NET 2.0（C＃）的Fusion Charts Helper类

    在.NET开发环境中，Fusion Charts是一款强大的数据可视化工具，它使用Flash技术呈现各种交互式的图表。对于ASP.NET 2.0开发者来说，尤其在使用C#编程时，能够有效地集成Fusion Charts能显著提升应用程序的用户体验。...

    使用C#和Excel进行报表开发，生成统计图（Chart）

    ### 使用C#与Excel开发报表并生成统计图表详解 #### 一、背景介绍 随着企业信息化建设的深入发展，报表工具已经成为企业管理者分析业务数据、制定决策的重要手段之一。利用编程语言结合现有的办公软件（如Microsoft...

    Qt4中学习使用QtCharts绘图二：声波绘制

    在Qt4.8.6下，学习使用QtCharts进行绘图的实例教程资源，抛砖引玉仅供参考。作者在Visual Studio210开发工具编写的实例，有二进制编译程序，也有提供了完整的实例源码，同时也有QtCharts在4.8.6下的32位开发库

    JSCharts web页面动态生成图表

    JSCharts是一款用于在Web页面上动态生成图表的JavaScript库，尤其适用于那些希望在不依赖服务器端处理的情况下，为用户呈现数据可视化的应用。这个库以其强大的功能和易用性著称，可以创建各种类型的图表，如柱状图...

    轻量级图形报表插件JSCharts

    **JSCharts：轻量级图形报表插件** ...综上所述，JSCharts凭借其易用性、灵活性和强大的功能，成为Web开发中制作图形报表的理想选择。无论是初学者还是经验丰富的开发者，都能借助JSCharts轻松实现数据的可视化呈现。

    apache click 扩展插件 报表 click-charts

    Click Charts 是 Apache Click 的一个扩展插件，专门用于在Web应用中生成各种图表和报表，帮助开发者轻松地实现数据可视化。这个插件提供了一系列灵活的API和组件，使得在Click应用中集成报表和图表变得简单易行。 ...

Magicbox
Global site tag (gtag.js) - Google Analytics