`
zjnbshifox
  • 浏览: 316041 次
  • 性别: Icon_minigender_1
  • 来自: 宁波
社区版块
存档分类
最新评论

把Open Flash Chart引入到项目中,一天的成果

阅读更多
在网上看到Open Flash Chart的效果,口水啊,正好要做图表,就想试用看看,jFreeChart的效果实在太差,唉,可能我代码写的不好的缘故吧,责任应该不在jFreeChart,呵呵。

中间费了多少事情就不说了,下面说说步骤:

下载jofc2,下载地址是http://code.google.com/p/jofc2/,这个是google对OFC做扩展的包,以前有个ofc4j的项目,不过好像已经Freeze了。

当然要下载OFC,我下载的是http://www.ofc2dz.com/上的,貌似原生的ofc不支持json格式的数据,而这个支持。

把文件open-flash-chart.swf放到网站根目录,然后把swfobject.js放到js目录,把jofc2的jar放到WEB-INF/lib,注意需要把依赖包也加入,在jofc的lib目录下。

下面就可以开始了,页面上的代码(我这里加了jQuery的库):
$(document).ready(function(){
			$('#viewbtn').bind('click',function(){
				var url = 'CategoryRankImg.do?year=' + $('#year').val();
				swfobject.embedSWF("<s:url value="/open-flash-chart.swf"/>", "chart", "550", "300", "9.0.0", 
				"expressInstall.swf",
				{"data-file":url});
			});
		});

然后,在action中,即可用jofc2的类了:
private Chart flashChart;

public String draw(){
        PieChart c2 = new PieChart(); //饼图
        List<CompanyProperty> list = cppSvr.find(0,0); 

        for(CompanyProperty cpp : list){
            List results = bkSvr.findByNamedQuery("bk.qryCateRank", Integer.parseInt(year),cpp.getId());
            Long  cnt = (Long)results.get(0);
            c2.addSlice(cnt==null?0:cnt, cpp.getName()); //增加一块
        }    
        c2.setStartAngle(-90); //开始的角度
        c2.setColours(new String[] {
                "0x336699", "0x88AACC", "0x999933", "0x666699",
                "0xCC9933", "0x006666", "0x3399FF", "0x993300",
                "0xAAAA77", "0x666666", "0xFFCC66", "0x6699CC",
                "0x663366", "0x9999CC", "0xAAAAAA", "0x669999",
                "0xBBBB55", "0xCC6600", "0x9999FF", "0x0066CC",
                "0x99CCCC", "0x999999", "0xFFCC00", "0x009999",
                "0x99CC33", "0xFF9900", "0x999966", "0x66CCCC",
                "0x339966", "0xCCCC33"      });//饼图每块的颜色
        c2.setTooltip("#val#  /  #total#<br>占百分之 #percent#\n 角度 = #radius#"); //鼠标移动上去后提示内容
        flashChart = new Chart("企业性质排序"+year + "年"); //整个图的标题
        flashChart.addElements(c2); //把饼图加入到图表
        return Action.SUCCESS;
    }

其实在输出flashChart对象的时候,是输入一串json数据,但我不知道是不是和struts2的json plugin能够合起来,所以我自己写了一个ActionResult:
import java.io.PrintWriter; 

import javax.servlet.http.HttpServletResponse; 

import jofc2.model.Chart; 

import org.apache.struts2.ServletActionContext;
import org.apache.struts2.dispatcher.StrutsResultSupport; 

import com.opensymphony.xwork2.ActionInvocation; 

public class FlashChartResult  extends StrutsResultSupport{
    private static final String ENCODING = "UTF-8";
    /**
     * 
     */
    private static final long serialVersionUID = 4702848904993212381L; 

    @Override
    protected void doExecute(String str, ActionInvocation inv)throws Exception {
         Chart chart = (Chart)  inv.getStack().findValue("flashChart");
         HttpServletResponse response = ServletActionContext.getResponse();
         response.setContentType("application/json-rpc;charset=" + ENCODING);
         response.setHeader("Cache-Control", "no-cache");
         response.setHeader("Expires", "0");
         response.setHeader("Pragma", "No-cache");
         String json = chart.toString();
         response.setContentLength(json.getBytes(ENCODING).length);
         PrintWriter out = response.getWriter();
         out.print(json);
         out.flush();
         out.close();
    } 

}

struts的配置内容:
<result-type name="ofc" class="com.nbrc.market.helper.FlashChartResult"></result-type>

……

<action name="PositionCateRank" class="PositionRankAction" method="query">
            <result type="ofc"></result>
        </action>

这样就大功告成了。

最后还要讲几句,这个jofc2的库源代码有,但是javadoc里很少有东西,所以写代码可能不太方便,需要慢慢摸索,我一天只做了饼图和条状图,条状图的代码:
public String query(){
    if(marketId==null || marketId.equals("")){
        return Action.NONE;
    }
    MarketPlan p = mrpSvr.findById(marketId);
    planName = p.getTitle();
    BarChart chart   = new BarChart(BarChart.Style.GLASS);//设置条状图样式
    Map<String, Long> result = rriSvr.getPositionCateRankByPlan(marketId,10);
    long max = 0;//Y轴最大值
    XAxis x = new XAxis();//X轴
    for(String key:result.keySet()){
        PositionCategory pc = pctSvr.findById(key);
        Long tmp = result.get(key);
        Bar bar = new Bar(tmp,pc.getPositionTitle());       //条标题,显示在x轴上
        bar.setColour("0x336699"); //颜色
        bar.setTooltip(pc.getPositionTitle()+"#val# 个岗位");            //鼠标移动上去后的提示
        if(tmp>max){
            max = tmp;
        }            
        chart.addBars(bar); 
        x.addLabels(pc.getPositionTitle());        //x轴的文字
    }
    flashChart = new Chart();        
    flashChart.addElements(chart);    
    YAxis y = new YAxis();  //y轴
    y.setMax(max+10.0); //y轴最大值
    y.setSteps(max/10*1.0); //步进
    flashChart.setYAxis(y);
    flashChart.setXAxis(x);        
    return Action.SUCCESS;
}


最后还要注意,在传递参数的时候要把&符号转换成%26!切记切记,如
var url = 'SumCountChart.do?startTime=' + $('#startTime').val()+"%26endTime="+$('#endTime').val();
				 swfobject.embedSWF("<s:url value="/open-flash-chart.swf"/>", "chart", "550", "300", "9.0.0",	"expressInstall.swf",	{"data-file":url});


  • 大小: 80.5 KB
分享到:
评论
4 楼 zjnbshifox 2009-12-25  
cppSvr是访问数据库的东西负责把数据库里的数据取出来
3 楼 duanfei 2009-12-24  
List<CompanyProperty> list = cppSvr.find(0,0);
cppSvr这个是什么呀
2 楼 sparkrico 2009-12-22  
学习了
1 楼 childrentown 2009-11-24  
这文章写的,太清晰了!

相关推荐

    open flash chart api

    1. **引入库文件**:将Open Flash Chart 的SWF文件和JavaScript库文件引入到HTML页面中。 2. **构建数据**:根据需要创建XML或JSON格式的数据,包含图表的各种属性和数据点。 3. **创建图表对象**:在JavaScript中...

    Open Flash Chart 教程

    - **Flash图表库**:Open Flash Chart是一款基于Adobe Flash技术的图表生成库,它通过SWF文件在网页中呈现图表。 - **JavaScript API**:与Flash交互的桥梁,通过JavaScript设置图表参数并控制图表行为。 2. **...

    open flash chart库

    2. **引入库**:在PHP代码中引入Open Flash Chart的库文件,通常是`ofc_loader.php`。 3. **构建数据**:根据实际需求,创建PHP数组或对象,存储图表的数据和配置信息。 4. **生成图表**:调用Open Flash Chart的...

    Open Flash Chart所需文件

    Open Flash Chart是一款强大的开源Flash图表库,用于在Web应用程序中创建高质量、互动的图表。它提供了丰富的自定义选项,能够生成各种类型的图表,包括柱状图、饼图、线点图等,使得数据可视化变得更加简单易行。在...

    完整的open flash chart 。

    Open Flash Chart是一款强大的开源图表库,它使用Flash技术来创建美观、交互式的图表。这款工具在Web开发中尤其受欢迎,因为它允许开发者轻松地为网站添加数据可视化功能,而无需深入学习复杂的图形编程。以下是关于...

    开源flash图表--open flash chart

    1. **引入库文件**:在HTML页面中引入Open Flash Chart的SWF文件和JavaScript接口文件。 2. **创建图表对象**:通过JavaScript创建一个图表对象,并设置其基本属性,如宽度、高度、标题、颜色方案等。 3. **添加...

    open flash chart 实例1

    - 在Open Flash Chart中,JSON数据通常包含一系列的数组或对象,每个元素对应图表的一条数据,包括值、颜色、标签等信息。 4. **使用步骤** - 首先,在HTML文件中引入Open Flash Chart的SWF文件,并设置图表的...

    Open Flash Chart 报表插件相关

    Open Flash Chart是一款强大的开源图表生成插件,常用于创建交互式、美观的图表,尤其适合在Web应用程序中显示数据。这个插件支持多种编程语言,包括ASP.NET,使得开发者能够轻松地将动态数据转化为视觉上吸引人的...

    open-flash-chart-1[1].9.7.zip_flash chart tr_open flash chart

    《Open Flash Chart:一款强大的Flash图表库》 Open Flash Chart是一...对于熟悉各种编程语言的开发者来说,通过压缩包中的库文件,可以快速集成Open Flash Chart到他们的项目中,提升用户体验,使数据更生动、易懂。

    Open Flash Chart例子、中文版PDF说明文档、参数表

    Open Flash Chart(简称OFC),是一个开源的flash报表组件。我们不仅可以免费使用,而且还可以修改源码,来达到我们想要的效果。客户端在得到数据以后,在Flash Player中渲染出报表图。  附带PDF说明文档,是中文版...

    open-flash-chart

    标签“源码”表明我们可以获取到Open Flash Chart的源代码,这对于开发者来说是一个巨大的优势。源代码的开放性使得用户可以深入理解其工作原理,根据需求进行定制,甚至扩展其功能。同时,源码的可用性也意味着社区...

    Open Flash Chart的应用(java),就是很炫的报表了

    第一步:下载Open Flash Chart工具最新软件包,将其中open-flash-chart.swf放到网站根目录,swfobject.js放到js目录下。如果是java项目,则还需将jofc2-1.0-0.jar和xstream-1.3.1.jar两个jar包加入项目。(xstream-...

    Open Flash Chart Sample

    这篇博文链接提供了一个关于Open Flash Chart的示例,虽然描述部分为空,但我们可以从标题和标签中推测出本文可能涉及到如何使用Open Flash Chart的源码以及它作为工具在实际项目中的应用。 首先,让我们了解一下...

    Open Flash Chart java例子 eclipse 测试通过

    Open Flash Chart是一款强大的开源Flash图表库,用于在Web应用程序中创建动态、交互式的图表。它使用ActionScript编写,可以通过服务器端的数据与JavaScript进行通信,从而生成高质量的图表。本示例是关于如何在Java...

    最新版Open Flash Chart

    Open Flash Chart是一款强大的开源Flash图表组件,用于创建各种复杂且美观的数据可视化效果。这款软件的最新版本2.0带来了更多的功能和改进,旨在为开发者提供更便捷、灵活的方式来展示数据。下面将详细介绍Open ...

    RCP Open Flash Chart

    **RCP Open Flash Chart**是将开源的Flash图表库Open Flash Chart集成到Eclipse Rich Client Platform (RCP) 应用程序中的一个实践案例。Eclipse RCP是一种强大的框架,用于构建桌面应用程序,而Open Flash Chart则...

    Open Flash Chart2 相关资料

    由于最近公司项目中要用到图表,看到Open Flash Chart这个还不错,开源的,而且官方还附带了很多Demo,最重要的是支持很多的语言,只是这个东西一直很久没有更新,在网上找了很多资料,找到了Open Flash Chart社区...

    open flash chart 1.9 文档及源码

    通过阅读和运行这些示例,你可以更直观地了解Open Flash Chart的用法,并掌握如何在自己的项目中运用。 总结,Open Flash Chart 1.9是一个功能强大且易于使用的图表库,适用于需要高质量数据可视化的Web应用。通过...

    open flash chart 1.9.7

    Open Flash Chart 1.9.7 是一款高效且免费的网络报表设计工具,它以其强大的功能和易用性在开发者社区中赢得了广泛赞誉。这款软件的核心优势在于其快捷的性能和丰富的图表展示效果,使得即便是非专业程序员也能轻松...

Global site tag (gtag.js) - Google Analytics