Open Flash Chart在JSF工程中的安装与使用（swfobject2.0）

一、什么是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