FusionCharts是一个图形报表展现工具，下面介绍怎么在Ext中实现它。首先把FusionCharts需要的swf文件和fusionCharts.js加到项目中,然后创建jsp和js文件，需要在头文件中引入FusionCharts.js

[@more@]

fusion.jsp

<%--
/*****************************************************************
* Description：图表处理
* Author：SunWei
* CreateDate：2011-04-21
*******************************************************************/
--%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String mainName = (String)request.getParameter("subMainId");
%>

fusion.js

Ext.BLANK_IMAGE_URL = '../inc/extjs/resources/images/default/s.gif';
//左边功能树
Ext.onReady(function(){
var win=new Ext.Window({
title:'falsh报表展示1',
layout:'fit',
width:500,
height:400,
closeAction:'close',
plain:true,
html:'

'
});

var FCF_MSColumn3DPanel=new Ext.Panel({
title:'综合3D柱状图',
html:'

'
});
var FCF_Column3DPanel=new Ext.Panel({
title:'3D柱状图',
html:'

'
});
var FCF_Pie3DPanel=new Ext.Panel({
title:'3D饼状图',
html:'

'
});

var tabPanel=new Ext.TabPanel({
autoTabs : true,
activeTab : 0,
deferredRender : false,
border : false,
items:[FCF_MSColumn3DPanel,FCF_Column3DPanel,FCF_Pie3DPanel]
});
tabPanel.on("tabchange",function(tp,p){
tp.doLayout();
})
win.add(tabPanel);
win.show();
win.on("beforedestroy",function(win){
win.show();
return false;
});

var chart1 = new FusionCharts(Main.contextPath+"/fusionCharts/MSColumn3D.swf", "chart1Id", "480", "380", "0", "1");
var xml="" yAxisMaxValue='100' numdivlines='9' divLineColor='CCCCCC' divLineAlpha='80' decimalPrecision='0' " +
"showAlternateHGridColor='1'font='Monaco' AlternateHGridAlpha='30' AlternateHGridColor='CCCCCC' caption='销售统计'" +
" subcaption='机构当月销售和上月销售对比' >" +
" " +
" " +
" " +
" " +
" " +
" " +
" " +
" " +
" " +
" " +
" " +
" " +
" " +
" " +
" " +
" " +
" " +
" " +
" " +
" " +
" " +
"";

chart1.setDataXML(xml);
chart1.render("chart1div");

var chart2 = new FusionCharts(Main.contextPath+"/fusionCharts/Column3D.swf", "chart2Id", "480", "380", "0", "1");
chart2.setDataXML("");
chart2.render("chart2div");

var xml="" +
"" +
" " +
" " +
" " +
" " +
" " +
" " +
"";

var chart3 = new FusionCharts(Main.contextPath+"/fusionCharts/Pie3D.swf", "chart3Id", "480", "380", "0", "1");
chart3.setDataXML(xml);
chart3.render("chart3div");
});

注：

Main.contextPath = '<%=request.getContextPath() %>';

ITPub博客

在Ext中展现FusionCharts图形报表

最新文章