開源Flash圖表組件：Open Flash Chart 2
Open Flash Chart2是依據Open Flash Chart1.x完全重新構建的一個Flash圖表繪制組件。與1.x版本最大不同之處在于把數據格式改成JSON，以實現一些更酷的功能。該版本全部采用Actionscript3開發,Adobe Flex編譯。
一、JSON數據格式如下：
{
/* 圖表標題 */
"title":{
"text": "標題",
"style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
},
/* X軸標題 */
"x_legend":{
"text": "X軸標題",
"style": "{font-size: 12px; color:#736AFF;}"
},
/* Y軸標題 */
"y_legend":{
"text": "Y軸標題",
"style": "{color: #736AFF; font-size: 12px;}"
},
"is_decimal_separator_comma": 0, /* (0/1)，是否用逗號替換小數點 */
"is_fixed_num_decimals_forced": 1, /* (0/1)，是否強制小數點后面的位數 */
"num_decimals":3, /* 精度，即小數點后面的位數，需要配合上面參數一起使用 */
"is_thousand_separator_disabled": 0, /* (0/1)，是否使用千位分隔符 */
"x_axis":{
"stroke":1, /* X軸的粗細 */
"tick_height": 10, /* X軸刻度的長度 */
"colour":"#d000d0", /* 顏色 */
"grid_colour":"#00ff00", /* 網格線的顏色 */
"offset": 1, /* (0/1), 是否根據數據圖形和標簽的寬度進行延展 */
"3d": 0, /* 顯示3D */
"steps": 0.5, /* 刻度間隔 */
/*"min": 0,
"max": 8,*/
"labels": {
"labels": ["一月","二月","三月","四月","五月","六月","七月","八月",
{"text":"九月", "visible":true, "colour":"ff0000", "rotate":-60}
]
}
},
"y_axis":{
"stroke": 4,
"tick_length": 3,
"colour": "#d000d0",
"grid_colour": "#00ff00",
"offset": 0,
"max": 20,
"steps": 2
},
"elements":[
{
"type": "bar", /* 可選值有bar，line，pie等 */
"alpha": 0.5,
"colour": "#9933CC",
"text": "圖例一",
"font-size": 10,
"values" : [9,6,7,9,5,7,6,9,
{
"bottom":0,
"top":7,
"colour":"#A03030",
"tip":"#top#<br>hello<br>#val#",
"on-click":"#"
}
]
},
{
"type": "bar",
"alpha": 0.5,
"colour": "#CC9933",
"text": "圖例二",
"font-size": 10,
"values" : [6,7,9,5,7,6,9,7,3]
}
],
"tooltip":{
"shadow": false, /* 提示框影子 */
"stroke": 2, /* 邊框粗細 */
"rounded": 1, /* 邊角圓滑程度 */
"colour":"#00d000", /* 邊框顏色 */
"background":"#d0d0ff", /* 背景顏色 */
"title":"{font-size: 18px; color: #000000; font-weight:bold;}", /* 標題樣式 */
"body":"{font-size: 10px; color: #000000;}" /* 本體樣式 */
}
}
二、HTML頁面內容參考如下：
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Open Flash Chart</title>
<script type="text/javascript" src="js/json/json2.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
</head>
<body>
<div id="my_chart"></div>
<script type="text/javascript">
swfobject.embedSWF(
"open-flash-chart.swf",
"my_chart",
"650",
"300",
"9.0.0",
"expressInstall.swf",
{"data-file":"bar.txt"},
{"wmode":"transparent"}
);
</script>
</body>
</html> bar.txt文件的內容就是json格式的數據
三、數據加載方式有以下幾種：
//數據加載方法一：通過靜態的json格式字符串數據
//ofc2默認會調用 open_flash_chart_data 該方法，方法返回json格式的字符串數據
function open_flash_chart_data(){
var data = { }; //json對象
return JSON.stringify(data);
}
//數據加載方法二：通過data-file屬性調用action
//{"data-file":"dataServlet?r=<%=new Random().nextInt()%>"},
//數據加載方法三：通過data-file屬性調用json格式的數據文件
//{"data-file":"bar.txt"},
//數據加載方法四：通過Ajax調用action
function open_flash_chart_data(){
jQuery.post("dataServlet", function(data){
var tmp = findSWF("my_chart");
tmp.load(JSON.stringify(data));
});
var emptyData = {
"title": {"text": ""},
"elements": []
};
return JSON.stringify(emptyData);
}
function findSWF(movieName) {
if (navigator.appName.indexOf("Microsoft")!= -1) {
return window[movieName];
} else {
return document[movieName];
}
} 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！