Open Flash Chart demo

步驟：
下載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});

[img]http://dl.iteye.com/upload/attachment/511773/a982f04a-dd38-3bde-84d7-729c26bc647a.png[/img]