OpenFlashChart C#flash图形控件的使用


本文示例源代码或素材下载

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

  效果图:

  



相关阅读:
JQery 渐变图片导航效果代码 漂亮
PHP支持多种格式图片上传(支持jpg、png、gif)
WEB 浏览器兼容 推荐收藏
有用的SQL语句(删除重复记录,收缩日志)
ASP操作XML文件的主要方法和实现
通过SQL Server的位运算功能巧妙解决多选查询方法
php文本操作方法集合比较
js+json用表格实现简单网站左侧导航
asp根据表单自动生成sql语句的函数
网页设计中总结的几个有用的JS特效代码
javascript 可控式透明特效实现代码
div css nowrap无换行
asp.net UpdaeProgress的简单用法
jquery的颜色选择插件实例代码
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4