OpenFlashChart是一款开源的以Flash和Javascript为技术基础的免费图表组件,用它能创建一些很有效果的报表分析图表。
最重要的是它是开源和免费的,该组件使用flash展示报表能够很好的做到与浏览器进行集成,目前浏览器基本都能很好的支持flash。
OpenFlashChart的基本使用
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "mychart", "550", "200", "9.0.0", "expressInstall.swf", {"data-file":"datafile/line.aspx"});
</script>
<div id="mychart"> </div>
从两方面进行详细讲解:脚本swfobject.js和参数{"data-file":"datafile/line.aspx"}。
用JavaScript嵌入你的SWF, swfobject.js使用简介
swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes)有5个必须的参数和4个可选的参数:
swfUrl(String,必须的)指定SWF的URL。
id(String,必须的)指定将会被Flash内容替换的HTML元素(包含你的替换内容)的id。
width(String,必须的)指定SWF的宽。
height(String,必须的)指定SWF的高。
version(String,必须的)指定你发布的SWF对应的Flash Player版本(格式为:major.minor.release)。
expressInstallSwfurl(String,可选的)指定express install SWF的URL并激活Adobe express install [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75 ]。
flashvars(String,可选的)用name:value对指定你的flashvars。
params(String,可选的)用name:value对指定你的嵌套object元素的params。
attributes(String,可选的)用name:value对指定object的属性。
注意:在不破坏参数顺序的情况下,你可以忽略可选参数。如果你不想使用一个可选参数,但是会使用后面的一个可选参数,你可以简单的传入false作为参数的值。对flashvars、 params和 attributes这些JavaScript对象来说,你也可以相应的传入一个空对象{}。
OpenFlashChart接收的数据文件格式详解
swfobject.embedSWF("open-flash-chart.swf", "mychart", "550", "200", "9.0.0", "expressInstall.swf", {"data-file":"datafile/ bar1.txt"});
通过参数{"data-file":"datafile/ bar1.txt"}{“名称”:“值”}来进行图表数据的接收来生成对应图形。
文件datafile/ bar1.txt内容格式:
{
"y_legend":{
"text": "Time of day",
"style": "{color: #736AFF;}"
},
"elements":[
{
"type": "line",
"colour": "#736AFF",
"text": "Avg. wave height (cm)",
"font-size": 10,
"width": 2,
"dot-size": 4,
"halo-size": 0,
"on-click":"test(9)",
"values" : [
1.5,1.69,1.88,2.06,2.21,2.34,
{"value":2.44,"colour":"#FF0000","tip":"monkies","on-click":"anchor_test"},
2.35,2.23,2.08]
}
],
"y_axis":{
"max": 3
},
"x_axis": {
"min": 5,
"max": 15
}
}
饼图:
{
"title":{"text":"Pie","style":"{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"},
"elements":[{"border":2,"alpha":0.6,"animate":false,"start-angle":0,"values":[2,3],"font-size":0,"fillalpha":0.35,"type":"pie"}],
"x_legend":{"text":"x-axis legend","style":"{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"}}
open-flash-chart参数对照表
元素/属性 |
形状或作用 |
参数1 |
参数2 |
参数3 |
参数4 |
参数5 |
参数6 |
title |
显示图表主题(最上方) |
主题名称 |
样式style |
||||
x_legend |
X坐标说明(最下方, 与X轴平行) |
说明信息 |
字体大小 |
字体颜色 |
|||
y_legend |
Y坐标说明(最左边, 与Y轴平行) |
说明信息 |
字体大小 |
字体颜色 |
|||
x_labels |
设置X轴坐标显示 |
||||||
y_label_size |
|||||||
x_label_style |
设置X轴样式 |
字体大小 |
字体颜色 |
角度(0:0度, 1:90度,2:45度) |
设置X轴线条间隔 |
X轴间隔线条颜色 |
|
y_label_style |
设置Y轴样式 |
字体大小 |
字体颜色 |
||||
x_ticks |
控制X轴坐标标记显示 |
X轴坐标标记长度 |
|||||
y_ticks |
控制Y轴坐标标记显示 |
Y轴坐标标记最小长度 |
Y轴坐标标记最大长度 |
将Y轴分割成几个段 |
|||
X_min |
设置X轴坐标最小值 |
X轴坐标最小值 |
|||||
x_max |
设置X轴坐标最大值 |
X轴坐标最大值 |
|||||
y_min |
设置Y轴坐标最小值 |
Y轴坐标最小值 |
|||||
y_max |
设置Y轴坐标最大值 |
Y轴坐标最大值 |
|||||
bg_colour |
设置背景颜色 |
||||||
inner_background |
设置坐标区域内部颜色 |
颜色1 |
颜色2(从颜色1渐变到颜色2) |
渐变角度 |
|||
bg_image |
设置背景图片 |
图片位置 |
|||||
bg_image_x |
设置图片横向位置 |
[left |center |right] |
|||||
bg_bg_image_y |
设置图片纵向位置 |
[top |middle |bottom] |
|||||
x_axis_colour |
设置X轴颜色 |
||||||
y_axis_colour |
设置Y轴颜色 |
||||||
x_axis_steps |
设置X轴线条间隔 |
||||||
x_axis_3d |
设置X轴3d效果的高度 |
||||||
x_grid_colour |
设置X轴线条颜色 |
||||||
y_grid_colour |
设置Y轴线条颜色 |
||||||
show_y2 |
设置Y轴右边也显示坐标 |
[true |false] |
|||||
y2_lines |
设置哪个图是根据右边Y坐标的值来显示 |
[可以有多个] |
|||||
y_format |
格式化Y轴显示(常与#val#等联合使用) |
||||||
values |
设置值 |
||||||
num_decimals |
格式化小数位数 |
||||||
is_fixed_num_decimals_forced |
是否强制格式化小数 |
[true |false] |
|||||
is_decimal_separator_comma |
是否使用小数分隔符 |
[true: , |false: . ](与千位分隔符相反) |
|||||
is_thousand_separator_disabled |
是否使用千位分隔符 |
[true |false] |
|||||
x_offset |
是否自动补偿以适应图的显示 |
[true |false] |
|||||
bar |
柱状图 |
透明度 |
颜色 |
名称#key# |
名称字体大小 |
||
bar_glass |
水晶柱状图 |
透明度 |
内部颜色 |
外框颜色 |
名称#key# |
名称字体大小 |
|
bar_fade |
渐变柱状图 |
透明度 |
颜色 |
名称#key# |
名称字体大小 |
||
bar_arrow |
带有箭头的柱状图 |
透明度 |
颜色 |
名称#key# |
名称字体大小 |
||
bar_3d |
3D立体柱状图 |
效果图: