OpenFlashChart2的使用

发布时间：2020-12-15 20:11:45 所属栏目：百科来源：网络整理

导读：OpenFlashChart2的使用博客分类：统计报表 Open Flash Chart2是依据Open Flash Chart1.x完全重新构建的一个Flash图表绘制组件。与1.x版本最大不同之处在于把数据格式改成JSON，以实现一些更酷的功能。该版本全部采用Actionscript3开发,Adobe Flex编译。一

OpenFlashChart2的使用

博客分类：

统计报表

Open Flash Chart2是依据Open Flash Chart1.x完全重新构建的一个Flash图表绘制组件。与1.x版本最大不同之处在于把数据格式改成JSON，以实现一些更酷的功能。该版本全部采用Actionscript3开发,Adobe Flex编译。

一、JSON数据格式如下：

Js代码

{?
? /* 图表标题 */?
? "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,?
??????? {?
??????????? "bottom":0,??
??????????? "top":7,??
??????????? "colour":"#A03030",??
??????????? "tip":"#top#<br>hello<br>#val#",?
??????????? "on-click":"#"?
??????? }?
????? ]?
??? },?
??? {?
????? "type":????? "bar",?
????? "alpha":???? 0.5,?
????? "colour":??? "#CC9933",?
????? "text":????? "图例二",?
????? "values" :?? [6,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;}"????? /* 本体样式 */?
??? }??
}?

{
  /* 图表标题 */
  "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,{
      		"bottom":0,"top":7,"colour":"#A03030","tip":"#top#<br>hello<br>#val#","on-click":"#"
      	}
      ]
    },{
      "type":      "bar","alpha":     0.5,"colour":    "#CC9933","text":      "图例二","values" :   [6,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页面内容参考如下：

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>?

<%@ 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格式的数据

三、数据加载方式有以下几种：

Js代码

//数据加载方法一：通过静态的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];????
? }????
}?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!