一、什么是OFC(open flash chart)?
Open flash chart(简称ofc),是一个开源的flash报表组件。我们不仅可以免费使用,而且还可以修改源码,来达到我们想要的效果。客户端在得到数据以后,在FlashPlayer中渲染出报表图。
二、什么是swfobject?
swfobject是一个js组件,主要是为了方便在html中嵌入flash。一个最大的好处是把flash嵌入ie的时候,不会出现“单击激活此控件”的情况。本文主要是介绍在JSF工程中如何用servlet来使用swfobject2.0(即由servlet来给flash传参)。
三、swfobject的安装与使用
1.在官网上下载swfobject2.0,将swfobject.js(提供操作flash的方法)与open-flash-chart.swf(用于输出flash图像)放到web工程的根目录下(例如,FlashChartProject/WebContent/shared/js/swfobject.js和
FlashChartProject/WebContent/shared/flash/open-flash-chart.swf)。
2.在web.xml中设置servlet(这里设置了一个名为FlashServlet的类来做servlet的工作)
<servlet>
<description>
for showing flash chart
</description>
<servlet-name>FlashServlet</servlet-name>
<servlet-class>
com.reports.web.service.FlashServlet
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>FlashServlet</servlet-name>
<url-pattern>/reports_flashChart.do</url-pattern>
</servlet-mapping>
3.在需要嵌入flash的页面中的设置(这里用的是swfobject2.0的动态方法来嵌入flash的内容)
a.首先要在html的head处引入
<script type="text/javascript" src="shared/js/swfobject/swfobject.js"></script><!-- ** SWFObject ** -->
b.在需要显示flash的地方设置flash
<div id="flashChart">Here will show flash chart.</div>
<script type="text/javascript">
var flashvars = {};
flashvars.data = "reports_flashChart.do%3FParentCategory%3D{dashboardNav.parentCt}%26Category%3D#{ct}";//这里是url的encode的形式,为了可以准确的将url中的参数传给servlet
var params = {};
params.wmode = "transparent";
var attributes = {};
swfobject.embedSWF("shared/flash/open-flash-chart.swf", "flashChart", "250", "250", "8.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
4.在servlet中设置参数(flash chart中的参数是字符串形式的)
public class DashboardServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
// ** Load Parameters
String pCategoryParam = request.getParameter("ParentCategory");
String categoryParam = request.getParameter("Category");
subValuePercent="1,2,3,4,5";
subPieLadels="label1,label2,label3,label4,label5";
StringBuffer data = new StringBuffer();//用StringBuffer来存储flash参数
data.append("&pie=60,#000000,{font-size:10px;color:#000000}& /n");
data.append("&colours=#d01f3c,#356aa0,#C79810& /n");
data.append("&bg_colour=#DFE8F6& /n");
data.append("&values=" + subValuePercent + "& /n");
data.append("&pie_labels=" + subPieLadels + "& /n");
data.append("&tool_tip=#x_label#<br>#val#%25& /n");
response.getWriter().write(data.toString());//输出图像(data中设置的是pie图的参数)
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws java.io.IOException, ServletException {
doGet(request, response);
}
}
四、bar/line图的参数设置形式举例
url返回渲染chart所需的参数, 比如返回如下字符串:
&title=Many+data+lines,{font-size: 20px; color: #736AFF}&
&x_label_style=10,0x000000,0,2&
&x_axis_steps=1&
&y_legend=Open Flash Chart,12,#736AFF&
&y_ticks=5,10,4&
&line=2,0x9933CC,Page views,10&
&line_dot_2=3,0xCC3399,Downloads,10,5&
&line_hollow_3=2,0x80a033,Bounces,10,4&
&values=19,14,16,18,18,16,18,14,14,16,16,15&
&values_2=9,12,13,13,13,10,10,12,9,11,11,12&
&values_3=6,7,5,1,2,4,4,6,4,3,5,3&
&x_labels=January,February,March,April,May,June,July,August,Spetember,October,N
ovember,December&
&y_min=0&
&y_max=20&
五、备注
swfobject2.0官方文档:http://farthinker.cn/documents/swfobject-2-documentation/#6
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/EvaTian/archive/2009/02/24/3932940.aspx