Open Flash Chart使用

最近项目中需要用图表展示数据，在网上找了个开源的组件Open Flash Chart 。利用Flash前端展现，支持多种图表，柱状图、饼图、线状图等。
1. 准备工作：
(1) 下载OpenFlashChart组件
下载最新2.x版本，解压缩后将open-flash-chart.swf文件放到项目里
(2) 下载swfobject.js，该文件可以帮你轻松将Flash嵌入到页面
(3) 下载Java辅助包jofc2，该包帮助生成OpenFlashChart展示需要的数据。下载后将jofc2-1.0-0.jar和它依赖的包xstream-1.3.1.jar拷贝到项目lib下

2. 前台代码

<div id="chart"></div>
<script type="javascript">
var dataUrl = base.host + "/XXXAction.do?" 
        + "operate=XXX" 
        + escape('&') + "param1=" + value1
        + escape('&') + "param2=" + value2;
swfobject.embedSWF("http://127.0.0.1/App/chart/open-flash-chart.swf","chart","560","325","9.0.0","expressInstall.swf",{"data-file": dataUrl}
);
</script>

说明：
(1) 通过div指定图表显示位置，因此div的id名称作为参数传入Flash组件。
(2) data-file参数指定图表数据来源，这里是一个Action，Action负责生成图表展示需要的数据
(3) data-file的URL参数连接符&，需要转义escape('&')，否则&后面的参数会被忽略，参数无法传到Action。

3. Action代码

/** 柱形图 */
public ActionForward createBar(ActionMapping mapping,ActionForm form,HttpServletRequest request,HttpServletResponse response) {
    // 接收查询参数
    String param1 = request.getParameter("param1");
    String param2 = request.getParameter("param2");
    
    // 获取数据
    List listItem = find(param1,param2);
    
    // 创建柱状图
    BarChart chart = new BarChart(BarChart.Style.GLASS);
    chart.setFontSize(12);
    XAxis xAxis = new XAxis();
    for (int i = 0; i < listItem.size(); i++) {
        Item item = (Item) listItem.get(i);
        // 设置柱状图的一个柱对应的横坐标Label
        xAxis.addLabels(item.getName());
        // 创建柱状图的一个柱
        Bar bar = new Bar(item.getValue(),"0x336699");
        // 提示信息，换行用<br/>
        bar.setTooltip(item.getDesc());
        // 将柱添加到柱状图
        chart.addBars(bar);
    }
    
    // 创建图表
    Chart flashChart = new Chart("XXX图","font-size:15px;");
    // 将柱状图添加到图表
    flashChart.addElements(chart);
    // 设置横坐标
    flashChart.setXAxis(xAxis);
    // 设置纵坐标
    YAxis yAxis = new YAxis();
    yAxis.setMax(100); // 设置纵坐标最大值
    yAxis.setSteps(10); // 设置纵坐标刻度步长
    flashChart.setYAxis(yAxis);
    // 设置YLegend(不支持中文)
    Text yLegend = new Text("used time/s");
    yLegend.setStyle(Text.createStyle(15,"0x000000",Text.TEXT_ALIGN_LEFT));
    flashChart.setYLegend(yLegend);  

    try {
        // 设定输出流的编码为GBK
        response.setContentType("text/json;charset=UTF-8");
        response.getWriter().print(flashChart.toString());
    } catch (Exception e) {
        e.printStackTrace();
    }
    
    return null;
}

/** 饼图 */
public ActionForward createPie(ActionMapping mapping,param2);
    
    // 创建饼图
    PieChart pie = new PieChart();
    pie.setRadius(120);// 设置饼图半径大小
    pie.setStartAngle(100); //设置角度
    pie.setAnimate(true);
    pie.setFontSize(12); // 设置字体大小
    // 设置饼图各块的颜色
    pie.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" });
    // 设置提示信息
    pie.setTooltip( "办理用时：#val# 秒<br>占百分比：#percent#");
    // 创建饼图块
    NumberFormat format = DecimalFormat.getPercentInstance();
    for (int i = 0; i < listDetail.size(); i++) {
        Item item = (Item) listItem.get(i);
        // 创建饼图的一块
        Slice slice = new Slice(item.getValue(),item.getName());
        // 提示信息，换行用<br/>
        slice.setTip(item.getDesc());
        pie.addSlices(slice);
    }

    // 创建图表
    Chart flashChart = new Chart("XXX图","font-size:15px;" );
    flashChart.addElements(pie);
    
    try {
        // 设定输出流的编码为GBK
        response.setContentType("text/json;charset=UTF-8"); 
        response.getWriter().print(flashChart.toString());
    } catch (Exception e) {
        e.printStackTrace();
    }
    
    return null;
}

参考资料：

http://www.ibm.com/developerworks/cn/opensource/os-cn-jofc2/ http://hi.baidu.com/harbin_sakura/blog/item/74a5b5198bfb954e42a9ad5f.html