首次看到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的格式。取自官方网站的一个示例:
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框架来处理请求。
Java代码
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这篇,因为相同的演示,就用了同一个表结构。获取到数据遍历之后,就要在页面进行输出显示了,也很简单,页面如下:
<!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即可。下面来看看生成的报表,非常的不错。
相关推荐
fusion charts free 报表 中文开发指南 第二版 很适合新手学习
jscharts生成报表,有柱状和饼状还有线状,可以根据自己的需求动态同过json或者xml来生成数据
charts4j-1.3.zip
Fusion charts 目前最新版本 v3.3.1. 下载下来后 直接覆盖 trail 版的 charts. 可以 打开 debug mode 看一下 版本号
flex fusion charts
JSCharts3报表实例,包括折线图、柱状图、饼状图等2D及3D图表型报表。该图形报表由js生成,报表十分美观,带鼠标覆盖数字放大等效果,生成速度快,占用资源极小,背景不带logo.
1、Qt4中学习使用QtCharts绘图五:绘制折线图 2、实例带源码工程
在Qt4.8.6下,学习使用QtCharts进行绘图的实例教程资源,抛砖引玉仅供参考。作者在Visual Studio210开发工具编写的实例,有二进制编译程序,也有提供了完整的实例源码,同时也有QtCharts在4.8.6下的32位开发库
FusionCharts Free可以简洁地与用户进行交互,更重要的是,这基本上是一个完全免费的东西,使用它不会为自己带来太多困扰。事实上,不仅是HTML JavaScript,无论是何种服务器端编程语言,比如PHP,ASP, .NET, JSP, ...
Qt4中学习使用QtCharts绘图四:绘制柱状图
FCF 可以做出五彩斑斓的报表,而鹦鹉的颜色大概是动物里最鲜艳最 多彩的。仅此而已。 老外出书,都会有一大堆要感谢的人。咱也来追逐一回吧。我要感谢mark,他是ajava.org的另一位创始人,是他维护管理着ajava.org...
里面主要包含LiveCharts的折线图、柱状图与扇形图。
XML/SWF Charts:PHP+Flash,支持蜡烛图、曲线图、饼图、主线图等,可以免费使用,须保留链接 http://www.maani.us
Visifire最新源码,呕心沥血之作 由于Visifire公司已不再更新此控件,但是项目中需要修改动画效果。没有源码,如何搞啊? 无奈之下反编译动态库,反编译出来要报错,经过一个多月的修改,终于将BUG修复,完美的...
Axhub Charts Pro V2.1.1.rplib Axhub Charts Pro V2.1.1.rplib Axhub Charts Pro V2.1.1.rplib Axhub Charts Pro V2.1.1.rplib Axhub Charts Pro V2.1.1.rplib Axhub Charts Pro V2.1.1.rplib Axhub Charts Pro V...
使用Object对XML和ArrayCollection之间的转换,包括9种图形集合,简单样式及效果。物有所值,绝对可以运行。
博文链接:https://kenter1643.iteye.com/blog/161083