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参数对照表

　　效果图：