OpenFlashChart2的使用
鲜于凯康
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];
}
}
类似资料：