转: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 

 

 

posted @ 2010-05-23 21:29  wupingzsf  阅读(1130)  评论(0编辑  收藏  举报