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

最新推荐文章于 2015-10-09 13:02:00 发布

原创最新推荐文章于 2015-10-09 13:02:00 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flash #jsf #servlet #attributes #parameters #string

本文介绍如何在JSF项目中使用OFC(openflashchart)和swfobject实现动态图表展示。通过servlet传递参数给Flash图表组件，并展示了bar/line图的参数设置实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

b.在需要显示flash的地方设置flash

<div id="flashChart">Here will show flash chart.</div>

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

本文来自优快云博客，转载请标明出处：http://blog.youkuaiyun.com/EvaTian/archive/2009/02/24/3932940.aspx