转：Openflashchart笔记

Open Flash Chart 是通过读取JSON数据来绘图的，所以要生成Open Flash Chart的数据就要稍微了解一些JSON数据结构，所以下面的内容基本上就是JSON的结构介绍了，熟悉的就不用浪费宝贝的时间往下看了，直接飘过就好了。
和 XML 一样，JSON 也是基于纯文本的数据格式。由于 JSON 天生是为 JavaScript 准备的，因此，JSON 的数据格式非常简单，您可以用 JSON 传输一个简单的 String，Number，Boolean，也可以传输一个数组，或者一个复杂的 Object 对象。

JSON有以下这么几种数据结构（贴图直观）



















Open Flash Chart在了解了其原理后，使用起来很是简单，无非就是传递一组JSON数据给swf文件，然后再由swf在页面绘出图形，所以从官网(http://teethgrinder.co.uk/open-flash-chart-2/downloads.php)获取的必要的2个文件是 open-flash-chart.swf（flash接口文件，JSON数据就是传给它，然后由它生成图形） 和 swfobject.js （flash文件依赖的js文件），有了这2个文件只要给open-flash-chart.swf传递正确的数据结构，就能生成图形了：

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">

swfobject.embedSWF(
"open-flash-chart.swf", "my_chart",
"550", "400", "9.0.0", "expressInstall.swf",
{"data-file":"gallery/area-hollow.php"} );

</script>

JSON数据结构写在 data-files/bar-3d.txt 里，open-flash-chart.swf 读取这个文件根据里面的内容生成相应的图形，data-files/bar-3d.txt 是个官方的 data-files示例，还有很多类似的例子，基本上可以靠这些这个实验出 Open Flash Chart 所有的功能，这里data-files/bar-3d.txt 的文件内容如下：
{
"title":{
"text": "Many data lines",
"style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
},

"y_legend":{
"text": "Open Flash Chart",
"style": "{color: #736AFF; font-size: 12px;}"
},

"elements":[
{
"type": "bar_3d",
"alpha": 0.5,
"colour": "#9933CC",
"text--": "Page views",
"font-size--": 10,
"values" : [9,6,7,9,5,{"top":7,"colour":"#A03030","tip":"#top#
hello"},6,9,7]
}
],

"x_axis":{
"stroke": 1,
"tick_height": 10,
"colour": "#d000d0",
"grid_colour": "#00ff00",
"labels": {
"labels": ["January","February","March","April","May","June","July","August","Spetember"]
},
"3d": 5
},

"y_axis":{
"stroke": 4,
"tick_length": 3,
"colour": "#d000d0",
"grid_colour": "#00ff00",
"offset": 0,
"max": 20
}

/* &x_axis_steps=2& */

}





层次分明，很容易懂吧，现在只需要多看看data-files，便能熟练的利用Open Flash Chart 画出各种图形了，官方也有组件各元素的功能介绍http://teethgrinder.co.uk/open-flash-chart-2/x-axis.php，但我还是觉得直接 data-files 来得直接，直观。

/Files/wupingzsf/OpenFlashChart说明.xls

/Files/wupingzsf/ofcWebTest.rar