`

FusionCharts实例-MS Column 3D

阅读更多

简单介绍下FusionCharts MS Column 3D的应用。效果图如下:



 

 

数据生成采用不生成xml的方式,数据xml如下:

<chart caption='example' subCaption='Sum I_RIGHT_RATE by city'  shownames='1' showvalues='0' decimals='0' numberPrefix='$' >
	<categories>
		<category label='上海市' />
		<category label='北京市' />
		<category label='天津市' />
		<category label='广州市' />
		<category label='石家庄市' />
		<category label='深圳市' />
		<category label='重庆市' />
	</categories>
	<dataset seriesName='FACTSTA_TIMES' color="FB80F0" showValues="0">
		<set value='98' />
		<set value='292' />
		<set value='90' />
		<set value='88' />
		<set value='96' />
		<set value='92' />
		<set value='100' />
	</dataset>
	<dataset seriesName='INTIMESTA_TIMES' color="FBF1F0" showValues="0">
		<set value='82' />
		<set value='243' />
		<set value='85' />
		<set value='75' />
		<set value='86' />
		<set value='80' />
		<set value='90' />
	</dataset>
	<dataset seriesName='LIMITSTA_TIMES' color="8BF280" showValues="0">
		<set value='17' />
		<set value='49' />
		<set value='15' />
		<set value='13' />
		<set value='10' />
		<set value='12' />
		<set value='10' />
	</dataset>
	</chart>

 

 staticsChart.jsp

被调用显示chart的jsp,通常需要include一个返回chart数据的jsp。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@page import="org.apache.commons.logging.Log"%>
<%@page import="org.apache.commons.logging.LogFactory"%>

<%@page import="com.dhcc.cimiss.st.bs.template.FusionChartUtil"%>
<%@page import="com.dhcc.cimiss.st.bs.template.FusionChartsDTO"%>


<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<%@ include file = "../../bs/Includes/FusionCharts.jsp" %>
<HTML>
<HEAD>
<TITLE>MS Column 3D</TITLE>
<link rel="stylesheet" type="text/css" href="<%=path%>/css/st/css.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/css/st/home.css" />

<SCRIPT LANGUAGE="Javascript" SRC="<%=basePath%>FusionCharts/FusionCharts.js"></SCRIPT>
<style type="text/css">
	<!--
	body {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
	}
	.text{
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
	}
	-->
	</style>
</HEAD>
<BODY>
<CENTER>
<h2>查询表TAB_OMIN_ST_G_SDATAAREA_H</h2>
<%
	Log logger = LogFactory.getLog(getClass());
	
	String animate = (String)request.getAttribute("animate");
	
	String dataPath = path +"/jsp/st/sa/statistics_analysis/columnData.jsp?animate="+ animate;
	String swfPath = path +"/FusionCharts/MSColumn3D.swf";
	logger.info("^^^^^^^^^^^^^^^^^^^^^^^^^ dataPath = "+ dataPath);
	
	FusionChartsDTO fusionCharts = new FusionChartsDTO();
	fusionCharts.setStrDataURL(dataPath);
	fusionCharts.setAddNoCacheStr("false");
	fusionCharts.setResponse(response);
	fusionCharts.setSwfURL(swfPath);
	fusionCharts.setDataURL("dataPath");
	fusionCharts.setChartId("FactorySum");
	fusionCharts.setChartWidth(600);
	fusionCharts.setChartHeight(300);
	fusionCharts.setDebugMode(false);
	fusionCharts.setRegisterWithJS(false);
	
	String chartCode = FusionChartUtil.genChart(fusionCharts);
	
	out.print(chartCode);
	out.print("<p><p>");
	out.print((String)request.getAttribute("tableData"));
%>

<BR>
<BR>
</CENTER>
</BODY>
</HTML>

 

 

columnData.jsp

返回chart数据的jsp,被include在staticsChart.jsp中

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<%@ page import="java.io.*"%>
<%@ page import="com.test.ChartXmlDataProvider"%>

<%
	String strXML="";
	
	//Default.jsp has passed us a property animate. We request that.
	String animateChart;
	animateChart = request.getParameter("animate");
	//Set default value of 1
	if(null==animateChart||animateChart.equals("")){
		animateChart = "1";
	}
	
	String strQuery = "select I_CITY_NAME,sum(I_FACTSTA_TIMES) as FACTSTA_TIMES,"+ 
						" sum(I_INTIMESTA_TIMES) as INTIMESTA_TIMES,sum(I_LIMITSTA_TIMES) as LIMITSTA_TIMES"+  
						" from tab_omin_st_g_sdataarea_h group by I_CITY_NAME";
						
	String[] seriesNames = new String[3];
	seriesNames[0] = "FACTSTA_TIMES";
	seriesNames[1] = "INTIMESTA_TIMES";
	seriesNames[2] = "LIMITSTA_TIMES";
	
	strXML = new ChartXmlDataProvider().getXmlDataOfMSColumn3D(strQuery,"MSColumn3D",seriesNames);
	//logger.info("^^^^^^^^^^^^^^^^^^^^^^^^^ pieData strXML = "+ strXML);
	
	//Set Proper output content-type
	response.setContentType( "text/xml; charset=UTF-8" );
	OutputStream outs = response.getOutputStream();
	
	outs.write( new byte[]{(byte)0xEF, (byte)0xBB, (byte)0xBF} );
	outs.write(strXML.getBytes("UTF-8"));
	outs.flush();
	outs.close();
	outs = null;
	
	response.flushBuffer();
	out.clear();
	out = pageContext.pushBody();
%>

 

其他相关类:

FusionChartsDTO.java

 

public class FusionChartsDTO {
	private String strDataURL;//data jsp url
	private String addNoCacheStr;//
	private HttpServletResponse response;
	private String swfName;
	private String swfURL;//swf file url
	private String dataXML;//""
	private String dataURL;
	private String chartId;
	private int chartWidth;
	private int chartHeight;
	private boolean debugMode;//false
	private boolean registerWithJS;//false
	
	
	public String getStrDataURL() {
		return strDataURL;
	}
	public void setStrDataURL(String strDataURL) {
		this.strDataURL = strDataURL;
	}
	public String getAddNoCacheStr() {
		return addNoCacheStr;
	}
	public void setAddNoCacheStr(String addNoCacheStr) {
		this.addNoCacheStr = addNoCacheStr;
	}
	public HttpServletResponse getResponse() {
		return response;
	}
	public void setResponse(HttpServletResponse response) {
		this.response = response;
	}
	public String getSwfURL() {
		return swfURL;
	}
	public void setSwfURL(String swfurl) {
		swfURL = swfurl;
	}
	
	public String getChartId() {
		return chartId;
	}
	public void setChartId(String chartId) {
		this.chartId = chartId;
	}
	public int getChartWidth() {
		return chartWidth;
	}
	public void setChartWidth(int chartWidth) {
		this.chartWidth = chartWidth;
	}
	public int getChartHeight() {
		return chartHeight;
	}
	public void setChartHeight(int chartHeight) {
		this.chartHeight = chartHeight;
	}
	public boolean isDebugMode() {
		return debugMode;
	}
	public void setDebugMode(boolean debugMode) {
		this.debugMode = debugMode;
	}
	public boolean isRegisterWithJS() {
		return registerWithJS;
	}
	public void setRegisterWithJS(boolean registerWithJS) {
		this.registerWithJS = registerWithJS;
	}
	public String getDataXML() {
		return dataXML;
	}
	public void setDataXML(String dataXML) {
		this.dataXML = dataXML;
	}
	public String getDataURL() {
		return dataURL;
	}
	public void setDataURL(String dataURL) {
		this.dataURL = dataURL;
	}
	public String getSwfName() {
		return swfName;
	}
	public void setSwfName(String swfName) {
		this.swfName = swfName;
	}
	
}

 

ChartXmlDataProvider.java

查询数据库返回chart数据

 

public class ChartXmlDataProvider {
	private static Logger logger = Logger.getLogger(ChartXmlDataProvider.class);	
	
	public String getXmlDataOfMSColumn3D(String sql,String getDataType,String[] seriesNames){
		String cityName = "";
		String paramvalue = "";
				
		
		StringBuffer dataBuffer = new StringBuffer("");
		dataBuffer.append("<chart caption='example' subCaption='Sum I_RIGHT_RATE by city'  " +
				"shownames='1' showvalues='0' decimals='0' numberPrefix='$' ");
		
		if(getDataType.equals(ChartConstants.CHART_TYPE_MS_COLUMN3D)){
			dataBuffer.append(">");
		}	
		
		try{
			DAO dao = BF.getDAO();
			List<Map> rsList = dao.executeQuery(sql,"查询数据");
			
			//categories
			dataBuffer.append("<categories>");
			for (Map map : rsList) {
				cityName = (String)map.get("I_CITY_NAME");
				dataBuffer.append("<category label='"+ cityName +"' />");
			}
			dataBuffer.append("</categories>");
			
			String[][] series = this.getSeries(seriesNames);
			
			for(int i = 0; i < seriesNames.length; i++){
				dataBuffer.append("<dataset seriesName='"+ seriesNames[i] +"' color=\""+ series[i][1] +"\" showValues=\"0\">");
				for (Map map : rsList) {
					paramvalue = ((BigDecimal)map.get(seriesNames[i])).toString();
					dataBuffer.append("<set value='" +paramvalue+ "' />");
				}
				dataBuffer.append("</dataset>");
			}			
			
			dataBuffer.append("</chart>");
			logger.info("^^^^^^^^^^^^^^^^^^^^^^^^^ MSColumn3D strXML = "+ dataBuffer.toString());
			
		}catch (Exception e) {
		    e.printStackTrace();
		}
		
		return dataBuffer.toString();
	}
	
	
	/**
	 * 获取series数据
	 * @param seriesNames
	 * @return
	 */
	private String[][] getSeries(String[] seriesNames){
		int baseLength = seriesNames.length;
		
		char letter = 'A';
		char[] letters = new char[baseLength];
		for(int i = 0; i < baseLength; i++){
			letter += 5;
			letters[i] = letter;
			
			logger.info("letters["+ i +"] = "+ letters[i]);
			if(letter >= 'K'){
				letters[i] = 'F';
				
				if(letter >= 'P'){
					letters[i] = '8';
				}
			}
		}
		
		String[] seriesColors = new String[baseLength];
		
		for(int j = 0; j < baseLength; j++){
			int index = (j+2) >= baseLength ? 0 : (j+2);
			seriesColors[j] = letters[j] +"B"+ letters[index] + j + letters[j] + '0';
		}
		
		String[][] series = new String[seriesNames.length][2];
		for(int i = 0; i < seriesNames.length; i++){
			series[i][0] = seriesNames[i];
			series[i][1] = seriesColors[i];
		}
		return series;
	}
}

 

http://moppet.taobao.com/

 

  • 大小: 48.9 KB
3
1
分享到:
评论

相关推荐

    FusionCharts---v3.1破解版(49个swf).rar

    FusionCharts---v3.1破解版(49个swf).rar

    fusioncharts-suite-xt-v3.9.0

    [JavaScript版]fusioncharts-suite-xt-v3.9.0,支持各种浏览器(最低IE8)。无水印。完美。包含全量地图数据fusionmaps-xt-definition.zip。

    fusioncharts-suite-xt3.10.1.zip

    FusionCharts Suite XT 是一款强大的数据可视化工具,版本号为3.10.1,封装在名为"fusioncharts-suite-xt3.10.1.zip"的压缩包中。这款JavaScript图表库专为创建交互式、动画丰富的图表而设计,能够帮助开发者将复杂...

    fusioncharts-suite-xt-v3.12.1 破解版

    官方最新Fusioncharts 3.12.2,图表上无水印。支持最新的HTML5,跨平台。PCs, Macs, iPads, iPhones, Android devices, our JavaScript (HTML5) charts work everywhere. Heck, even on IE 6

    fusioncharts 3.15.0-sr.1 去水印版.rar

    FusionCharts是一款流行的JavaScript图表库,它允许开发者创建交互式、动画丰富的数据可视化图表。这款3.15.0-sr.1版本是去水印版,意味着它移除了默认的FusionCharts水印,提供了更纯净的展示效果,特别适合用于...

    fusioncharts-suite-xt

    标题中的“fusioncharts-suite-xt”揭示了我们讨论的核心——FusionCharts的旗舰产品,而描述中的“3.6.0”则指出了这一版本的特定细节。在这个版本中,FusionCharts Suite XT提供了丰富的图表类型和优化的性能,...

    FusionCharts图片保存实例-绝对可用

    var myChart = new FusionCharts("FCF_Column2D.swf", "myChartId", "400", "300", "0", "1"); myChart.setXMLUrl('test.xml'); myChart.render("chartContainer"); var myExportComponent = new ...

    fusionCharts导出相关资料打包

    FusionCharts是一款强大的JavaScript图表库,它提供了丰富的图表类型和高度自定义的选项,用于创建交互式的、数据可视化效果。本压缩包中的“fusionCharts导出相关资料打包”集成了关于如何实现FusionCharts图表自动...

    fusioncharts-suite-xt 版本version 3.4.1

    - **index.html**:示例页面,展示了FusionCharts Suite XT的使用方法和各种图表实例。 - **license**:包含了软件的授权信息和使用条款,对于商业项目尤其重要,需仔细阅读以确保合规使用。 - **js**:JavaScript库...

    fusioncharts的使用和实例

    **融合图表(FusionCharts)使用与实例** FusionCharts是一款强大的JavaScript图表库,它能够帮助开发者轻松地在网页上创建交互式、丰富的数据可视化效果。这个库支持超过90种图表类型,包括柱状图、饼图、线图、...

    FusionCharts-破解swf

    FusionCharts-破解swf,FusionCharts-破解flash 去掉了图形中的FusionCharts购买的链接

    fusioncharts实例

    在"fusioncharts实例"这个压缩包中,包含了FusionCharts 3.2版本的SWF破解文件,以及一系列示例,包括单折线图、3D饼状图、多折线图和散点图。这些实例对于学习和理解FusionCharts的功能和用法至关重要。 首先,...

    fusioncharts-suite-xt.zip

    该软件包名为“fusioncharts-suite-xt.zip”,包含了一系列必要的文件,如index.html、integrations、assets、license以及js目录,这些都是构建和运行FusionCharts应用的关键组成部分。 首先,让我们详细了解一下...

    FusionCharts数据库实例

    **FusionCharts数据库实例** FusionCharts是一款强大的JavaScript图表库,它能够帮助开发者轻松地创建交互式的、富有视觉吸引力的数据可视化图表。在这个实例中,我们将深入探讨如何利用FusionCharts与数据库结合,...

    饼形图柱形图fusioncharts 实例

    下面我们将详细探讨 FusionCharts 的饼形图和柱形图实例,以及如何使用它们。 饼形图是一种以圆形为基础,通过扇形面积来展示数据比例关系的图表。在 FusionCharts 中,饼形图可以展示多个类别在整体中的占比,每个...

    FusionCharts Blueprint Application - ColdFusion + MS Access / SQL / MySQL version

    本篇文章将深入探讨如何在ColdFusion环境中结合MS Access、SQL Server或MySQL数据库,利用FusionCharts蓝图应用创建交互式、动态的数据展示应用。 1. FusionCharts概述: FusionCharts是一款JavaScript图表库,支持...

    FusionCharts_Evaluation-free.zip

    FusionCharts是一款强大的JavaScript图表库,它用于在Web应用程序中创建互动、丰富的数据可视化效果。这个"FusionCharts_Evaluation-free.zip"压缩包很可能是FusionCharts的试用版或者免费版,包含了一些基本的图表...

    FusionCharts实例

    这个实例将深入讲解如何利用FusionCharts来构建这些常见图表,以提升数据可视化的用户体验。 首先,我们需要了解FusionCharts的基本使用步骤。在引入FusionCharts库之前,确保你的HTML文件已经包含了FusionCharts的...

    FusionCharts-v3.1破解版_49个swf

    FusionCharts-v3.1破解版_49个swf

Global site tag (gtag.js) - Google Analytics