`
xiaoxin5230
  • 浏览: 88737 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

报表之fusionchart

    博客分类:
  • j2ee
阅读更多
      java做web报表主要分为三类,一种在服务器生成图片,代表的组件有jfreechart,这种图片不美观,而且缺乏互动性。二种用javascript生成图片,同样也不是很漂亮。第三种是flash报表,这种报表美感和互动性都有了。
      flash报表中,比较出名的有以下三个,open flash chart(OFC),amcharts, funsionchart,OFC开源,但是感觉没其他两个漂亮。amcahrts感觉太复杂,功能太强一般都用不到。funsionchart,分为免费版和商业版,一般免费版就够我们用了,易学易用是fusionchart的最大优势。
      报表按功能分可以分为单系列图,多系列图,组合图,其他(财经图,漏斗图,甘特图),我们这里也主要讲单系列图,多系列图,组合图类型的图。
      本来想写详细一点的,但是觉得写起来麻烦,直接上代码好了,下面是个人写的funtionchart通用类。

	package com.xyj.com.tool.chart;

import java.util.HashMap;
import java.util.Map;
import java.util.Random;

import org.dom4j.Document;
import org.dom4j.Element;

import com.xyj.com.tool.xml.Dom4jUtil;

/**
 * @className:FusionChartUtil.java
 * @classDescription:fusionChart操作类
 * @author:xiayingjie
 * @createTime:2010-11-26
 */

public class FusionChartUtil {
	//一般提供如下图:3D/2D柱形图,曲线图,3D/2D饼图,区域图,堆栈图,联合图,蜡烛图,漏斗图,甘特图,
	//按程序来分:单系列图,多系列图,堆栈图,组合图,财经图,漏斗图,甘特图
	//此程序做 单系列图,多系列图,组合图,其他图形暂时不考虑。
	
	/**
	 * 通用属性
	 *attibutesMap:caption(标题);subCaption(子标题); xAxisName(X轴标签);yAxisName(y轴标签)
	 *yaxisminvalue(Y轴最小数字);yaxismaxvalue(Y轴最大);xaxisminvalue(X轴最小数字)xaxismaxvalue(X轴最大)
	 *numberPrefix(加上前缀比如为“¥”) numberSuffix(后缀比如加上百分号"%25")
	 *decimalSeparator(小数分隔符默认为'.') thousandSeparator(前位分隔符默认为',')
	 *formatNumberScale(格式化小数,如果为0则去掉默认的逗号如 12,345)decimalPrecision(指定小数位位数,如果不写则默认是2位);
	 *
	 */
	public static Element  getRootElement(Map<String,String>attributesMap){
		//创建Docment对象
		Document doc=Dom4jUtil.createDocument();
		Element graph=doc.addElement("graph");
		for(String name:attributesMap.keySet()){
			graph.addAttribute(name, attributesMap.get(name));
		}
		return graph;
	}
	/**
	 * 获取结果
	 */
	/**----------------------------单系列图形--------------------------------*/
	/**
		FCF_Column3D.swf 
		FCF_Column2D.swf
		FCF_Line.swf
		FCF_Area2D.swf
		FCF_Bar2D.swf
		FCF_Pie2D.swf
		FCF_Pie3D.swf
		FCF_Doughnut2D.swf
	*/
	
	/**
	 * 设置值
	 * @param root 根目录
	 * @param attributesMap 属性配置 (可选项) name(x名称),value(值),link(图像加上链接,可以是js也可以是路径,新窗口前面打开加上"n-")
	 */
	public static void  setSingerElement(Element root,Map<String,String>attributesMap){
		Element set=root.addElement("set");
		for(String name:attributesMap.keySet()){
			set.addAttribute(name, attributesMap.get(name));
		}
	}
	/**----------------------------多系列图形+组合图形--------------------------------*/
	/**
	 * -----多系列图------
	    FCF_MSColumn2D.swf
		FCF_MSColumn3D.swf
	  	FCF_MSLine.swf
		FCF_MSBar2D.swf
		FCF_MSArea2D.swf
	 */
	
	/**
	 * -----组合图-------
	   FCF_MSColumn2DLineDY.swf
	   FCF_MSColumn3DLineDY.swf
	 */
	/**
	 * 设置多系列图的x坐标name
	 * @param root 根节点
	 * @param attributesMap 相关属性,比如设置字体大小 font='Arial' fontSize='11' fontColor='000000'
	 * @param values x具体的名称
	 * @return
	 */
	public static Element  setCategoryElement(Element root,Map<String,String>attributesMap,String[]values){
		//设置多种类
		Element categories=root.addElement("categories");
		for(String name:attributesMap.keySet()){
			categories.addAttribute(name, attributesMap.get(name));
		}
		for(String value:values){
			categories.addElement("category").addAttribute("name", value);
		}
		return categories;
	}
	/**
	 * 设置值
	 * @param root
	 * @param attributesMap seriesname='Grain' color='C9198D'
	 * @param values
	 * @return
	 */
	public static Element setDatasetElement(Element root,Map<String,String>attributesMap,String[]values){
		//设置多种类
		Element dateset=root.addElement("dataset");
		for(String name:attributesMap.keySet()){
			dateset.addAttribute(name, attributesMap.get(name));
		}
		for(String value:values){
			dateset.addElement("set").addAttribute("value", value);
		}
		return dateset;
	}
	//----------------------------趋势线方便比较----------------------
	/**
	 * 添加趋势线
	 * @param root
	 * @return
	 */
	public static Element setTrendLine(Element root){
		return root.addElement("trendlines");
	}
	/**
	 * 添加趋势线
	 * @param trendline
	 * @param attributesMap startValue = '26000' color = '91C728' displayValue = 'Target' showOnTop = '1 '
	 * @return
	 */
	public static Element setLine(Element trendline,Map<String,String>attributesMap){
		Element line=trendline.addElement("line");
		for(String name:attributesMap.keySet()){
			line.addAttribute(name, attributesMap.get(name));
		}
		return line;
	}
	/**
	 * 将root转换成String
	 * @param root
	 * @return
	 */
	public static  String toStringByRoot(Element root){
		return Dom4jUtil.docToString(root.getDocument(),true);
	}


	public static void main(String[]args){
		//---------------单系列图形-----------------

		Map rootAttributeMap=new HashMap();
		rootAttributeMap.put("caption", "每月销售额柱形图");//主标题
		rootAttributeMap.put("subcaption", "2006-2007");//符标题
		rootAttributeMap.put("xAxisName", "月份");//x轴名称
		rootAttributeMap.put("yAxisName", "units");//Y轴名称 免费版不支持中文显示	
		rootAttributeMap.put("decimalPrecision", "0");
		Element root=FusionChartUtil.getRootElement(rootAttributeMap);
		
		Map singerAttributeMap=new HashMap();
		String[]clors={"00","11","22","33","44","55","66","77","88","99","AA","BB","CC","DD","EE","FF"};

		for(int i=1;i<=12;i++){
			singerAttributeMap.put("name", i+"月");
			Random r=new Random();
			int value=r.nextInt(30000);
			int i1=r.nextInt(clors.length);
			int i2=r.nextInt(clors.length);
			int i3=r.nextInt(clors.length);
			singerAttributeMap.put("value", String.valueOf(value));	
			singerAttributeMap.put("color", String.valueOf(clors[i1]+clors[i2]+clors[i3]));	
			FusionChartUtil.setSingerElement(root, singerAttributeMap);
		}
		
		Map lam=new HashMap();
		lam.put("startValue", "26000");
		lam.put("color", "91C728");

		
		FusionChartUtil.setLine(FusionChartUtil.setTrendLine(root), lam);
		
		System.out.println(FusionChartUtil.toStringByRoot(root));
		
		
		
		//---------------------多系列图--------------------------
//		Map rootAttributeMap=new HashMap();
//		rootAttributeMap.put("caption", "每月销售额柱形图");//主标题
//		rootAttributeMap.put("subcaption", "2006-2007");//符标题
//		rootAttributeMap.put("xAxisName", "月份");//x轴名称
//		rootAttributeMap.put("yAxisName", "units");//Y轴名称 免费版不支持中文显示	
//		rootAttributeMap.put("showvalues", "0");//是否显示数字,0为不显示,1为显示
//
//
//
//
//		Element root=FusionChartUtil.getRootElement(rootAttributeMap);
//		
//		Map categoryAttributeMap=new HashMap();
//		categoryAttributeMap.put("font", "Arial");
//		categoryAttributeMap.put("fontSize", "13");
//		categoryAttributeMap.put("fontColor", "000000");
//		String[] values={"1月","","3月","","5月","","7月","","9月","","11月","12月"};
//	
//		FusionChartUtil.setCategoryElement(root,categoryAttributeMap,values);
//		
//		
//		Map datasetAttributeMap=new HashMap();
//		datasetAttributeMap.put("seriesName", "2006");
//		datasetAttributeMap.put("color", "c4e3f7");
//		
//		
//		Random r=new Random();
//		String[] vss=new String[12];
//		for(int i=0;i<12;i++){
//			vss[i]=String.valueOf(r.nextInt(30000));
//		}
//		FusionChartUtil.setDatasetElement(root, datasetAttributeMap, vss);
//		
//		datasetAttributeMap.put("seriesName", "2007");
//		datasetAttributeMap.put("color", "Fad35e");
//		for(int i=0;i<12;i++){
//			vss[i]=String.valueOf(r.nextInt(30000));
//		}
//		FusionChartUtil.setDatasetElement(root, datasetAttributeMap, vss);
//		
//		System.out.println(FusionChartUtil.toStringByRoot(root));
		
		//------------------组合图-------------------
//		Map rootAttributeMap=new HashMap();
//		rootAttributeMap.put("caption", "每月销售额柱形图");//主标题
//		rootAttributeMap.put("subcaption", "2006-2007");//符标题
//		rootAttributeMap.put("xAxisName", "月份");//x轴名称
//		//rootAttributeMap.put("yAxisName", "units");//Y轴名称 免费版不支持中文显示	
//		rootAttributeMap.put("PYAxisName", "数量av");
//		rootAttributeMap.put("SYAxisName", "uv");
//		rootAttributeMap.put("showvalues", "0");//是否显示数字,0为不显示,1为显示
//
//
//
//
//		Element root=FusionChartUtil.getRootElement(rootAttributeMap);
//		
//		Map categoryAttributeMap=new HashMap();
//		categoryAttributeMap.put("font", "Arial");
//		categoryAttributeMap.put("fontSize", "13");
//		categoryAttributeMap.put("fontColor", "000000");
//		String[] values={"1月","","3月","","5月","","7月","","9月","","11月","12月"};
//	
//		FusionChartUtil.setCategoryElement(root,categoryAttributeMap,values);
//		
//		
//		Map datasetAttributeMap=new HashMap();
//		datasetAttributeMap.put("seriesName", "2006");
//		datasetAttributeMap.put("color", "c4e3f7");
//		datasetAttributeMap.put("parentYAxis", "P");//P表示是主轴
//		
//		
//		Random r=new Random();
//		String[] vss=new String[12];
//		for(int i=0;i<12;i++){
//			vss[i]=String.valueOf(r.nextInt(30000));
//		}
//		FusionChartUtil.setDatasetElement(root, datasetAttributeMap, vss);
//		
//		datasetAttributeMap.put("seriesName", "2007");
//		datasetAttributeMap.put("color", "Fad35e");
//		for(int i=0;i<12;i++){
//			vss[i]=String.valueOf(r.nextInt(30000));
//		}
//		FusionChartUtil.setDatasetElement(root, datasetAttributeMap, vss);
//		//次轴
//		datasetAttributeMap.put("seriesName", "用户UV");
//		datasetAttributeMap.put("color", "FF11BB");
//		datasetAttributeMap.put("parentYAxis", "S");//s表示是次轴
//		for(int i=0;i<12;i++){
//			vss[i]=String.valueOf(r.nextInt(300));
//		}
//		FusionChartUtil.setDatasetElement(root, datasetAttributeMap, vss);
//		
//		System.out.println(FusionChartUtil.toStringByRoot(root));
	}
	
		
	
}

为了个大家演示效果,专门写了一个小demo,动态切换图形,页面无刷新,如需下载请移步http://download.csdn.net/source/2981794






分享到:
评论
3 楼 dy.f 2013-01-23  
请问:rootAttributeMap.put("caption", "每月销售额柱形图");//主标题 
        rootAttributeMap.put("subcaption", "2006-2007");//符标题
这两个可以左对齐吗?
2 楼 sunnish 2011-01-17  
貌似CSDN的不能下载??
1 楼 redwave 2011-01-14  
ajax调用后台取数据=>js组织chart要显示的数据结构=>调用chart暴露给js的方法

写一堆Java代码无非就是取数据和组织数据,组织数据的工作完全可以交给js,以后改标题颜色也是方便的。

下载居然还要资源份!!!

相关推荐

    fusionchart报表demo

    在这个“FusionChart报表demo”中,我们可以深入探讨如何利用FusionCharts来创建互动式、吸引人的报表。 一、FusionCharts概述 FusionCharts是一款基于JavaScript的图表库,支持超过90种不同类型的图表,包括柱状图...

    fusionchart flash 报表 工具 第三部分 帮助文档

    fusionchart flash 报表 工具 第三部分 帮助文档 fusionchart flash 报表 工具 第三部分 帮助文档 fusionchart flash 报表 工具 第三部分 帮助文档 这是第三部分

    fusionchart flash报表工具 第一部分 帮助文档

    fusionchart flash报表工具 第一部分 帮助文档 fusionchart flash报表工具 第一部分 帮助文档 fusionchart flash报表工具 第一部分 帮助文档 总共三部分,这是第一个部分

    FusionChart生成基于flash的动态报表

    FusionChart是一款强大的图表生成工具,它专门设计用于创建基于Flash的动态报表,适用于各种Web应用程序,特别是Java项目开发。FusionCharts通过丰富的图形和交互式功能,为数据可视化提供了高效且用户友好的解决...

    fusionChart使用json数据实现报表

    本文将详细讲解如何利用FusionCharts结合JSON数据来实现报表的生成。 首先,理解FusionCharts的核心概念是至关重要的。FusionCharts是一个基于Web的图表组件,支持多种浏览器和平台,它通过接收数据源并将其转化为...

    基于FUSIONCHART的报表图形封装组件的操作手册

    基于FUSIONCHART的报表图形封装组件的操作手册 对报表图形包(nlchart.jar)的使用提供了详尽帮助

    springmvc+mybatis+fusionchart实现实时动态数据更新报表

    本项目“springmvc+mybatis+fusionchart实现实时动态数据更新报表”结合了三个核心技术,旨在提供高效且直观的数据展示解决方案。 1. **SpringMVC**: SpringMVC是Spring框架的一个模块,主要用于构建Web应用程序...

    fusionchart实例

    FusionCharts是一个基于JavaScript的图表库,它支持多种图表类型,如柱状图、饼图、线图、面积图、热力图等,适用于各种业务场景,包括数据分析、报表展示和信息传达。它兼容各种浏览器和服务器环境,可以与各种编程...

    fusionChart 报表.

    这款报表系统以其美观、丰富的2D和3D效果而受到用户的喜爱,包括线型图、点状图、面状图等多种图表类型,为数据分析提供了多样化的选择。 FusionCharts的核心特点在于它的交互性和灵活性。用户可以通过鼠标悬停、...

    MYASP-fusionChart报表源代码(包能运行)

    xmlData.Append("报表' subCaption='报表' showPercentValues='1' pieSliceDepth='30' showBorder='1'&gt;"); xmlData.AppendFormat("&lt;set label='Java' value='{0}' /&gt;", txtPoint1.Text); //txtPoint1.Text xml...

    FusionChart学习及简单实例1

    FusionCharts是一款强大的数据可视化工具,它通过JavaScript库来创建交互式的图表,广泛应用于Web应用程序中,以生动、直观的方式展示复杂数据。本教程将基于"FusionCharts学习及简单实例1"这一主题,深入探讨...

    fusionChart使用json数据实现报表.pdf

    在这个文档中,我们将深入探讨如何利用JSON数据来实现FusionCharts的报表功能。 首先,理解JSON(JavaScript Object Notation)是至关重要的。JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器...

    很好用的报表、饼形图、柱状图开源代码FusionChart

    **FusionCharts是一款强大的数据可视化工具,专为创建吸引人的报表、饼形图和柱状图而设计。作为开源代码,它为开发者提供了丰富的功能和灵活性,使得在各种项目中集成图表变得更加简单。** **一、FusionCharts的...

    在Asp.Net上使用fusionchart报表 图解

    在Asp.Net上使用FusionCharts报表是一种将动态数据可视化的方法,这可以帮助开发者创建交互式、丰富的图表,以便更好地展示和理解数据。FusionCharts是一款JavaScript图表库,它提供了多种图表类型,如柱状图、饼图...

    Fusionchart.js

    总结来说,"Fusionchart.js"是一个用于创建交互式数据图表的JavaScript库,尤其适合数据统计和报表展示。通过这个压缩包,开发者可以获得FusionCharts的基础组件,便于快速集成到自己的项目中,实现高效且美观的数据...

    基于xml的图表控件FusionChart V3

    **基于XML的图表控件FusionChart V3详解** FusionChart V3是一款强大的图表生成工具,它利用XML数据格式和...无论是在Web报表、数据分析还是数据仪表盘的构建中,FusionChart V3都能够提供高效且专业的解决方案。

    FusionChart 完美破解 吴水印

    FusionChart 完美破解 吴水印 基于js报表 跨浏览器 跨语言 包涵多种图表

    FusionChart破解版

    FusionChart破解版汇集多种图形报表展示:柱状图 仪表图 曲线图 颜色多姿多彩 你的项目值得拥有

    Ext-Fusionchart

    这种整合适用于需要在Web应用中展示动态数据报表、监控系统状态或进行数据分析的场景。通过ExtJS的界面交互性和FusionCharts XT的可视化能力,可以创建出功能强大、用户体验优秀的数据展示平台。 总的来说,`Ext-...

    fusionchart demo

    它支持多种数据源,包括XML、JSON、CSV等,适用于各种Web应用程序,如数据分析、报表展示或业务仪表板。 描述中提到的"FusionChart图表显示例子"意味着这个压缩包包含了一个或多个HTML、JavaScript或相关文件,用于...

Global site tag (gtag.js) - Google Analytics