Open Flash Chart 2 for java 笔记

 相对与 V1 增加了使用Ajax动态加载数据，解决了V1中对参数传递，数据加载方面的很多不便，

 

1.下载所需资源：

官网下载jofc2.0.0.zip ,其中包含有 jofc2-1.0-0.jar,xstream-1.3.1.jar,两个.jar 档需要加入项目中，还包括了jofc2-1.0-0-src.zip源码以及html版jofc2 API，可以参考。

 open-flash-chart.swf,swfObject.js,json.jsAjax框架我使用的是jquery.

2.jsp代码

第一次进入页面时要给标签提供一个空数据的JSON格式数据，不然界面会很臭，^_^。

     1).要显示报表的位置<div id="my_chart"></div>

     2).首先加载导入需要用到的js文件jqery.js,swfOject.js,json.js

 

<script type="text/javascript" src="js/json/json2.js"></script>

<script type="text/javascript" src="js/swfobject.js"></script>

<script type="text/javascript">

swfobject.embedSWF("images/open-flash-chart.swf", "my_chart", "350", "200", "9.0.0");

 

var data = <%=request.getAttribute("data")%>；//进入的action需要组装一个格式串，

 

function ofc_ready() {

         alert('ofc_ready');

}

 

 

function open_flash_chart_data() {

         //alert( 'reading data' );

          return JSON.stringify(data);

}

 

 

function findSWF(movieName) {

          if (navigator.appName.indexOf("Microsoft")!= -1) {

                return window[movieName] ;

          } else {

               return document[movieName];

          }

}

 

//

 $(function(){

         $("#loadBTN").click(function(){

          $ajax(function(){

                   url:"",

                   dataType:"html",

                    type:"GET",

                    data:{arg0:"",arg1:""},

                    success:function(msg){

                           data = msg;//把data复制为查询后的结果

                           var tmp = findSWF("my_chart");

                            tmp.load(data);

                    }

          });

       });

 } );

 

</script>

 

3.action代码

 

这里的任务就是根据查询参数得到一个Collecton，官方例子是Vector<Number> v = new Vector<Number>();

jofc2.model.elements.*下有它支持的所有chart的model供使用。

public class actionClass{

 

      private String data;

 

     public String methodName(){

          Chart chart =  new Chart(new Date().toString())
         .addElements(new FilledBarChart()
         .setOutlineColour("#577261")
         .setColour("#E2D66A")
         .addValues(9, 8, 7, 6, 5, 4, 3, 2, 1))
         .setBackgroundColour("#FFFFFF");

         data = chart.toString();

         return SUCCESS;

   }

 

    public String getData(){

          return this.data;

   }
}

 

 

这里需要再新建一个chart.jsp,内容只有<%=request.getAttritbute("data")%>,SUCCESS的配置tartget指向它即可