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样式

例子:

{

"title":{

"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]

},

{

"type": "bar",

"alpha": 0.5,

"colour": "#CC9933",

"text": "Page views 2",

"font-size": 10,

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

}

]

}

Elements.bar

柱状图表必须包含在元素数组

type: string 必须是’bar’

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

colour:string, CSS颜色

text:string, 图例说明文本

font-size: number, 设置图例文本字体大小

values: array of number, 柱子的高底

例子:

{

"elements":[

{

"type": "bar",

"alpha": 0.5,

"colour": "#9933CC",

"text": "Page views",

"font-size": 10,

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

}

]

}

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, 每个切片值或者切片对象与值

例子:

{

"elements":[

{

"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"可选值

例子:

{

"elements":[

{

"type": "hbar",

"colour": "#9933CC",

"text": "Page views",

"font-size": 10,

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

}

]

}

Elements.line_dot

线形图表

values:array of number 一个数组集合

例子:

{

"elements":[

{

"type": "line_dot",

"colour": "#736AFF",

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

"font-size": 10,

"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种不同线形类型的图表(不明白的属性,请向上温习一下)

例子:

{

"title":{

"text":"Many data lines",

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

},
"y_legend":{

"text":"Open Flash Chart",

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

},
"elements":[

{

"type": "line",

"colour": "#9933CC",

"text": "Page views",

"width": 2,

"font-size": 10,

"dot-size": 6,

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

},

{

"type": "line_dot",

"colour": "#CC3399",

"width": 2,

"text": "Downloads",

"font-size": 10,

"dot-size": 5,

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

},

{

"type": "line_hollow",

"colour": "#80a033",

"width": 2,

"text": "Bounces",

"font-size": 10,

"dot-size": 6,

"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对象内容(不明白的属性请向上温习)

{

"title":{

"text":"HBar Map X values",

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

},
"elements":[

{

"type": "hbar",

"colour": "#9933CC",

"text": "Page views",

"font-size": 10,

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

}

],

"x_axis":{

"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"]

},

"y_axis":{

"stroke": 14,

"tick-length": 30,

"colour": "#d09090",

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

"offset": 1,

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

}

}