OpenFlashChart

試玩OpenFlashChart
公司之後可能需要做圖表，先測試一下mvc可用的元件，但這個是都能用，不關mvc的事XD

詳細的圖表及效果請看
OpenFlashChart


實作：

在body中加入兩個div



載入的檔案如下


在document.ready加上

var jsonFilePath = encodeURIComponent('../../Content/OpenFlash/data.json');
//存放Open Flash Chart要載入的JSON字串
var flashvars = { "data-file": jsonFilePath };
//設定要傳入Flash的變數資料,data-file是定義在Flash檔案裡面的Action Script變數
var params = { 'quality': 'high', 'allowscriptaccess': 'always' };
//設定Flash在頁面上的屬性,這些屬性是屬於HTML規範的
var attributes = {};
swfobject.embedSWF("../../Content/OpenFlash/open-flash-chart.swf", //要顯示的Flash
"my_chart", //Flash要寫入的區塊id
"100%", //Flash寬度
"100%", //Flash高度
"9.0.0", //Flash Player的版本號
"http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75",
//當瀏覽器沒有安裝Flash Player時,指示使用者要去哪一個網站進行Flash Player的URL
flashvars,
params,
attributes);


$("#divResize").resizable();



加入一個json檔為data.json在根目錄，或自已設定，並修改讀取的路徑

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_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& */

}

在畫面載入後就會去讀json檔中的內容解析為圖表的資訊及屬性，多包一div讓圖表可以縮放，載完圖之後，就可以自由的拉動顯示大小囉!!

效果如下