数据文件必须是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]
??? },
??? {
????? "type":????? "bar",
????? "colour":??? "#CC9933",
????? "text":????? "Page views 2",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",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"},6]
???? }
?? ]
}
Elements.hbar
横状图表
values:array of objects 每个值含有"right"和"left"可选值
例子:
{
? "elements":[
??? {
????? "type":????? "hbar",
????? "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)",
????? "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",
????? "dot-size":? 6,
????? "values" :?? [15,18,19,14,17,15,17]
??? },
??? {
????? "type":????? "line_dot",
????? "colour":??? "#CC3399",
????? "text":????? "Downloads",
????? "dot-size":? 5,
????? "values" :?? [10,12,13,10,12]
??? },
??? {
????? "type":????? "line_hollow",
????? "colour":??? "#80a033",
????? "text":????? "Bounces",
????? "values" :?? [5,4,1,5]
??? }
? ],

? "y_axis":{
??? "max":?? 20
? },

? "x_axis":{
??? "steps": 2,
??? "labels": ["January","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":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"] ? } }