Open flash chart(OFC)是一款非常強大(dà)且非常絢麗(lì)的圖表生(shēng)成組件，而且開(kāi)源免費。 2.0的版本數(shù)據格式完全用JSON來(lái)處理(lǐ)，非常靈活，官方提供了各種接口程序，包括PHP/PHP5、Pear、Python、Java、Dotnet，調用也非常簡單。

本文介紹如何在我們的網站(zhàn)項目中使用Open flash chart 2.0。

1、到官方網站(zhàn)下載文件包http://teethgrinder.co.uk/open-flash-chart-2/downloads.php。

解壓ZIP包，将static/file/TOOL和(hé)static/file/TOOL以及swfobject.js三個(gè)文件拷貝到您的服務器(qì)根目錄下，當然你(nǐ)也可(kě)以自由放置這三個(gè)文件的位置，但(dàn)是一定要确保文件路徑的正确調用。

2、在HTML頁面的head标簽之間(jiān)加入以下代碼：

注意：flashvars是設置的數(shù)據源，該數(shù)據位JOSN格式數(shù)據，本例提供了一個(gè)txt的JOSN數(shù)據源，接下來(lái)我會(huì)專門(mén)寫一篇文章 關于如何用PHP來(lái)生(shēng)成JOSN數(shù)據，然後用OFC調用渲染出圖表的案例，敬請(qǐng)關注。
params是設置FLASH輸出的菜單、比例、窗口模式等屬性。
最後載入flash文件，注意“chart”是頁面中的一個(gè)HTML元素的ID值，就是用這個(gè)ID來(lái)裝入圖表。接着就是設置元素的大(dà)小(xiǎo)，很(hěn)簡單吧(ba)。

3、在body中加入載入圖表的HTML元素。

4、JOSN數(shù)據文件data.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_glass",
      "alpha":     0.5,
      "colour":    "#9933CC",
      "text--":      "Page views",
      "font-size--": 10,
      "values" :   [9,6,7,9,5,{"top":7,"colour":"#FF0000", "tip": "Mooo
#val#"},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"]
    }
   },

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

  "tooltip":{
    "text": "My Tip
val=#val#, top=#top#"
  }
}

點擊這裏看DEMO演示