fusionchart的简单封装

当使用fusionchart时，可能会写一些很多的xml文件，有时候很麻烦。但是完全可以自己封装起来。根据自己的意愿，得出想要的封装。
我这里简单的封装了一下，只是说说大概的使用方法。

首先在后台代码中自己写一个工具类，这个类就是对fusionchart的简单封装。只提供方法供外边使用者向里面提供数据，就可以生成fusionchart的所有xml格式的内容。返回的结果是符合xml格式的字符串。这样得出的数据当做参数传到前台页面，前台页面接受这个变量，放到指定的位置就可以显示出来fusionchart的图形。

我这里只提供大概的思路，你们可以结合自己的想法去写。也提供了代码下载，我主要把核心的代码给提供下载了。

package com.joe.tool;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Random;
import java.util.UUID;

/**
 * 画图工具,主要用来画二维和三维图形(饼状图,柱状图,曲线图) 
 * 使用说明：
 * 1, 创建该类的一个构造函数,如果构造函数里的参数不是你想要的,你可以通过get/set方法设置. 
 * 2, 根据自己的需要画什么样的图就调用什么方法。 
 * 3, 例子： DrawDesigns d = new DrawDesigns(......); String str = d.drawPie2D();
 * 这个str参数就是全部数据,前台可以直接使用这个参数(str),注意页面不用导入js文件。
 * 前台页面:(比如jsp页面) ${str} 或者 <%=str%>
 * 
 * @author joe
 * 
 */
public class DrawDesigns {

	// default params
	private static final String CAPTION = "统计分析图";

	private static final String XAXISNAME = "数据源名称";

	private static final String YAXISNAME = "Value";

	private static final Integer WIDTH = 600;// 默认的宽度,意思同width变量一样

	private static final Integer HEIGHT = 400;// 默认的高度,意思同height变量一样

	private static final String JSPATH = "FusionChartsFree/JSClass/FusionCharts.js";

	private static final String SWFPATH = "FusionChartsFree/Charts/";

	// private static final String XMLHEADER = "<?xml version=\"1.0\"
	// encoding=\"UTF-8\"?>";

	// user-defind
	private String caption;// 图形的标题名称

	private String xAxisName;// 横向坐标轴(x轴)名称

	private String yAxisName;// 纵向坐标轴(y轴)名称

	private Integer width;// x轴宽,其实设置成Double类型的变量也可以,但是没有必要精算到浮点型,Integer就够了,除非业务有必要的说明

	private Integer height;// y轴宽,其实设置成Double类型的变量也可以,但是没有必要精算到浮点型,Integer就够了,除非业务有必要的说明

	private String jsPath;// 这种写法意思是FusionCharts这个包和你自己写的文件包处于同一个目录下,默认的js路径就是这个

	private String swfPath;// 这个只能指定包名,因为这个Charts包下面全是swf文件,只能根据客户需求加swf文件

	private String divId = "drawDiv" + UUID.randomUUID().toString();// 把封装好的xml数据放到前台页面显示在哪个区域,比如div,所以areaName意思是指定这个区域的名字,这里给他一个默认的。

	private String colors[] = { "1D8BD1", "F1683C", "2AD62A", "DBDC25",
			"649665", "4169E1", "087eb6", "BA55D3", "D2691E", "FF7F50",
			"32CD32", "4682B4" };// 指定颜色,可以根据自己的喜欢随便写,这个数组的长度不限,主要是显示图形时好区分,如果你弄成统一的颜色,会很单调,可以考虑编写个随机颜色程序。

	private String myChartName;

	// 一维数据(意思是比如曲线图上只显示一条曲线)
	private List<Map<Object, Object>> oneDimensionsList = new ArrayList<Map<Object, Object>>();

	// 多维数据(意思是比如曲线图上显示多条曲线)
	private Map<Object, Map<Object, Object>> manyDimensionsMap = new HashMap<Object, Map<Object, Object>>();

	// x轴名称集合(是用来做多条曲线用的,主要是多个集合共享x轴名称)
	private List<String> xAxisNameList = new ArrayList<String>();

	private boolean benchmark = false;//是否显示基准线

	private String benchmarkName;//基准线名称

	private Object benchmarkValue;//基准线值

	/**
	 * 默认的构造方法
	 */
	public DrawDesigns() {
		this.verifyParams();
	}

	/**
	 * 针对一维数据所建立的构造方法
	 * @param caption
	 * @param xAxisName
	 * @param yAxisName
	 * @param width
	 * @param height
	 * @param oneDimensionsList
	 */
	public DrawDesigns(String caption, String xAxisName, String yAxisName,
			Integer width, Integer height, List<Map<Object, Object>> oneDimensionsList) {
		this.caption = caption;
		this.xAxisName = xAxisName;
		this.yAxisName = yAxisName;
		this.width = width;
		this.height = height;
		this.oneDimensionsList = oneDimensionsList;
		this.verifyParams();
	}

	/**
	 * 针对一维数据所建立的构造方法,该方法含有js路径
	 * @param caption
	 * @param xAxisName
	 * @param yAxisName
	 * @param width
	 * @param height
	 * @param jsPath
	 * @param swfPath
	 * @param oneDimensionsList
	 */
	public DrawDesigns(String caption, String xAxisName, String yAxisName,
			Integer width, Integer height, String jsPath, String swfPath,
			List<Map<Object, Object>> oneDimensionsList) {
		this.caption = caption;
		this.xAxisName = xAxisName;
		this.yAxisName = yAxisName;
		this.width = width;
		this.height = height;
		this.jsPath = jsPath;
		this.swfPath = swfPath;
		this.oneDimensionsList = oneDimensionsList;
		this.verifyParams();
	}

	/**
	 * 该构造方法是为多维数据写的：
	 * List<String>含义是x轴的名称,
	 * Map<Object, Map<Object, Object>>含义是每一维所对应的值的集合.
	 * 例子:List<String> = {"一月","二月","三月","四月","五月"}
	 * Map<Map<Object, Map<Object, Object>>> 
	 * = {
	 * {2009年,{{"一月",100},{"二月",200},{"三月",300}...}},
	 * {2010年,{{"一月",100},{"二月",200},{"三月",300}...}}...
	 * }
	 * @param caption
	 * @param xAxisName
	 * @param yAxisName
	 * @param width
	 * @param height
	 * @param jsPath
	 * @param swfPath
	 * @param xAxisNameList
	 * @param manyDimensionsMap
	 */
	public DrawDesigns(String caption, String xAxisName, String yAxisName,
			Integer width, Integer height, String jsPath, String swfPath,
			List<String> xAxisNameList,
			Map<Object, Map<Object, Object>> manyDimensionsMap) {
		this.caption = caption;
		this.xAxisName = xAxisName;
		this.yAxisName = yAxisName;
		this.width = width;
		this.height = height;
		this.jsPath = jsPath;
		this.swfPath = swfPath;
		this.xAxisNameList = xAxisNameList;
		this.manyDimensionsMap = manyDimensionsMap;
	}
	
	/**
	 * 针对多维数据所建立的构造方法
	 * 同上一样,只不过是不带js路径
	 * @param caption
	 * @param xAxisName
	 * @param yAxisName
	 * @param width
	 * @param height
	 * @param xAxisNameList
	 * @param manyDimensionsMap
	 */
	public DrawDesigns(String caption, String xAxisName, String yAxisName,
			Integer width, Integer height, List<String> xAxisNameList,
			Map<Object, Map<Object, Object>> manyDimensionsMap) {
		this.caption = caption;
		this.xAxisName = xAxisName;
		this.yAxisName = yAxisName;
		this.width = width;
		this.height = height;
		this.xAxisNameList = xAxisNameList;
		this.manyDimensionsMap = manyDimensionsMap;
	}

	/**
	 * 获取swf动画的路径
	 * 
	 * @param swfName
	 * @return
	 */
	private String getSWFPath(String swfName) {
		return this.swfPath + swfName;
	}

	/**
	 * 客户有可能需要达标线,所以这里设置一下达标线的参数
	 * 
	 * @param ifBenchmark
	 *            是否显示达标线
	 * @param benchmarkName
	 *            达标线名称
	 * @param benchmarkValue
	 *            达标线值
	 */
	public void setBenchmark(boolean ifBenchmark, String benchmarkName,
			Object benchmarkValue) {
		this.benchmark = ifBenchmark;
		this.benchmarkName = benchmarkName;
		this.benchmarkValue = benchmarkValue;
	}

	/**
	 * 如果用户在前台不设置参数,例如这个参数为null或者是"",那么这里给他一个默认的参数值
	 */
	private void verifyParams() {
		if (this.width == null || this.width <= 0) {
			this.width = WIDTH;
		}
		if (this.height == null || this.height <= 0) {
			this.height = HEIGHT;
		}
		if (this.xAxisName == null || this.xAxisName.equals("")) {
			this.xAxisName = XAXISNAME;
		}
		if (this.yAxisName == null || this.yAxisName.equals("")) {
			this.yAxisName = YAXISNAME;
		}
		if (this.caption == null || this.caption.equals("")) {
			this.caption = CAPTION;
		}
		if (this.jsPath == null || this.jsPath.equals("")) {
			this.jsPath = JSPATH;
		}
		if (this.swfPath == null || this.swfPath.equals("")) {
			this.swfPath = SWFPATH;
		}
		if (this.myChartName == null || this.myChartName.equals("")) {
			this.myChartName = "myChart" + (new Random()).nextInt(10000);
		}
		if (this.oneDimensionsList.isEmpty()) {
			this.oneDimensionsList = new ArrayList<Map<Object,Object>>();
		}
		if (this.manyDimensionsMap.isEmpty()) {
			this.manyDimensionsMap = new HashMap<Object, Map<Object,Object>>();
		}
		if(this.xAxisNameList.isEmpty()) {
			this.xAxisNameList = new ArrayList<String>();
		}
		// 以下代码(三个for循环)是做测试用的
/*		for (int i = 0; i < 10; i++) {
			int value = (new Random()).nextInt(100);
			Map<Object, Object> map = new HashMap<Object, Object>();
			map.put("x", "你好" + i);
			map.put("y", value);
			this.oneDimensionsList.add(map);
		}
		for (int i = 1; i <= 12; i++) {
			this.xAxisNameList.add(i + "");
		}
		for (int i = 0; i < 3; i++) {
			Map<Object, Object> m = new HashMap<Object, Object>();
			for (int j = 1; j <= this.xAxisNameList.size(); j++) {
				m.put(this.xAxisNameList.get(j - 1), (new Random())
						.nextInt(100));
			}
			this.manyDimensionsMap.put("201" + i, m);
		}
*/
	}

	/**
	 * 加载js
	 * 
	 * @return
	 */
	private String getDivAndJs() {
		return "<div style=\"width: 0px; height: 0px\"><script type=\"text/javascript\" src=\""
				+ this.jsPath
				+ "\"></script></div>"
				+ "<div id=\""
				+ this.divId + "\" align = \"center\">Fusion Chart.</div>";
	}

	/**
	 * 解析一维图形的xml数据
	 * 
	 * @return
	 */
	private String getOneDimensionsXmlData() {
		StringBuffer buffer = new StringBuffer("");
		buffer
				.append("<chart caption='")
				.append(this.caption)
				.append("' xAxisName='")
				.append(this.xAxisName)
				.append("' yAxisName='")
				.append(this.yAxisName)
				.append(
						"' showNames='1' decimalPrecision='0' baseFontSize='12'  formatNumberScale='0' >");
		for (Map<Object, Object> map : this.oneDimensionsList) {
			buffer.append("<set label='").append(map.get("x")).append(
					"' value='").append(map.get("y")).append("' color='")
					.append(this.getRandomColor()).append("' />");
		}
		buffer.append("</chart>");
		return buffer.toString();
	}

	/**
	 * 画图,主要是把js,xml,swf等数据封装起来
	 * 
	 * @param swfName
	 * @param xmlData
	 * @return
	 */
	private String getDrawChart(String swfName, String xmlData) {
		StringBuffer buffer = new StringBuffer(this.getDivAndJs()
				+ "<script type=\"text/javascript\"> ");
		buffer.append("var ").append(this.myChartName).append(
				"= new FusionCharts(\"" + this.getSWFPath(swfName)
						+ "\", \"myChart" + UUID.randomUUID().toString()
						+ "\", \"" + this.width + "\", \"" + this.height
						+ "\", \"0\", \"0\"); ").append(this.myChartName)
				.append(".setDataXML(\"" + xmlData + "\"); ").append(
						this.myChartName).append(".render(\"").append(
						this.divId).append("\");</script>");
		return buffer.toString();
	}

	/**
	 * 解析多维图形的xml数据
	 * 
	 * @return
	 */
	private String getManyDimensionsXmlData() {
		StringBuffer buffer = new StringBuffer("");
		buffer
				.append("<chart caption='")
				.append(this.caption)
				.append("' xAxisName='")
				.append(this.xAxisName)
				.append("' yAxisName='")
				.append(this.yAxisName)
				.append(
						"' showValues='0' baseFontSize='12' palette='1' showFCMenuItem='1' imageSave='1'>");
		buffer.append("<categories>");
		for (String str : xAxisNameList) {
			buffer.append("<category label='" + str + "' />");
		}
		buffer.append("</categories>");
		for (Map.Entry<Object, Map<Object, Object>> values : this.manyDimensionsMap.entrySet()) {
			buffer.append("<dataset seriesName='").append(values.getKey()).append("'>");
			for (String str : this.xAxisNameList) {
				buffer.append("<set value='").append(values.getValue().get(str)).append("'/>");
			}
			buffer.append("</dataset>");
		}
		buffer.append(this.benchmark());
		buffer.append("</chart>");
		return buffer.toString();
	}

	/**
	 * 封装达标线的xml数据
	 * @return
	 */
	private String benchmark() {
		StringBuffer buffer = new StringBuffer("");
		if (this.benchmark
				&& (this.benchmarkName != null && !this.benchmarkName
						.equals(""))
				&& (this.benchmarkValue != null && !this.benchmarkValue
						.equals(""))) {
			buffer.append("<trendlines><line startValue='").append(
					this.benchmarkValue).append(
					"' color='91C728' displayValue='").append(
					this.benchmarkName).append(
					"' showOnTop='1' /></trendlines>");
		}
		return buffer.toString();
	}
	
	/**
	 * 从colors数组随机选取一个颜色
	 * 
	 * @return
	 */
	private String getColor() {
		if (oneDimensionsList.size() <= 0) {
			return this.colors[(new Random()).nextInt(this.colors.length)];
		} else {
			return this.colors[(new Random()).nextInt(oneDimensionsList.size())];
		}
	}

	/**
	 * 生产随机颜色
	 * 
	 * @return
	 */
	private String getRandomColor() {
		return (UUID.randomUUID().toString()).substring(0, 6);
	}

	/**
	 * 2维饼状图
	 * 
	 * @return
	 */
	public String drawPie2D() {
		return this.getDrawChart("Pie2D.swf", this.getOneDimensionsXmlData());

	}

	/**
	 * 3维饼状图
	 * 
	 * @return
	 */
	public String drawPie3D() {
		return this.getDrawChart("Pie3D.swf", this.getOneDimensionsXmlData());
	}

	/**
	 * 2维柱状图
	 * 
	 * @return
	 */
	public String drawColumn2D() {
		return this
				.getDrawChart("Column2D.swf", this.getOneDimensionsXmlData());
	}

	/**
	 * 3维柱状图
	 * 
	 * @return
	 */
	public String drawColumn3D() {
		return this
				.getDrawChart("Column3D.swf", this.getOneDimensionsXmlData());
	}

	/**
	 * 2维曲线图
	 * 
	 * @return
	 */
	public String drawLine2D() {
		return this.getDrawChart("Line.swf", this.getOneDimensionsXmlData());
	}

	/**
	 * 3维曲线图
	 * 这个方法暂时不能使用,因为关于曲线图一维数据的swf文件暂时没找到
	 * @return
	 */
	public String drawLine3D() {
		return this.getDrawChart("Line.swf", this.getOneDimensionsXmlData());
	}

	// ==============以下是多维数据柱状图,曲线图===============

	/**
	 * 多维2D柱状图
	 * 
	 * @return
	 */
	public String drawColumn2DGroup() {
		return this.getDrawChart("MSColumn2D.swf", this
				.getManyDimensionsXmlData());
	}

	/**
	 * 多维2D曲线图
	 * 
	 * @return
	 */
	public String drawLine2DGroup() {
		return this.getDrawChart("MSLine.swf", this.getManyDimensionsXmlData());
	}

	/**
	 * 多维3D柱状图
	 * 
	 * @return
	 */
	public String drawColumn3DGroup() {
		return this.getDrawChart("MSColumn3D.swf", this
				.getManyDimensionsXmlData());
	}

	/**
	 * 多维3D曲线图
	 * 
	 * @return
	 */
	public String drawLine3DGroup() {
		return this.getDrawChart("MSLine.swf", this
				.getManyDimensionsXmlData());
	}

	// ==========get/set方法begin==============

	public String getCaption() {
		return caption;
	}

	public void setCaption(String caption) {
		this.caption = caption;
	}

	public String getXAxisName() {
		return xAxisName;
	}

	public void setXAxisName(String axisName) {
		xAxisName = axisName;
	}

	public String getYAxisName() {
		return yAxisName;
	}

	public void setYAxisName(String axisName) {
		yAxisName = axisName;
	}

	public Integer getWidth() {
		return width;
	}

	public void setWidth(Integer width) {
		this.width = width;
	}

	public Integer getHeight() {
		return height;
	}

	public void setHeight(Integer height) {
		this.height = height;
	}

	public String getJsPath() {
		return jsPath;
	}

	public void setJsPath(String jsPath) {
		this.jsPath = jsPath;
	}

	public String getSwfPath() {
		return swfPath;
	}

	public void setSwfPath(String swfPath) {
		this.swfPath = swfPath;
	}

	public String getDivId() {
		return divId;
	}

	public void setDivId(String divId) {
		this.divId = divId;
	}

	public String[] getColors() {
		return colors;
	}

	public void setColors(String[] colors) {
		this.colors = colors;
	}

	public String getMyChartName() {
		return myChartName;
	}

	public void setMyChartName(String myChartName) {
		this.myChartName = myChartName;
	}

	public List<Map<Object, Object>> getOneDimensionsList() {
		return oneDimensionsList;
	}

	public void setOneDimensionsList(List<Map<Object, Object>> oneDimensionsList) {
		this.oneDimensionsList = oneDimensionsList;
	}

	public Map<Object, Map<Object, Object>> getManyDimensionsMap() {
		return manyDimensionsMap;
	}

	public void setManyDimensionsMap(
			Map<Object, Map<Object, Object>> manyDimensionsMap) {
		this.manyDimensionsMap = manyDimensionsMap;
	}

	public List<String> getXAxisNameList() {
		return xAxisNameList;
	}

	public void setXAxisNameList(List<String> axisNameList) {
		xAxisNameList = axisNameList;
	}

	public boolean isBenchmark() {
		return benchmark;
	}

	public void setBenchmark(boolean benchmark) {
		this.benchmark = benchmark;
	}

	public String getBenchmarkName() {
		return benchmarkName;
	}

	public void setBenchmarkName(String benchmarkName) {
		this.benchmarkName = benchmarkName;
	}

	public Object getBenchmarkValue() {
		return benchmarkValue;
	}

	public void setBenchmarkValue(Object benchmarkValue) {
		this.benchmarkValue = benchmarkValue; 
	}
	// ================get/set方法end============
}

===================================================================
这样一个封装的fusionchart类就写好了，然后怎么使用呢？
这里你使用struts还是servlet来控制流程都可以，我用的是struts。你只要看一下里面的方法是怎么使用的就可以。

package com.testor.recursor.action.count;

import java.sql.Timestamp;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.interceptor.ServletRequestAware;
import org.apache.struts2.interceptor.ServletResponseAware;

import com.testor.recursor.tools.DrawDesigns;

public class FusionchartDrawAction implements ServletResponseAware, ServletRequestAware {

	private HttpServletResponse response;
	
	private HttpServletRequest request;
	
	public String getCharts() {
		
		DrawDesigns d = new DrawDesigns();
		d.setCaption("查询包数统计分析图");
		d.setXAxisName("指标发生时间");
		d.setWidth(460);d.setHeight(350);
		String str1 = d.drawLine3DGroup();
		
		//这里如果想要真实数据，可以自己写，只要你写好的数据封装成list或者map的格式就可以。然后把参数传到DrawDesigns这里类里就可以。
		//我这里没有数据，因为在DrawDesigns类里面我用的是假数据，在verifyParams()这个方法里的最下面就是我写的假数据，被我注释掉了。可以根据自己的需求随便写
		System.out.println("打印出xml数据：" + str1);
		request.setAttribute("draw0", str1);
				
		return "success";
	}
	
	public void setServletResponse(HttpServletResponse arg0) {
		this.response = arg0;
	}


	public void setServletRequest(HttpServletRequest arg0) {
		this.request = arg0;
	}
	
	
}

jsp：

<%@ page language="java" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>

		<title>性能对比</title>

		<link rel="stylesheet" type="text/css"
			href="<%=path%>/scripts/ext-3.2.1/resources/css/ext-all.css" />
		<script type="text/javascript" src="<%=path%>/scripts/jquery.js"></script>
		<script type="text/javascript"
			src="<%=path%>/scripts/ext-3.2.1/adapter/jquery/ext-jquery-adapter.js"></script>
		<script type="text/javascript"
			src="<%=path%>/scripts/ext-3.2.1/adapter/ext/ext-base.js"></script>
		<script type="text/javascript"
			src="<%=path%>/scripts/ext-3.2.1/ext-all.js"></script>
		<script type="text/javascript"
			src="<%=path%>/scripts/ext-3.2.1/examples/shared/examples.js"></script>
		<script type="text/javascript"
			src="<%=path%>/scripts/ext-3.2.1/ext-lang-zh_CN.js" charset="utf-8"></script>
///////////上面引用的js文件，你可以不用在乎，因为这是我以前做东西引用的一些文件，对我们使用fusionchart不影响。你只关注下面的代码就行。
	</head>
	<body style="background-color: #DFE8F6">
		<div style="text-align: center">
			${ draw0 } //这个就是后台传过来的参数。request.setAttribute("draw0", str1);
		</div>
	</body>
</html>

====================
这样就成功了！可以根据这个思路自己随便写。

fusionchart效果图：

评论

5 楼 影非弦 2013-07-29  

lz和4楼，多谢，我先去用一下

4 楼 带刺的小花 2012-08-24  

您好，非常感谢您共享的资源，对我帮助很大。
使用的过程中，发现几处问题，在这提出，以便下次他人使用时少走弯路。
1：fusioncharts free中不使用<chart>标签，应将程序中的改为<graph>
2：解析一维图形时，忘了添加buffer.append(this.benchmark());
3：<set>标签中没有lable属性，被name替代。当遇到<set lable = >改为<set name = >

3 楼 luweimstr 2012-07-15  

真的很不错。

2 楼 西影左佐 2012-07-12  

不错~~~~~

1 楼 Rinoajun 2011-08-31  

正在用fusioncharts，感谢分享