Open Flash Chart组件的使用
yaojxing 2010-11-10
简介 OpenFlashChart是一个开源的报表制作组件，该组件能够自动生成一个好看的、动态的flash报表；该组件使用flash展示报表能够很好的做到与浏览器进行集成，目前浏览器基本都能很好的支持flash；该组件还支持一些简单的JavaScript，提供在图形上对外部URL的链接；该组件非常小，java类一共不超过10个，可操作的API也很少，这样学习起来也非常容易上手。但可阅读的文档非常少，在与其它框架集成方面还有些问题。
主要配置项： openflashchart.jar:Open Flash Chart组件，工程开始时引入(lib目录下)。
open-flash-chart.swf:Flash文件接口，通过该文件来生成Flash文件，备页面调用(在web目录下，与WEB-INF目录并级)。
swfobject.js:Flash文件依赖的JS文件(在web目录下，与WEB-INF目录并级)。
Open Flash Chart主要有：HTML、JSP、Servlet等三种使用方式。其具体介绍参见附件中(在这里发表文章好像还有篇幅的限制...)。在附件中还提供了Demo和ofc的文档，供大家下载研究。
备注和补充说明：1、该组件支持java 1.5以上版本。
2、利用Servlet API输出数据时应该注意设置编码，防止出现乱码。
如：response.setCharacterEncoding("utf-8");//设置字符集，在项目中使用utf-8页面不会出现乱码。
3、在页面Object标签中如果要开启外链支持，需要设置allowScriptAccess=always(默认为sameDomain，即不允许跨域访问)允许突破同源策略访问外部链接或者执行Javascript代码。
4、在图形链接时如果指定的是调用Javascript代码，注意应该避免出现逗号，因为这个设置是作为字符串（可能包括多个图形的链接，同时以逗号分隔）传递给Flash接口的，它会对这个字符串利用逗号进行split，从而出现Javascript解析错误，无法正确执行Javascript代码。
5、OFC4J对OpenFlashChart的面向对象封装很好，但是目前版本不支持图形链接。
在项目使用过程中，发现在与公司开发框架的集成过程中出现一些问题：
1) 同样版本的IE，有的IE访问时出现JavaScript错误，而有的IE却很正常；
2) 所有图形输出之前全都设置相同的字符集，却出现在有的图形中出现乱码，而在有的图形中中文显示正常。而另一个项目组在开发桌面应用时使用的就是该组件，却一直很正常，没有出现大的问题。
该组件还不是很成熟，在我们开发报表，选择第三方组件时，应该谨慎。本人建议还是采用目前比较成熟的jFreeChart组件进行报表的开发。
SWFObject是一个用于在HTML中方面插入Adobe Flash媒体资源（*.swf文件）的独立、敏捷的JavaScript模块。该模块中的JavaScript脚本能够自动检测PC、Mac机器上各种主流浏览器对Flash插件的支持情况。它使得插入Flash媒体资源尽量简捷、安全。而且它是非常符合搜索引擎优化的原则的。此外，它能够避免您的HTML、XHTML中出现object、embed等非标准标签，从而符合更加标准。
JSON格式基本属性详解
数据文件必须是JSON格式.JSON对象的基本格式:
{}
把所有对象都编写在{}里面.让它看起来像下面JSON数据格式:
{
"title":{
"text":"Manydatalines",
"style":"{font-size:20px;color:#0000ff;font-family:Verdana;text-align:center;}"
}
}
Title(可选)
所有属性参数都可选的.
text:string,标题
style:string,CSS样式
例子:
{
"title":{
"text":"Yedeer.com.cndataline",
"style":"{font-size:20px;color:#000000;font-family:Verdana;text-align:center;}"
}
}
Y_Legend(可选)
所有属性参数都是可选.
text:string,Y轴标题
style:string,CSS样式
例子:
{
"y_legend":{
"text":"Yedeer.com.cnChart",
"style":"{color:#736AEF;font-size:12px;}"
}
}
XAxis(可选)
这个对象的属性是可选的,如果没有指定属性将使用默认的X轴属性.
所有可选属性:
stroke:number,X轴线的宽度
tick-height:number,X轴刻度线高度值
colour:string,线的颜色
offset:boolean,柱状图表中X轴的偏移最小值是0
grid-color:string,表格线颜色
3d:boolean,设置3D
steps:取决于tick-height属性
labels:arrayofstrings,每个X点的标签
例子:
{
"x_axis":{
"stroke":1,
"tick-height":10,
"colour":"#d000d0",
"grid-colour":"#00ff00",
"labels":["January,"February","March","April","May","June","July","August","Spetember"]
}
}
YAxis(可选)
应该属性和XAxis差不多(因为官方没给出,不知道是不是编漏了)
min:integer,Y轴最小值
max:integer,Y轴最大值
tick-length:number,Y轴刻度线长度
例子:
{
"y_axis":{
"stroke":4,
"tick-length":3,
"colour":"#d000d0",
"grid-colour":"#00ff00",
"offset":0,
"max":20
}
}
Elements元素
元素的属性是一个数组的通用对象
这些通用对象图表类型为(line,bar,scatter等等)
{
"elements":[
{
"type":"bar",
"alpha":0.5,
"colour":"#9933CC",
"text":"Pageviews",
"font-size":10,
"values":[9,6,7,9,5,7,6,9,7]
},
{
"type":"bar",
"alpha":0.5,
"colour":"#CC9933",
"text":"Pageviews2",
"font-size":10,
"values":[9,6,7,9,5,7,6,9,7]
}
]
}
Elements.bar
柱状图表必须包含在元素数组
type:string必须是’bar’
alpha:number,0(透明)和1(不透明)之间的值
colour:string,CSS颜色
text:string,图例说明文本
font-size:number,设置图例文本字体大小
values:arrayofnumber,柱子的高底
例子:
{
"elements":[
{
"type":"bar",
"alpha":0.5,
"colour":"#9933CC",
"text":"Pageviews",
"font-size":10,
"values":[9,6,7,9,5,7,6,9,7]
}
]
}
Elements.pie
圆饼图表,必须包含在元素数据组里
type:string,必须是’pie’
start-angle:number,第一个切片角度
colours:arrayofstring,CSS颜色
alpha:number,0(透明)和1(不透明)之间的值
stroke:number,切片外边线宽
animate:boolean,切片图表动画
values:arrayofobjects,每个切片值或者切片对象与值
例子:
{
"elements":[
{
"type":"pie",
"start-angle":180,
"colours":["#d01f3c","#356aa0","#C79810","#73880A","#D15600","#6BBA70"],
"alpha":0.6,
"stroke":2,
"animate":1,
"values":[0,2,{"value":0,"text":"zero"},2,6]
}
]
}
Elements.hbar
横状图表
values:arrayofobjects每个值含有"right"和"left"可选值
例子:
{
"elements":[
{
"type":"hbar",
"colour":"#9933CC",
"text":"Pageviews",
"font-size":10,
"values":[{"right":10},{"right":15},{"left":13,"right":17}]
}
]
}
Elements.line_dot
线形图表
values:arrayofnumber一个数组集合
例子:
{
"elements":[
{
"type":"line_dot",
"colour":"#736AFF",
"text":"Avg.waveheight(cm)",
"font-size":10,
"width":2,
"dot-size":4,
"values":[1.5,1.69,1.88,2.06,2.21,2.34,null,2.35,2.23,2.08]
}
]
}
Elements.line*
注意:这是一个简单定义3种不同线形类型的图表(不明白的属性,请向上温习一下)
例子:
{
"title":{
"text":"Manydatalines",
"style":"{font-size:30px;}"
},"y_legend":{
"text":"OpenFlashChart",
"style":"{font-size:12px;color:#736AFF;}"
},"elements":[
{
"type":"line",
"colour":"#9933CC",
"text":"Pageviews",
"width":2,
"font-size":10,
"dot-size":6,
"values":[15,18,19,14,17,18,15,18,17]
},
{
"type":"line_dot",
"colour":"#CC3399",
"width":2,
"text":"Downloads",
"font-size":10,
"dot-size":5,
"values":[10,12,14,9,12,13,10,13,12]
},
{
"type":"line_hollow",
"colour":"#80a033",
"width":2,
"text":"Bounces",
"font-size":10,
"dot-size":6,
"values":[5,7,9,7,4,6,1,2,5]
}
],"y_axis":{
"max":20
},"x_axis":{
"steps":2,
"labels":["January","February","March","April","May","June","July","August","September"]
}
}
例子:
这是一个简单的横状图表的JSON对象内容(不明白的属性请向上温习)
{
"title":{
"text":"HBarMapXvalues",
"style":"{font-size:20px;font-family:Verdana;text-align:center;}"
},"elements":[
{
"type":"hbar",
"colour":"#9933CC",
"text":"Pageviews",
"font-size":10,
"values":[{"right":10},{"right":15},{"left":13,"right":17}]
}
],
"x_axis":{
"min":0,
"max":20,
"offset":0,
"labels":["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v"]
},
"y_axis":{
"stroke":14,
"tick-length":30,
"colour":"#d09090",
"grid-colour":"#00ff00",
"offset":1,
"labels":["slashdot.org","digg.com","reddit.com"]
}
}
