數據文件必須是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"]
}
}
