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