简单介绍下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
分享到:
相关推荐
FusionCharts---v3.1破解版(49个swf).rar
[JavaScript版]fusioncharts-suite-xt-v3.9.0,支持各种浏览器(最低IE8)。无水印。完美。包含全量地图数据fusionmaps-xt-definition.zip。
FusionCharts Suite XT 是一款强大的数据可视化工具,版本号为3.10.1,封装在名为"fusioncharts-suite-xt3.10.1.zip"的压缩包中。这款JavaScript图表库专为创建交互式、动画丰富的图表而设计,能够帮助开发者将复杂...
官方最新Fusioncharts 3.12.2,图表上无水印。支持最新的HTML5,跨平台。PCs, Macs, iPads, iPhones, Android devices, our JavaScript (HTML5) charts work everywhere. Heck, even on IE 6
FusionCharts是一款流行的JavaScript图表库,它允许开发者创建交互式、动画丰富的数据可视化图表。这款3.15.0-sr.1版本是去水印版,意味着它移除了默认的FusionCharts水印,提供了更纯净的展示效果,特别适合用于...
标题中的“fusioncharts-suite-xt”揭示了我们讨论的核心——FusionCharts的旗舰产品,而描述中的“3.6.0”则指出了这一版本的特定细节。在这个版本中,FusionCharts Suite XT提供了丰富的图表类型和优化的性能,...
var myChart = new FusionCharts("FCF_Column2D.swf", "myChartId", "400", "300", "0", "1"); myChart.setXMLUrl('test.xml'); myChart.render("chartContainer"); var myExportComponent = new ...
FusionCharts是一款强大的JavaScript图表库,它提供了丰富的图表类型和高度自定义的选项,用于创建交互式的、数据可视化效果。本压缩包中的“fusionCharts导出相关资料打包”集成了关于如何实现FusionCharts图表自动...
- **index.html**:示例页面,展示了FusionCharts Suite XT的使用方法和各种图表实例。 - **license**:包含了软件的授权信息和使用条款,对于商业项目尤其重要,需仔细阅读以确保合规使用。 - **js**:JavaScript库...
**融合图表(FusionCharts)使用与实例** FusionCharts是一款强大的JavaScript图表库,它能够帮助开发者轻松地在网页上创建交互式、丰富的数据可视化效果。这个库支持超过90种图表类型,包括柱状图、饼图、线图、...
FusionCharts-破解swf,FusionCharts-破解flash 去掉了图形中的FusionCharts购买的链接
在"fusioncharts实例"这个压缩包中,包含了FusionCharts 3.2版本的SWF破解文件,以及一系列示例,包括单折线图、3D饼状图、多折线图和散点图。这些实例对于学习和理解FusionCharts的功能和用法至关重要。 首先,...
该软件包名为“fusioncharts-suite-xt.zip”,包含了一系列必要的文件,如index.html、integrations、assets、license以及js目录,这些都是构建和运行FusionCharts应用的关键组成部分。 首先,让我们详细了解一下...
**FusionCharts数据库实例** FusionCharts是一款强大的JavaScript图表库,它能够帮助开发者轻松地创建交互式的、富有视觉吸引力的数据可视化图表。在这个实例中,我们将深入探讨如何利用FusionCharts与数据库结合,...
下面我们将详细探讨 FusionCharts 的饼形图和柱形图实例,以及如何使用它们。 饼形图是一种以圆形为基础,通过扇形面积来展示数据比例关系的图表。在 FusionCharts 中,饼形图可以展示多个类别在整体中的占比,每个...
本篇文章将深入探讨如何在ColdFusion环境中结合MS Access、SQL Server或MySQL数据库,利用FusionCharts蓝图应用创建交互式、动态的数据展示应用。 1. FusionCharts概述: FusionCharts是一款JavaScript图表库,支持...
FusionCharts是一款强大的JavaScript图表库,它用于在Web应用程序中创建互动、丰富的数据可视化效果。这个"FusionCharts_Evaluation-free.zip"压缩包很可能是FusionCharts的试用版或者免费版,包含了一些基本的图表...
这个实例将深入讲解如何利用FusionCharts来构建这些常见图表,以提升数据可视化的用户体验。 首先,我们需要了解FusionCharts的基本使用步骤。在引入FusionCharts库之前,确保你的HTML文件已经包含了FusionCharts的...
FusionCharts-v3.1破解版_49个swf