把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});

评论

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  

这文章写的，太清晰了！