- 浏览: 510503 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (299)
- Oracle(pl/sql_Erp_Pro*C) (69)
- 设计模式 (4)
- spring (23)
- ext (17)
- apache开源项目应用 (4)
- jquery (16)
- 生活琐事 (8)
- 下载资源 (23)
- mysql (2)
- Eclipse使用积累 (5)
- 报表类(报表/图表) (13)
- php (4)
- Web多彩文本框 (3)
- json (4)
- jqgrid (2)
- ant (2)
- java算法积累 (8)
- EL表达式/JSTL (4)
- poi (3)
- gwt (2)
- 爬网第一步 (2)
- javascript (17)
- Javaweb (8)
- tomcat (1)
- flex (1)
- Java&DB (3)
- J2SE (7)
- linux (3)
- 数据结构 (1)
- dot net (5)
- struts (1)
- ibatis (1)
- log4j (1)
- 项目管理 (1)
- Java native interface(jni,jacob......) (5)
- applet (1)
- VB.net/C#.net/JNI (20)
- css (1)
- Sqlite (1)
- servlet (1)
- REST (1)
最新评论
-
wenhurena:
能不能给一下解压密码roki.work.2017@gmail. ...
Ebs解体新書と学習資料1 -
liutao1600:
楼主写的太好了,每天学习~~
Spring_MVC(6)测试 -
liutao1600:
太好了,每天学习你的文章~~~
Spring_MVC(3)表单页面处理 -
liutao1600:
学习了,太好了
Spring_MVC(2)控制层处理 -
liutao1600:
学习了~~~
Spring_MVC(1)构建简单web应用
Java开源项目中制作图表比较出色的就是JFreeChart了,相信大家都听说过,它不仅可以做出非常漂亮的柱状图,饼状图,折线图基本图形之外,还能制作甘特图,仪表盘等图表。在Web应用中可以为项目增色不少。JFreeChart技术成熟,完全是通过Java代码控制图表生成,掌握难度不大。但是它的一个缺点就是所有资源在服务器端生成,需要占用大量的服务器资源,而且图表以流的形式输送到客户端也占用了大量的网络资源。
对于服务器资源和网络资源吃紧的项目还不得不想办法,虽然JFreeChart非常的华丽,但是还好有Open Flash Chart,制作简单的柱状图,饼状图和折线图足够用,而且Flash的展示效果绝不比JFreeChart的差。项目地址是:http://teethgrinder.co.uk/open-flash-chart/
先说说Open Flash Chart的工作原理,不要看到Flash就害怕,OFC的开发包内就是一个flash文件,其实我们不需要改动原有的Flash,只需给Flash提供符合规范的数据即可。OFC所需的数据格式就是JSON,JSON不依赖于任何技术(Java,.NET和PHP都有生成JSON代码的工具),这就使得OFC更加Open。本文从Java角度出发,使用Struts2框架,来分析OFC的使用。
GoogleCode社区的一款开源插件为Java开发者使用OFC提供了JSON生成的专用工具,那就是jofc2,我可以使用jofc2采用类似JFreeChart的方式来组织代码,大大提升开发效率。该项目的地址是:http://jofc2.googlecode.com
项目按照Struts2的开发标准搭建,然后把OFC开发所需的flash文件,页面显示Flash的支持文件swfobject.js放到发布目录的相应位置,再将jofc2和其依赖的xstream的jar包放到WEB-INF/lib下并加入编译路径即可。
有这样一个需求:记录系统访问用户所使用的浏览器并用图表显示。那么需要在数据库中记录这样的信息,如图所示:
这里面记录了9种浏览器的系统访问量,现在我们要在页面中用OFC来显示它,首先对Struts2做配置。代码如下:
package xxx.app.action.chart; import java.util.ArrayList; import java.util.List; import java.util.Map; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; import jofc2.model.Chart; import jofc2.model.axis.Label; import jofc2.model.axis.XAxis; import jofc2.model.axis.YAxis; import jofc2.model.elements.LineChart; import neo.app.action.BaseAction; public class OfcChartAction extends BaseAction { private Chart ofcChart; public Chart getOfcChart() { return ofcChart; } public String showChart() throws Exception{ //y轴数据集合-使用数量 List<Number> dataSet = new ArrayList<Number>(); //x轴数据集合-浏览器类型 List<Label> xLabel = new ArrayList<Label>(); //获取需要显示的数据集 List browserList = getServMgr().getVisitStatService().getBrowserStat(); for (int i = 0; i < browserList.size(); i++) { Map map = (Map) browserList.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(); range.setRange(0, 200, 10); //OFC折线图设置 LineChart lineChart = new LineChart(LineChart.Style.NORMAL); lineChart.addValues(dataSet); lineChart.setColour("#6666FF"); lineChart.setText("使用者数量"); //图表设置 Chart chart = new Chart("用户浏览器使用量分布"); chart.setXAxis(labels); chart.setYAxis(range); chart.addElements(lineChart); //打印JSON格式的文本 System.out.print(chart.toString()); HttpServletResponse response = ServletActionContext.getResponse(); response.setContentType("application/json-rpc;charset=utf-8"); response.setHeader("Cache-Control", "no-cache"); response.setHeader("Expires", "0"); response.setHeader("Pragma", "No-cache"); response.getWriter().write(chart.toString()); return null; } }
Service中获取数据我们使用Spring的JdbcTemplate进行。
//获取记录的浏览器信息 private static final String SQL_GET_BROWER_STAT = "select statVar,statCount from nd_stats where statType='browser'"; /** * 获取记录的浏览器信息 */ public List getBrowserStat() { return jt.queryForList(SQL_GET_BROWER_STAT); }
写好Action,我们简单配置一下,因为我们只是得到JSON文本,所以不必配置跳转,只需配置请求即可。
<action name="ofcChart" class="xxx.app.action.chart.OfcChartAction"> </action>
页面的JS代码也很简单。如下即可:
<script type="text/javascript" src="${base}/js/swfobject.js"></script> <script type="text/javascript"> var flashvars = {"data-file":"${base}/manage/stat/ofcChart!showChart.action"}; var params = {menu: "false",scale: "noScale",wmode:"opaque"}; swfobject.embedSWF("${base}/swf/open-flash-chart.swf", "chart", "600px", "400px", "9.0.0", "expressInstall.swf",flashvars,params); </script> <div id="chart"> </div>
这里需要多说几句,首先是路径,不能错了,错了就请求不到数据了。Swfobject.js是页面使用JS方式配置Flash显示的,比较方便,所有使用它了。设置一个div用于Flash的显示,这个id是embedSWF的第二个参数,不能忘写了。还有就是请求地址参数的问题,这里我们是方便测试就没有传递参数,而实际开发不可避免传递参数。参数传递时在请求地址后面按普通形式书写即可,只是&这个连接符需要转义,写成%26,其他就没有什么了。
我们得到的结果就是这样的,这是很普通的折线图。但是不比JFreeChart的差哦。
同时在控制台我们得到jofc2为我们生成的JSON文本。
{"is_thousand_separator_disabled":0,"is_decimal_separator_comma":0,"title":{"tex t":"用户浏览器使用量分布"},"y_axis":{"min":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":"Maxthon" },{"text":"Other"}]}},"num_decimals":2,"is_fixed_num_decimals_forced":0,"element s":[{"font-size":10,"text":"使用者数量","type":"line","values":[6,2,63,168,1,10, 1,0,0],"colour":"#6666FF"}]}
下面我们做柱状图,做个个性点的,用sketch类型。
//Sketch型柱状图设置 SketchBarChart sketchChart = new SketchBarChart(); sketchChart.setColour("#6666FF"); sketchChart.addValues(dataSet); sketchChart.setText("使用者数量"); //图表设置 Chart chart = new Chart("用户浏览器使用量分布"); chart.setXAxis(labels); chart.setYAxis(range); chart.addElements(sketchChart);
这样我们就得到了下面的显示效果,是不是很卡通,哈哈。
需要注意jofc2将sketch风格的柱状图单独写成了一个类,而使用普通风格的柱状图时不时这么进行的。
//柱状图Bar的集合 List<Bar> barList=new ArrayList<Bar>(); for (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=new BarChart(BarChart.Style.GLASS); barChart.addBars(barList); barChart.setColour("#6666FF"); barChart.setText("使用者数量"); //图表设置 Chart chart = new Chart("用户浏览器使用量分布"); chart.setXAxis(labels); chart.setYAxis(range); chart.addElements(barChart);
我们得到如下的柱状图。
最后一种是饼状图,下面我们来画饼。
//饼状图 PieChart pieChart = new PieChart(); for (int i = 0; i < browserList.size(); i++) { Map map = (Map) browserList.get(i); //填充x轴 dataSet.add((Integer) map.get("statCount")); //饼状图添加块 pieChart.addSlice((Integer) map.get("statCount"), (String) map.get("statVar")); } //饼状图设置 pieChart.setColours("#d01f3c", "#356aa0", "#C79810"); pieChart.setText("使用者数量"); pieChart.setRadius(180); //饼图的半径 pieChart.setTooltip("#val# / #total#<br>#percent#"); //图表设置 Chart chart = new Chart("用户浏览器使用量分布"); chart.setXAxis(labels); chart.setYAxis(range); chart.addElements(pieChart);
生成的饼状图如下:
OFC接收一个JSON格式的文本用来填充Flash,Flash解析这段文本就生成了漂亮的图表。当然OFC的设置还有很多,可以做出非常炫的效果,这里就不深入研究了,当然就是set一些属性罢了。最后我们还是看一下JFreeChart的吧。
发表评论
-
VB操纵Excel
2010-10-07 22:42 1563全面控制 Excel 首先创建 Excel ... -
转:java处理报表工具比较
2010-10-07 10:30 934试共同条件: 数据总数 ... -
Birt Report(Eclipse)
2010-09-21 13:01 1020英文http://www.eclipse.org/birt/p ... -
amchart配置文件学习
2010-08-23 17:22 1217margins控制留白 background里的file ... -
amcharts教程
2010-08-23 09:50 10371Joomla使用过程中使用 ... -
jFreechart柱图常用设置
2010-06-29 14:39 1397<%@ page contentType=&q ... -
JFreeChart教程二
2010-06-29 10:45 1318package test; import java.aw ... -
JFreeChart教程
2010-06-28 16:37 1431《转》 JFreeChart教程( ... -
jxl
2010-06-09 21:58 1781现在正在做的项目中涉及大量的Excel文件导出导入操作,都是使 ... -
jaspereport学习资料
2009-05-08 16:10 14181)定制报表格式。 有二种方式,一种就是写jrxml文件, ... -
按照指定模板生成excel写的workbook
2009-05-07 13:40 1845一篇文章 Java操作Excel之 ... -
转载:excel出力
2009-03-27 17:13 865public void toexcel(HashMap has ...
相关推荐
Open Flash Chart,制作图表,柱状图,饼图,线点图,
Open Flash Chart(简称OFC),是一个开源的flash报表组件。我们不仅可以免费使用,而且还可以修改源码,来达到我们想要的效果。客户端在得到数据以后,在Flash Player中渲染出报表图。 附带PDF说明文档,是中文版...
这里面有两个java代码工程和 Open Flash Chart API。工程都是调试过的直接导入可用,代码都有详细的注释,如果你真是想用到报表之类的东西,肯定很不错了。 工程所需的jar 包 js文件都有,基本上很全。 第一步:...
本实例在IE6、IE7、IE8、Chrome、Firefox测试通过,在实际项目使用中,对可能出现的问题,尤其在IE6中无法显示flash图表,本人特撰写《Flash图表组件——使用Open Flash Chart 2.0的一些问题及解决办法》,具体访问...
open flash chart库,用于php开发中图表的制作,很炫的说~
Open Flash Chart,制作图表,柱状图,饼图,线点图,Open Flash Chart的使用说明及参数的设定。
Open Flash Chart 是一个用来生成Flash的图表的组件,它能够为你生成很多漂亮的Flash图表。
找了半天的open flash chart api没找到,最后终于找到了,希望对大家有用
由于最近公司项目中要用到图表,看到Open Flash Chart这个还不错,开源的,而且官方还附带了很多Demo,最重要的是支持很多的语言,只是这个东西一直很久没有更新,在网上找了很多资料,找到了Open Flash Chart社区...
open flash chart ,open flash chart ,flash 图表,open flash chart 1.9,java源代码
包含一些页面和demo。各类常用图形的简单实现例子。
完整的open flash chart 。绝对完整。绝对可以看效果。 完整的open flash chart 。绝对完整。绝对可以看效果。
Open flash chart2 flash 版本
OpenFlashChart是一个开源的报表制作组件,该组件能够自动生成一个好看的、动态的flash报表; 该组件使用flash展示报表能够很好的做到与浏览器进行集成,目前浏览器基本都能很好的支持flash; 该组件还支持一些简单...
open_flash_chart 开源 免费 图表控件 .net 附带demo dll等,怎么使用,大家慢慢揣摩吧- - 支持开源社区,支持开源项目
open flash chart 2 的swc文件包 可以在flex里面调用了. [Bindable] private var chart:String='{ "elements": [ { "type": "bar","alpha":0.8,"colour":"#663366", "values": [ 0 ] } ], "title": { "text": "...
RCP Open Flash Chart 在Eclipse RCP中使用Open Flash Chart的例子
jfreechart and open flash chart整理jfreechart and open flash chart整理
open-flash-chart2系列教程
Open Flash Chart java例子 eclipse 测试通过 直接下载解压导入eclipse就OK了。