开源Flash图表组件：Open Flash Chart 2
jopen
10年前
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]; } }