Asp.net报表制作 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;}"}}

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立体柱状图

效果图：