open flash chart教程一 ofc是如何工作

教程一:基础篇,我们来讲下ofc是如何工作的。

首先下载open flash chart2.0(下面简称ofc2),下载包里面包含了各个语言版本的库文件和ofc2的核心库文件。这里只是为了演示教程,所以我们不去改变他的目录结构,等你掌握了便可以任意的改变他们的目录。

要想ofc顺利工作,除了库文件不可缺少外,另外只要2个文件就可以实现漂亮的图表来。数据文件和显示页面


1、显示页面(chart.html)





 

Hello World

这个页面在浏览器中得到的结果是一个错误信息,的确,这正是我们想要的,因为我们还没有为其添加数据文件呢.
下面制作数据文件.
ofc2改进了传输数据的结构,是以json方式来传输。如果你不太了解json数据格式,没关系,他是一个很简单的数据格式,可以通过这个网址来了解.http://www.json.org/json-zh.html

2、数据文件(data.json)

{
  "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",
      "alpha":     0.5,
      "colour":    "#9933CC",
      "text":      "Page views",
      "font-size": 10,
      "values" :   [9,6,7,9,5,7,6,9,7]
    },
    {
      "type":      "bar",
      "alpha":     0.5,
      "colour":    "#CC9933",
      "text":      "Page views 2",
      "font-size": 10,
      "values" :   [6,7,9,5,7,6,9,7,3]
    }
  ],
 
  "x_axis":{
    "stroke":1,
    "tick_height":10,
    "colour":"#d000d0",
    "grid_colour":"#00ff00",
    "labels": {
        "labels": ["January","February","March","April","May","June","July","August","Spetember"]
    }
   },
 
  "y_axis":{
    "stroke":      4,
    "tick_length": 3,
    "colour":      "#d000d0",
    "grid_colour": "#00ff00",
    "offset":      0,
    "max":         20
  }
}

那么怎么样把数据传送给ofc呢?方法有很多种,我们这里介绍的是通过url来传输数据。ofc内有一个默认的变量叫做’ofc’,他用来接受数据文件的名字,然后再被open flash chart来处理。
所以我们只要在浏览地址中加入?ofc=data.json (你的浏览地址就像http://example.com/chart.html?ofc=data.json)
恭喜你,大功告成,是不是出来了你要的效果。
PS:
1、变量’ofc’只是众多变量中的一个,你还可以通过url传输很多变量进去,比如http://example.com/chart.html?x=1&ofc=data.json&y=2。
2、JSON数据可以通过很多途径得到,后面章节我们会提到用php来得到JSON文件。

实例

下次,我会介绍使用php来生成json数据.

open flash chart教程一 ofc是如何工作》有1个想法

发表评论

返回顶部