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];
}
}
分享到：
相关推荐
.NET openflashchart2及js文件实例源码
1.动画可交互的图表 2.简单但强大的Javascript集成 3.无需安装 4.简单易用 5.与服务器端语言独立（或说无关） 6.减少服务器端负荷 7.多种图表类型支持 8.完全免费
NULL 博文链接：https://web322-szb.iteye.com/blog/1603733
openflashchart不知道怎么回事 都是php的demo 收集这些demo花了很多时间这里是最全的flex版本的demo 希望跟我一样的朋友能用上 注：此压缩文件为项目文件直接压缩 包含ofc2library.swc 用Pie的朋友注意下 tip显示...
.............................................................................................................
open flash chart 2 的swc文件包 可以在flex里面调用了. [Bindable] private var chart:String='{ "elements": [ { "type": "bar","alpha":0.8,"colour":"#663366", "values": [ 0 ] } ], "title": { "text": "...
包含了3个文件： 1.Graph-doc，绘图的API说明 2.OpenFlashChartDemo,代码使用示例，java工程 3.OpenFlashChart组件的使用.doc，对关键节点进行注解，对代码工程的文档说明 -----代码搬运工
1.openflashchart是一种比较实用的图标呈现插件，而且是开源的，网址http://teethgrinder.co.uk/open-flash-chart/ 2.FlashChart类 复制代码 代码如下: FlashChart Class Code class FlashChart { private $id; ...
如果是java项目，则还需将jofc2-1.0-0.jar和xstream-1.3.1.jar两个jar包加入项目。（xstream-1.3.1.jar这个包似乎不需要）； 注： Js里应用非常简单，有三种方式：直接加载json文件、通过url方式获取json格式数据、...
基于Java开源图表工具OpenFlashChart生成蜡烛图（俗称K线图）。使用OFC2的Struts自定义插件返回方式。图表数据来自webapps中的data*.json。
OpenFlashChart是一款开源的以Flash和Javascript为技术基础的免费图表，用它能创建一些很有效果的报表分析图表。 压缩包中所包含文件： 1.Open Flash Chart2官网最后版本； 2.Open Flash Chart2非官方后续开发最新...
NULL 博文链接：https://ywxowen999.iteye.com/blog/1683639
1、gzip的下载安装 一键开启...IIS启用Gzip压缩造成OpenFlashChart不能正常显示问题及解决方法 在.NET中使用OpenFlashChart控件显示图表时，谁会想到图表显示正常与否竟然和服务器IIS是否启用了Gzip压缩有关呢？ 两个站