简介 OpenFlashChart是一个开源的报表制作组件,该组件能够自动生成一个好看的、动态的flash报表;该组件使用flash展示报表能够很好的做到与浏览器进行集成,目前浏览器基本都能很好的支持flash;该组件还支持一些简单的JavaScript,提供在图形上对外部URL的链接;该组件非常小,java类一共不超过10个,可操作的API也很少,这样学习起来也非常容易上手。但可阅读的文档非常少,在与其它框架集成方面还有些问题。 主要配置项: openflashchart.jar:Open Flash Chart组件,工程开始时引入(lib目录下)。 open-flash-chart.swf:Flash文件接口,通过该文件来生成Flash文件,备页面调用(在web目录下,与WEB-INF目录并级)。 swfobject.js:Flash文件依赖的JS文件(在web目录下,与WEB-INF目录并级)。 Open Flash Chart主要有:HTML、JSP、Servlet等三种使用方式。分别介绍如下: HTML方式: 数据文件:data.txt 以下数据都是以&结尾: //设置图形标题、颜色 &title=AAA,{font-size:30px; color:#000000}& //设置饼图的属性 &pie=60,#9933CC,{display: n-one; font-size:16px; color: #ff0000;},false,3& &values=0,2,0,2,6& //设置各块图形的颜色 &X colours=#d01f3c,#356aa0,#C79810,#73880A,#D15600,#6BBA70& &colours=#d01f3c,#356aa0,#C79810& //设置各块图形的onclick链接 &links=javascript:alert('9'),javascript:alert('6'),javascript:alert('7'),javascript:alert('9'),javascript:alert('5'),javascript:alert('7'),javascript:alert('6'),javascript:alert('9'),javascript:alert('9')& //设置饼图各块的标签 &pie_labels=zero,two,zero,two (2),six& //设置各块图形单位 &tool_tip=Value: #val#%& 显示文件:chart.html Flash的数据路径需要在以下两个地方设置: <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="500" height="250" //设置flash的大小 id="ie_chart" align="middle"> <param name="allowScriptAccess" value="always" /> <param name="movie" value="open-flash-chart.swf?width=500&height=250&data=data.txt" /> //设置flash的大小和数据的来源(来源于data.txt文件) <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> //设置flash的大小和数据的来源(来源于data.txt文件) <embed src="open-flash-chart.swf?data=data.txt" mce_src="open-flash-chart.swf?data=data.txt" quality="high" bgcolor="#FFFFFF" width="500" height="250" name="chart" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" id="chart" /> </object> JSP方式: 数据文件: chart-data-line.jsp <body> <% int max = 50; List<String> data = new ArrayList<String>(); //List<String> data2 = new ArrayList<String>(); //List<String> data3 = new ArrayList<String>(); List<String> links = new ArrayList<String>(); //生成随机数据 for(int i = 0; i < 12; i++) { data.add(Double.toString(Math.random() * max)); //data2.add(Double.toString(Math.random() * max / 2)); //data3.add(Double.toString(Math.random() * max / 3)); links.add("javascript:alert('hello, i am no."+(i+1)+"')"); } //创建图形对象 Graph g = new Graph(); //设置标题 // Spoon sales, March 2007 g.title("统计图-来自JSP", "{font-size: 25px;}"); //将数据对象添加到图形对象上 g.set_data(data); //g.set_data(data2); //g.set_data(data3); //设置图例 g.line(2, "0x9933CC", "Page views", 10, 2); //g.line_hollow("2", "4", "0x80a033", "Bounces", "10"); //g.line_dot("5", "5", "0x006699"); //将链接对象添加到图形对象上 g.set_links(links); //设置X轴座标 // label each point with its value List<String> labels = new ArrayList<String>(); labels.add("一月"); labels.add("二月"); labels.add("三月"); labels.add("四月"); labels.add("五月"); labels.add("六月"); labels.add("七月"); labels.add("八月"); labels.add("九月"); labels.add("十月"); labels.add("十一月"); labels.add("十二月"); //设置X轴属性 g.set_x_labels(labels); g.set_x_label_style("12", "#FF0000", 0, 2, ""); g.set_x_legend("Open Flash Chart Demo", 12, "#736AFF"); // set the Y max //设置y轴属性 g.set_y_max(60);//设置最大长度 // label every 20 (0,20,40,60) g.y_label_steps(6);//设置步长 %> <%=g.render()%>//输出图形 </body> chart-data-pie.jsp <body> <% //创建图形对象 Graph g = new Graph(); List<String> data = new ArrayList<String>(); List<String> labels = new ArrayList<String>(); List<String> links = new ArrayList<String>(); List<String> colors = new ArrayList<String>(); //生成随机数据 int max = 100; for(int i = 0; i < 3; i++) { double tmp = Math.random() * max; DecimalFormat format = new DecimalFormat("#.00"); data.add(format.format(tmp));//设置格式化的数据 labels.add("商品" + (i+1));//设置标签 links.add("chart3.jsp?id=" + i);//设置各块图形的链接 } //设置标题 g.title("统计图-来自JSP", "{font-size: 26px;}"); //设置饼图属性 g.pie(60, "#505050", "{font-size: 12px; color: #404040;}"); g.pie_values(data, labels, links); //设置各图形的颜色 colors.add("#d01f3c"); colors.add("#356aa0"); colors.add("#C79810"); g.pie_slice_colours(colors); //设置单位 g.set_tool_tip("#val# ,元<br>"); %> <%=g.render()%>//输出图形 </body> 显示文件:chart.jsp <body> <%//取URL String url = request.getProtocol().substring(0, 4).toLowerCase() + "://" + request.getRemoteHost() + ":" + request.getLocalPort() + request.getContextPath(); String width = "500"; String height = "350"; %> <br/> <center> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="<%=width%>" height="<%=height%>" id="ie_chart" align="middle"> <param name="allowScriptAccess" value="always" /> <param name="movie" value="<%=url%>/open-flash-chart.swf?width=500&height=250&data=<%=url%>/chart-data-line.jsp" />//设置数据文件url <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> //设置数据文件url <embed src="<%=url%>/open-flash-chart.swf?data=<%=url%>/chart-data-line.jsp" quality="high" bgcolor="#FFFFFF" width="<%=width%>" height="<%=height%>" name="chart" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" id="chart" /> </object> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="<%=width%>" height="<%=height%>" id="ie_chart" align="middle"> <param name="allowScriptAccess" value="always" /> <param name="movie" value="<%=url%>/open-flash-chart.swf?width=500&height=250&data=<%=url%>/chart-data-pie.jsp" />//设置数据文件url <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> //设置数据文件url <embed src="<%=url%>/open-flash-chart.swf?data=<%=url%>/chart-data-pie.jsp" quality="high" bgcolor="#FFFFFF" width="<%=width%>" height="<%=height%>" name="chart" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" id="chart" /> </object> </center> </body> Servlet方式: 数据文件:ChartRenderServlet.java public class ChartRenderServlet extends HttpServlet { private static final long serialVersionUID = -7442075906889560871L; public void init(){ System.out.println("init"); } //flash取数据时,走的是doGet方法 public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { this.doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { int max = 50; List<String> data = new ArrayList<String>(); List<String> data2 = new ArrayList<String>(); //生成随机数据 for(int i = 0; i < 12; i++) { data.add(Double.toString(Math.random() * max)); data2.add(Double.toString(Math.random() * max / 2)); } //创建图形对象 Graph g = new Graph(); // Spoon sales, March 2007 //设置标题 g.title("Servlet", "{font-size: 25px;}"); g.set_data(data); g.set_data(data2); //设置折线属性 g.line(2, "0x9933CC", "Page views", 10, 2); g.line_hollow("2", "4", "0x80a033", "Bounces", "10"); //设置标签 // label each point with its value List<String> labels = new ArrayList<String>(); labels.add("a"); labels.add("b"); labels.add("c"); labels.add("d"); labels.add("e"); labels.add("f"); labels.add("g"); labels.add("h"); labels.add("i"); labels.add("j"); labels.add("k"); labels.add("l"); //设置X轴属性 g.set_x_labels(labels); g.set_x_label_style("12", "#FF0000", 0, 2, ""); g.set_x_legend("Open Flash Chart Demo", 12, "#736AFF"); //设置Y轴属性 // set the Y max g.set_y_max(60); // label every 20 (0,20,40,60) g.y_label_steps(6);//设置步长 response.setCharacterEncoding("utf-8");//设置字符集,在项目中使用utf-8页面不会出现乱码 response.getWriter().write(g.render());//输出图形 } } 显示文件:chart2.jsp <body> <% String url = request.getProtocol().substring(0, 4).toLowerCase() + "://" + request.getRemoteHost() + ":" + request.getLocalPort() + request.getContextPath(); int width = 500; int height = 250; %> <br/> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="<%=width%>" height="<%=height%>" id="ie_chart" align="middle"> <!-- 如果你要让图标支持JS或者外部连接,你需要把他设置成“always”,默认sameDomain,不支持这些 --> <param name="allowScriptAccess" value="sameDomain" /> //设置数据来源url <param name="movie" value="<%=url%>/open-flash-chart.swf?width=<%=width%>&height=<%=height%>&data=<%=url%>/ChartRenderServlet" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> //设置数据来源url <embed src="<%=url%>/open-flash-chart.swf?data=<%=url%>/ChartRenderServlet" quality="high" bgcolor="#FFFFFF" width="<%=width%>" height="<%=height%>" name="chart" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" id="chart" /> </object> </body> 第三方组件:OFC4J 该组件对OpenFlashChart实现了简单的包装,提供了丰富多样的展现形式。 OPFC4J站点:http://code.google.com/p/ofc4j/ 备注和补充说明: 1、该组件支持java 1.5以上版本。 2、利用Servlet API输出数据时应该注意设置编码,防止出现乱码。 如:response.setCharacterEncoding("utf-8");//设置字符集,在项目中使用utf-8页面不会出现乱码。 3、在页面Object标签中如果要开启外链支持,需要设置allowScriptAccess=always(默认为sameDomain,即不允许跨域访问)允许突破同源策略访问外部链接或者执行Javascript代码。 4、在图形链接时如果指定的是调用Javascript代码,注意应该避免出现逗号,因为这个设置是作为字符串(可能包括多个图形的链接,同时以逗号分隔)传递给Flash接口的,它会对这个字符串利用逗号进行split,从而出现Javascript解析错误,无法正确执行Javascript代码。 5、OFC4J对OpenFlashChart的面向对象封装很好,但是目前版本不支持图形链接。 在项目使用过程中,发现在与公司开发框架的集成过程中出现一些问题: 1) 同样版本的IE,有的IE访问时出现JavaScript错误,而有的IE却很正常; 2) 所有图形输出之前全都设置相同的字符集,却出现在有的图形中出现乱码,而在有的图形中中文显示正常。而另一个项目组在开发桌面应用时使用的就是该组件,却一直很正常,没有出现大的问题。 该组件还不是很成熟,在我们开发报表,选择第三方组件时,应该谨慎。本人建议还是采用目前比较成熟的jFreeChart组件进行报表的开发。