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指向它即可