Open Flash Chart圖表的JSON格式基本屬性詳解

​

資料檔案必須是JSON格式.JSON對象的基本格式:{}

把所有對象都編寫在{}裡面.讓它看起來像下面 JSON 資料格式:

{

"title":{

"text":  "Many data lines",

"style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"

}

Title(可選)

所有屬性參數都可選的.

text:string ,          标題

style:string ,       CSS樣式

例子:

"text": "Yedeer.com.cn data line",

"style": "{font-size:20px; color:#000000; font-family:Verdana; text-align:center;}"

Y_Legend(可選)

所有屬性參數都是可選.

text:string,          Y軸标題

style:string,        CSS樣式

"y_legend":{

"text":"Yedeer.com.cn Chart",

"style":"{color:#736AEF; font-size:12px;}"

X Axis(可選)

這個對象的屬性是可選的,如果沒有指定屬性将使用預設的X軸屬性.

所有可選屬性:

stroke: number, X軸線的寬度

tick-height: number, X軸刻度線高度值

colour: string, 線的顔色

offset: boolean, 柱狀圖表中X軸的偏移最小值是0

grid-color:string, 表格線顔色

3d: boolean, 設定3D

steps: 取決于tick-height屬性

labels: array of strings, 每個X點的标簽

"x_axis":{

"stroke":           1,

"tick-height":  10,

"colour":           "#d000d0",

"grid-colour": "#00ff00",

"labels":           ["January,"February","March","April","May","June","July","August","Spetember"]

Y Axis(可選)

應該屬性和X Axis差不多(因為官方沒給出,不知道是不是編漏了)

min:integer, Y軸最小值

max: integer, Y軸最大值

tick-length:number, Y軸刻度線長度

"y_axis":{

"stroke":        4,

"tick-length":  3,

"colour":        "#d000d0",

"grid-colour":"#00ff00",

"offset":           0,

"max":            20

Elements             元素

元素的屬性是一個數組的通用對象

這些通用對象圖表類型為(line,bar,scatter等等)

"elements":[

"type":      "bar",

"alpha":     0.5,

"colour":    "#9933CC",

"text":      "Page views",

"font-size": 10,

"values" :   [9,6,7,9,5,7,6,9,7]

},

"colour":    "#CC9933",

"text":      "Page views 2",

]

Elements.bar

柱狀圖表必須包含在元素數組

type: string    必須是’bar’

alpha: number,  0(透明)和1(不透明)之間的值

colour:string,  CSS顔色

text:string, 圖例說明文本

font-size: number, 設定圖例文本字型大小

values: array of number, 柱子的高底

Elements.pie

圓餅圖表,必須包含在元素資料組裡

type:string, 必須是’pie’

start-angle: number, 第一個切片角度

colours:array of string,  CSS顔色

alpha:number, 0(透明)和1(不透明)之間的值

stroke: number, 切片外邊線寬

animate: boolean, 切片圖表動畫

values:array of objects, 每個切片值或者切片對象與值

"type":      "pie",

"start-angle": 180,

"colours":   ["#d01f3c","#356aa0","#C79810","#73880A","#D15600","#6BBA70"],

"alpha":     0.6,

"stroke":    2,

"animate":   1,

"values" :   [0,2,{"value":0,"text":"zero"},2,6]

Elements.hbar

橫狀圖表

values:array of objects 每個值含有"right"和"left"可選值

"type":      "hbar",

"values" :   [{"right":10},{"right":15},{"left":13,"right":17}]

Elements.line_dot

線形圖表

values:array of number 一個數組集合

"type":      "line_dot",

"colour":    "#736AFF",

"text":      "Avg. wave height (cm)",

"width":     2,

"dot-size":  4,

"values" :   [1.5,1.69,1.88,2.06,2.21,2.34,null,2.35,2.23,2.08]

Elements.line*

注意:這是一個簡單定義3種不同線形類型的圖表(不明白的屬性,請向上溫習一下)

"text":"Many data lines",

"style":"{font-size: 30px;}"

  "y_legend":{"text":"Open Flash Chart",

"style":"{font-size: 12px; color:#736AFF;}"

  "elements":[{

"type":      "line",

"dot-size":  6,

"values" :   [15,18,19,14,17,18,15,18,17]

"colour":    "#CC3399",

"text":      "Downloads",

"dot-size":  5,

"values" :   [10,12,14,9,12,13,10,13,12]

"type":      "line_hollow",

"colour":    "#80a033",

"text":      "Bounces",

"values" :   [5,7,9,7,4,6,1,2,5]

],

  "y_axis":{"max":   20

  "x_axis":{"steps": 2,

"labels": ["January","February","March","April","May","June","July","August","September"]

這是一個簡單的橫狀圖表的JSON對象内容(不明白的屬性請向上溫習)

"text":"HBar Map X values",

"style":"{font-size: 20px; font-family: Verdana; text-align: center;}"

"min":    0,

"max":    20,

"offset": 0,

"labels": ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v"]

"stroke":      14,

"tick-length": 30,

"colour":      "#d09090",

"grid-colour": "#00ff00",

"offset":      1,

"labels":      ["slashdot.org","digg.com","reddit.com"]