OpenFlashChart组件的使用.doc

Open Flash Chart组件的使用简介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.htmlFlash的数据路径需要在以下两个地方设置：/设置flash的大小和数据的来源(来源于data.txt文件)/设置flash的大小和数据的来源(来源于data.txt文件)JSP方式：数据文件：chart-data-line.jsp%int max = 50;List data = new ArrayList();/List data2 = new ArrayList();/List data3 = new ArrayList();List links = new ArrayList();/生成随机数据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 2007g.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 valueList labels = new ArrayList();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);/设置步长%/输出图形chart-data-pie.jsp%/创建图形对象Graph g = new Graph();List data = new ArrayList();List labels = new ArrayList();List links = new ArrayList();List colors = new ArrayList();/生成随机数据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# ,元);%/输出图形显示文件：chart.jspobject classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000codebase=/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0width= height= id=ie_chartalign=middleparam name=movievalue=/open-flash-chart.swf?width=500&height=250&data=/chart-data-line.jsp /设置数据文件url/设置数据文件urlembed src=/open-flash-chart.swf?data=/chart-data-line.jsp quality=highbgcolor=#FFFFFF width= height=name=chart align=middle allowScriptAccess=alwaystype=application/x-shockwave-flashpluginspage=/go/getflashplayerid=chart /    object classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000codebase=/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0width= height= id=ie_chartalign=middleparam name=movievalue=/open-flash-chart.swf?width=500&height=250&data=/chart-data-pie.jsp /设置数据文件url/设置数据文件urlembed src=/open-flash-chart.swf?data=/chart-data-pie.jsp quality=highbgcolor=#FFFFFF width= height=name=chart align=middle allowScriptAccess=alwaystype=application/x-shockwave-flashpluginspage=/go/getflashplayerid=chart /Servlet方式：数据文件：ChartRenderServlet.javapublic 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 data = new ArrayList();List data2 = new ArrayList();/生成随机数据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 valueList labels = new ArrayList();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 maxg.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.jspobject classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000codebase=/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0width= height= id=ie_chartalign=middle/设置数据来源urlparam name=movievalue=/open-flash-chart.swf?width=&height=&data=/ChartRenderServlet /设置数据来源urlembed src=/open-flash-chart.swf?data=/ChartRenderServlet quality=highbgcolor=#FFFFFF width= height=name=chart align=middle allowScriptAccess=sameDomaintype=application/x-shockwave-flashpluginspage=/go/getflashplayerid=chart /第三方组件：OFC4J该组件对OpenFlashChart实现了简单的包装，提供了丰富多样的展现形式。OPFC4J站点：h