由于本人是一个刚出校门的新手，水平有限，写下以下文字仅仅当做是在记笔记...
free fusionchart的简单认识
在做项目的时候遇到制作报表这块，然后就因为种种原因（其中不乏测试比较，测试）最终选择了fusionchart的free版本。想要下载和看看图型Demo的可以前往官网http://www.fusioncharts.com/。这里没有广告的意思，只是为了方便了解FCF的特点。虽然free版本的很多功能都没有收费版本的好看、全面，但是基本能满足我的需求了。
生成图形所用的数据形式可以是json或者是xml，我用的是动态查询数据生成xml数据来实现的。具体的控制数据的形式可以参考http://www.fusioncharts.com/explore/fusioncharts/，预览自己所需要生成的图型的数据格式，再在后台安装相应的数据格式就可以了。
图型本身来说还是很美观的，饼图和柱状图都有2d和3d的模型，而且还有一些flash动画的效果，这里还需猜测下就是这个产品本身就是用flash和js做的吧。使用起来方便简单，容易上手吧。
关于下载和使用
先说说在前台页面上的js是怎么做的：
<html>
<head>
<script type="text/javascript"
src="${pageContext.request.contextPath}/resource/fusioncharts/js/FusionCharts.js"></script>
</head>
<div id="chartdiv"></div>
<input type="button" οnclick="showFusionCharts()" value="(╯‵□′)╯︵┻━┻"/>(╯‵□′)╯︵┻━┻
<script type="text/javascript">
function showFusionCharts(){
var nd = document.getElementById("nd").value;
var jddm = document.getElementById("jddm").value;
var yddm = document.getElementById("yddm").value;
var revisingChart = new FusionCharts("${pageContext.request.contextPath}/resource/fusioncharts/swfs/FCF_Pie3D.swf", "myChartId", "1000", "300",0,1);
revisingChart.setDataURL(escape("${pageContext.request.contextPath}/packageNameS/formChart.action?nd="+nd+"&jddm="+jddm+"&yddm="+yddm));
revisingChart.addParam("wmode", "Opaque");
revisingChart.render("chartdiv");
}
</script>
</body>
</html>注意2：可能页面需要传参数到后台的action中查找数据，所以在url后面跟的参数，在使用setDataURL()方法时，如果地址里含有“？”、“&”等字符，你就需要对这个地址进行URL编码，在js里进行编码，使用escape（url）这个函数，如果你想在服务器进行编码，那就要使用你所用的编程语言进行编码，比如java，则使用编码的类方法是：java.net.URLEncoder.encode()。
注意3：revisingChart.addParam("wmode", "Opaque")，生成的图形是flash，为了不把页面中其他的标签挡住，可以调节flash对象的wmode设置参数，确保flash文件不会挡住其他内容，
wmode参数类型（来源于互联网）
window 模式
默认情况下的显示模式，在这种模式下flash player有自己的窗口句柄，这就意味着flash影片是存在于Windows中的一个显示实例，并且是在浏览器核心显示窗口之上的，所以flash只是貌似显示在浏览器中，但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面，这就导致默认显示方式下flash总是会遮住位置与他重合的所有DHTML层。但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上，但当flash影片播放时会出现比较诡异的现象，比如DHTML层像被flash刮掉一块一样显示异常。
Opaque 模式
这是一种无窗口模式，在这种情况下flash player没有自己的窗口句柄，这就需要浏览器需要告诉flash player在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器HTML渲染表面而是与其他元素一样在同一个页面上,因此你就可以使用z-index值来控制DHTML元素是遮盖flash或者被遮盖。
Transparent 模式
透明模式，在这种模式下flash player会将stage的背景色alpha值将为0并且只会绘制stage上真实可见的对象，同样你也可以使用z-index来控制flash影片的深度值，但是与Opaque模式不同的是这样做会降低flash影片的回放效果，而且在9.0.115之前的flash player版本设置wmode=”opaque”或”transparent”会导致全屏模式失效。注意4：new FusionCharts（）有六个参数，其中：第一个参数是SWF文件的地址，这个是必须要有的，如果你要3d饼图，请选择FCF_Pie3D.swf，以此类推；第二个是图形的id。当一个页面里有多个图形的时候，这个id一定要是唯一的；第三个参数是图形的宽；第四个参数是图形的高。第五个参数是否为debug模式，如果是1的话，则不会显示图形，而是显示生成图形的数据和一些其他信息，如下图所示；
前台的要注意的具体实现基本就是这个样子了，下面是后台的一些代码：
public static String XMLData(List<ChartModelVO> list) {
StringBuffer singleData = new StringBuffer();
String utf8BomStr="";
byte[] utf8Bom = new byte[]{(byte) 0xef, (byte) 0xbb, (byte) 0xbf};
try {
utf8BomStr = new String(utf8Bom,"UTF-8");
} catch (UnsupportedEncodingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}//定义BOM标记
//必须在生成的xml文档前加上utf8BomStr以声明BOM标记
singleData.append(utf8BomStr+"<?xml version='1.0' encoding='UTF-8'?>");
singleData.append("<chart showLegend ='1' numberSuffix='万人' pieRadius='80' animation='1' pieSliceDepth='35' pieYScale='70' startingAngle='20' smartLineThickness='2' baseFont='微软雅黑' baseFontSize='14' showPercentValues='1' formatNumberScale='0' paletteColors='#69A1DA,#DC6868,#BAD77A,#9E7CB9,#6DD0E3,#7778E4,#F7BE26,#06CCCD,#8B0000,#00FF00'>");
if (list != null) {
for (ChartModelVO model : list) {
singleData.append("<set name='" + model.getName() + "' value='" + model.getValue() + "' isSliced='"+model.getIsSliced()+"' />");
}
}
singleData.append("</chart>");
return singleData.toString();
}
public void getPieChart() throws Exception {
String v_year = this.getServletRequest().getParameter("nd");
String v_quater = this.getServletRequest().getParameter("jddm");
String v_month= this.getServletRequest().getParameter("yddm");
if(v_year==null){
v_year="";
}
if(v_quater==null){
v_quater="";
}
if(v_month==null){
v_month="";
}
String ny = pieInfoService.getRecentNy(v_year, v_quater, v_month);
List<PieInfoVO> resultList = pieInfoService.getPieChart(ny);
List<ChartModelVO> list = new ArrayList<ChartModelVO>();
if(null != resultList && resultList.size() > 0){
for(int i = 0; i < resultList.size(); i++){
ChartModelVO model1 = new ChartModelVO();
PieInfoVO pieInfoVO = resultList.get(i);
if(pieInfoVO.getSj()==null||"".equals(pieInfoVO.getSj())){
model1.setValue("0");
}else{
model1.setValue(pieInfoVO.getSj());
}
model1.setName(pieInfoVO.getName()+","+temp+"万人");
model1.setIsSliced("1");//用于展开饼图
list.add(model1);
}
}
this.servletResponse.setCharacterEncoding("UTF-8");//处理中文显示乱码问题
getServletResponse().getWriter().write(XMLData(list));
}
public class ChartModelVO {
private String name;
private String value;
private String isSliced;
private String color;
public String getName() {
return this.name;
}
public void setName(String name) {
this.name = name;
}
public String getValue() {
return this.value;
}
public void setValue(String value) {
this.value = value;
}
public String getIsSliced() {
return isSliced;
}
public void setIsSliced(String isSliced) {
this.isSliced = isSliced;
}
public String getColor() {
return color;
}
public void setColor(String color) {
this.color = color;
}
}而PieInfoVO里面就是一些你要显示的字段，就不一一展示了。
注意1：
byte[] utf8Bom = new byte[]{(byte) 0xef, (byte) 0xbb, (byte) 0xbf};
try {
utf8BomStr = new String(utf8Bom,"UTF-8");
} catch (UnsupportedEncodingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}定义BOM标记 ，必须在生成的xml文档前加上utf8BomStr以声明BOM标记。还要注意处理一些中文乱码的问题。
注意2：如果要生成双y轴或者多线图这样的，只要修改XMLData函数以及查询相应的数据就可以了，下面再给个例子：
public static String XMLData4ML(List<ZhglLnVO> hzbList,Map<String,List<ZhglLnVO>> map) {
StringBuffer singleData = new StringBuffer();
String utf8BomStr="";
byte[] utf8Bom = new byte[]{(byte) 0xef, (byte) 0xbb, (byte) 0xbf};
try {
utf8BomStr = new String(utf8Bom,"UTF-8");
} catch (UnsupportedEncodingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
singleData.append(utf8BomStr+"<?xml version='1.0' encoding='UTF-8'?>");
singleData.append("<graph showvalues='1' snumbersuffix='￥' decimals='3' setadaptiveymin='1' setadaptivesymin='1' linethickness='3' >");
//-----------------------------------------------------------------
singleData.append("<categories>");
if(hzbList!=null){
for(ZhglLnVO name:hzbList){
singleData.append("<category name='"+name.getYbnd()+"'/>");
}
}
singleData.append("</categories>");
//------------------------------------------------------------------
if(map.size()!=0){
for(Map.Entry<String, List<ZhglLnVO>> entry:map.entrySet()){
singleData.append("<dataset seriesname='"+entry.getKey()+"' color='0080C0' anchorBorderColor='0080C0'>");
if(entry.getValue()!=null){
for(ZhglLnVO val1:entry.getValue()){
singleData.append("<set value='"+val1.getZj()+"'/>");
}
}
singleData.append("</dataset>");
}
}
//--------------------------------------------------------------------
singleData.append("</graph>");
return singleData.toString();
}补充说明
控制各个图形所用的参数的都是差不多控制的，只不过各个图形要控制的一些具体参数不一样而已，鉴于文章长度就不贴具体的控制参数了，可以google或者百度就可以找到自己要控制的饼图或者柱状图以及双y轴多线图的控制参数了。
学习就到这里，记得多多记笔记哦...Fighting...
166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
