转openflashchartofc图表TeddyWangnb

1、图表转 open flash chart ofcTeddyWa ng nb转:open flash chart(ofc)图表2010年09月01日Java开源项目中制作图表比较出色的就是 JFreeChart 了，相信大家 都听说过，它不仅可以做出非常漂亮的柱状图，饼状图，折线图基本图形之外,还能制作甘特图，仪表盘等图表。在 Web应用中可以为项目增色不少。 JFreeChart技术成熟，完全是通过Java代码控制图表生成，掌握难度不大。 但是它的一个缺点就是所有资源在服务器端生成，需要占用大量的服务器资源， 而且图表以流的形式输送到客户端也占用了大量的网络资源。对于服务器资源和网络资源吃紧的

2、项目还不得不想办法，虽然JFreeChart非常的华丽，但是还好有 Open Flash Chart，制作简单的柱状图， 饼状图和折线图足够用，而且Flash的展示效果绝不比JFreeChart的差。项目 地址是：http:/teethgrinder.co.uk/ope n-flash-chart/先说说Open Flash Chart的工作原理，不要看到 Flash就害怕，OFC 的开发包内就是一个flash文件，其实我们不需要改动原有的 Flash，只需给 Flash提供符合规范的数据即可。OFC所需的数据格式就是JSON JSON不依赖 于任何技术(Java，.NET和PHP都有生成JS

3、ON弋码的工具)，这就使得 OFC 更加Open本文从Java角度出发，使用Struts2框架，来分析OFC的使用。GoogleCode社区的一款开源插件为Java开发者使用OFC提供了 JSON 生成的专用工具，那就是jofc2，我可以使用jofc2采用类似JFreeChart的方 式来组织代码，大大提升开发效率。该项目的地址是：项目按照Struts2的开发标准搭建，然后把 OFC开发所需的flash文 件，页面显示Flash的支持文件swfobject.js放到发布目录的相应位置，再将jofc2和其依赖的xstream的jar包放到 WEB-INF/lib下并加入编译路径即可。有这样一个需

4、求：记录系统访问用户所使用的浏览器并用图表显示那么需要在数据库中记录这样的信息，如图所示:这里面记录了 9种浏览器的系统访问量，现在我们要在页面中用OFC来显示它，首先对Struts2做配置。代码如下：packagexxx.app.action.chart; import java.util.ArrayList; importjava.util.List; import java.util.Map; importjavax.servlet.http.HttpServletResp on se; import org.apache.struts2.ServletActio nCon text;

5、import jofc2.model.Chart;import jofc2.model.axis.Label; import jofc2.model.axis.XAxis; importjofc2.model.axis.YAxis; import jofc2.model.eleme nts.L in eChart; importn eo.app.act ion .BaseAct ion; public class OfcChartActio n exte ndsBaseAction private Chart ofcChart; public Chart getOfcChart() retur

6、n ofcChart; public Stri ng showChart() throws Excepti on /y轴数据集合-使用数量 List dataSet = new ArrayList();/x 轴数据集合-浏览器类型 List xLabel = new ArrayList();/获取需要显示的数据集 List browserList = getServMgr().getVisitStatService().getBrowserStat( ); for (int i = 0;i browserList.size(); i+) Map map = (Map) browserList.

7、get(i); /填充 x 轴 dataSet.add(Integer) map.get(statCount); /填充 y 轴xLabel.add(new Label(String) map.get(statVar); /设置 X 轴内容XAxis labels = new XAxis(); labels.addLabels(xLabel); /设置 Y轴显示值域:Range的三个参数含义为：坐标最小值，最大值和步进值YAxis range =new YAxis(); ran ge.setRa nge(0, 200, 10); /OFC折线图设置 Lin eChart lin eChart

8、= new Lin eChart(Li neChart.Style.NORMAL);lin eChart.addValues(dataSet); li neChart.setColour(#6666FF);lineChart.setText(”使用者数量);/ 图表设置 Chart chart = new Chart(用户浏览器使用量分布);chart.setXAxis(labels); chart.setYAxis(range); chart.addElements(lineChart); /打印 JSON格式的文本System.out.print(chart.toString(); Htt

9、pServletResponse response =ServletActio nCon text.getResp on se();resp on se.setCo nten tType(applicati on/jso n-rpc;char set=utf-8);resp on se.setHeader(Cache-C on trol, no-cache);resp on se.setHeader(Expires, 0); resp on se.setHeader(卩ragma, Nocache); resp on se.getWriter().write(chart.toStri ng()

10、; returnnull; Service中获取数据我们使用Spring的JdbcTemplate进行。写好Action ,我们简单配置一下，因为我们只是得到JSON文本，所以不必配置跳转,只需配置请求即可。页面的JS代码也很简单。如下即可：v/script var flashvars = data-file:$base/ma nage/stat/ofcChart!showCha rt.act ion; var params =me nu: false,scale: no Scale,wmode:opaque;swfobject.embedSWF($base/swf/ope n-flash-c

11、hart.s wf, chart,600px, 400px, 9.0.0, expressl nstall.swf,flashvars,params); 这里需要多说几句，首先是路径，不能错了，错了就请求不到数据了。Swfobject.js 是页面使用JS方式配置Flash显示的，比较方便，所有使用它 了。设置一个div用于Flash的显示，这个id是embedSW的第二个参数，不 能忘写了。还有就是请求地址参数的问题，这里我们是方便测试就没有传递参 数，而实际开发不可避免传递参数。参数传递时在请求地址后面按普通形式书 写即可，只是&这个连接符需要转义，写成 %26其他就没有什么了。我们得到的

12、结果就是这样的，这是很普通的折线图。但是不比JFreeChart 的差哦。同时在控制台我们得到jofc2为我们生成的JSON文本is_thousa nd_separator_disabled:O,is_decimal_separator_comma:0,title:tex t:用户浏览器使用量分布,y_axis:mi n:0,steps:10,max:200,x_axis :la bels:labels:text:Safari,text:MSIE6X,text:MSIE7X,text:MSIE8X,text:Firefox,text:Chrome,text:Opera,text:Maxtho

13、n ,text:Other, nu m_decimals:2,is_fixed_ n um_decimals_forced:0,eleme nt s:fo nt-size:10,text: 使用者数量,type:line,values:6,2,63,168,1,10, 1,0,0,colour:#6666FF下面我们做柱状图，做个个性点的，用 sketch类型。这样我们就得 到了下面的显示效果，是不是很卡通，哈哈。需要注意jofc2将sketch风格的柱状图单独写成了一个类，而使用普通风格的柱状图时不时这么进行的。柱状图Bar的集合ListbarList=new ArrayList(); fo

14、r (int i = 0; i browserList.size();i+) Map map = (Map) browserList.get(i); /填充 Bar，并给出提示barList.add(new Bar(Integer) map.get(statCount).setTooltip(#val# 次);/ 填充 y 轴 xLabel.add(new Label(String)map.get(statVar); /柱状图设置 BarChart barChart=newBarChart(BarChart.Style.GLASS); barChart.addBars(barList); ba

15、rChart.setColour(#6666FF); barChart.setText(使用者数量);/ 图表设置Chart chart = new Chart(用户浏览器使用量分布);chart.setXAxis(labels); chart.setYAxis(ra nge);chart.addEleme nts(barChart);我们得到如下的柱状图。最后一种是饼状图，下面我们来画饼。/饼状图PieChart pieChart=new PieChart(); for (int i = 0; i browserList.size(); i+) Mapmap = (Map) browserList.get(i); /填充 x 轴 dataSet.add(Integer)map .get(statCou nt); /饼状图添加块 pieChart.addSlice(l nteger)map .get(statCou nt), (Stri ng) map .get(statVar); /饼状图设置pieChart.setColours(