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轴的偏移最小值是0grid-color:string, 表格线颜色3d: boolean, 设置3Dsteps: 取决于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"] }} 本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/wangwenhui11/archive/2009/06/19/4283571.aspx?