`

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
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics