OpenFlashChart C#flash图形控件的使用
2010-09-14 13:41:52 来源:WEB开发网本文示例源代码或素材下载
OpenFlashChart简介
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;}"}}
JSON简介
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立体柱状图 |
效果图:
其他图表控件
微软图表控件MsChart使用初探
http://tech.ddvip.com/2008-11/122640479791375.html
Tags:OpenFlashChart flash 图形
编辑录入:爽爽 [复制链接] [打 印]- ››flash文件的压缩方法(swf文件压缩瘦身)
- ››图形化管理MYSQL数据库的工具 SQLyog 8.6.2 发布
- ››Flash鼠绘教程:临摹徐悲鸿的骏马图
- ››Flash实例:AS3制作茶杯震动动画
- ››Flash AS 3.0实例教程:Main类打造发散效果
- ››Flash cs3仿真艺术设计3.6:运用遮罩打造焦点效果...
- ››Flash cs3仿真艺术设计4.1:阴影的基本运用
- ››Flash CS4教程:3d工具实例和骨骼工具
- ››flash加载外部文本文件的3种方法
- ››flash在有限的页面内制作大的地图
- ››Flash教程:AS代码制作计时器方法
- ››Flash AS教程:propertydata问题解决
更多精彩
赞助商链接