使用FusionChartsFree整合项目

来源：互联网发布：淘宝出售虚拟物品编辑：程序博客网时间：2024/06/07 08:58

一，前言

前面我们说了使用JFreeChart如何生成图表，现在我们使用FusionChartsFree来生成图表，相比于 jfreeChart，FusionCharts具有一定的特效效果，可以说比jfreeChart效果好。但是FusionChartsFree,以下简称为FCF，不像jfreeChart那样是使用api来生成图片的，但是FCF是用XML和js来生成图片的，以下来看下如何用

FCF来整合项目

下载FusionchartFree包，目录如下所示

将charts里面所有的swf文件拷入到项目的web-inf目录下，我放到web-INF目录下的fusioncharts目录下，然后将jsClass的js文件考到web-inf下的script目录下，你可也可以放到别的目录下，但是在web-INF目录下

2.准备一个用于生成图片的页面，如下

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=utf-8"%><%@taglib uri="/struts-tags" prefix="s"%><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>用户按照性别分报表统计</title><LINK href="${pageContext.request.contextPath }/css/Style.css" type="text/css" rel="stylesheet"><!-- 1:加载JS --><script language="JavaScript" src="${pageContext.request.contextPath }/script/FusionCharts.js"></script></head><body><fieldset style="width: 600px; height: 600px; padding: 1 background:${pageContext.request.contextPath }/images/back1.JPG"><legend><font color="#0000FF"><img border="0" src="${pageContext.request.contextPath }/images/zoom.gif" width="14" height="14"> 报表统计</font></legend><!-- FCF报表加载数据 --><!-- 2:添加div标签 --><div id="chartdiv" align="center">图形将出现这个DIV里，到时这里的字将被图形替代。</div>  <!-- 3:使用隐藏域获取XML数据 --><s:hidden id="data" name="data" value="%{#request.chart}"></s:hidden><!-- 4:使用js完成加载数据 --><script type="text/javascript">           var myChart = new FusionCharts("${pageContext.request.contextPath }/fusionCharts/FCF_Pie2D.swf", "myChartId", "600", "500");          var di = document.getElementById("data").value;        myChart.setDataXML(di);           myChart.render("chartdiv");        </script>  </fieldset></body></html>

将fusionChartFree.js放入到这个页面,创建一个div，加入一个id为chartdiv,使用一个隐藏字段，id=data,注意后面的这个js代码，就是用来创建图的，但是数据由下面的data来添加，注意setDataXml(di)用来添加数据的，render用来替换chartdiv的，替换字段生成图片

3.最后是要在服务器端去生成xml文件，xml文件中的数据，就是将来在表中出现的数据如上

//查询数据库，查询数据库所需要的数据集合List<Object[]> list = elecUserService.chartUser("性别","sexID");//组织XML数据 StringBuilder stringBuilder = new StringBuilder();  if(list!=null&&list.size()>0){for(int i=0;i<list.size();i++){Object[] obj = list.get(i);if(i==0){//组织第一个数据String x="男女比例的统计";String y ="unit";//FusionChartFree存在一个问题，那就是y轴不支持中文stringBuilder.append("<graph caption='用户统计表("+obj[0].toString()+")' xAxisName='"+x+"' bgcolor='FFFFDD' "+ "yAxisName='"+y+"' showValues='1' decimals='0' baseFontSize='18'  maxColWidth='60' showNames='1' decimalPrecision='0'>");stringBuilder.append("<set name='"+obj[1].toString()+"' value='"+obj[2].toString()+"' color='F6BD0F' />");}if(i==list.size()-1){stringBuilder.append("<set name='"+obj[1].toString()+"' value='"+obj[2].toString()+"' color='FF8E46'/>");stringBuilder.append("</graph>");}} }request.setAttribute("chart",stringBuilder);

其实这里和JfreeChart是一样的，查询数据库的数据，然后按FCF的xml规定生成xml数据，最后放到request域中，要知道，这里的chart就是页面中的那个chart

阅读全文

0 0