FlashChart json数据配置 中文文档

http://www.riaos.com/ria/2274 FlashChart json数据配置说明 有朋友要用flashchart，感觉这个还不错。就整理了一份文档。 基本包括了所有json配置的属性。现在放在网上供大家参考。 有不对之处还望大家指出。 目录 Title (标题—-可选) 1 bg_colour（背景颜色—可选）… 2 Y Legend (Y轴图例—–可选) 2 Y Axis（Y轴——可选）… 2 X Legend (X轴图例—–可选) 3 X Axis（X轴——可选）… 3 ToolTip（提示——可选）… 4 Menu（菜单—-可选）… 5 Elements（必选）… 5 Elements.bar（柱状图 ）… 6 Elements.pie（饼状图）… 9 Elements.area（区域图）… 10 Elements.line（线图）… 12   Flash Chart 支持json数据配置所有的属性，效果。以前从各个方便具体说明json配置属性，便于查找。其中红色字体为需要地方。 各种数据的例子见data-files文件夹。 Title (标题—-可选) 所有属性均可选

text	标题
style	CSS style

例 { “title”:{ “text”:  “Many data lines”, “style”: “{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}” } } bg_colour（背景颜色—可选）

bg_colour

背景颜色

例 “bg_colour”:”#ffffff” Y Legend (Y轴图例—–可选)

text	Y轴上显示文字
style	文字css样式

  例 “y_legend”:{ “text”:”Y轴表示”, “style”:”{font-size: 12px; color:#736AFF;}”  } Y Axis（Y轴——可选）

max	最大值
min	最小值
colour	Y轴颜色
grid-colour	Y轴线条颜色
stroke	Y轴宽度
tick-length	Y轴标尺长度
steps	间距

例 “y_axis”:{ “max”:20, “min”: -2 “colour”: “#aaaaaa”, “grid-colour”: “#eeeeee”, “stroke”: 1, “tick-length”: 5, “steps”: 50 } X Legend (X轴图例—–可选)  

text	X轴上显示文字
style	文字css样式

例 “x_legend”:{ “text”:”X轴表示”, “style”:”{font-size: 12px; color:#736AFF;}” }   X Axis（X轴——可选）

colour	X轴颜色
offset	是否偏移	布尔值，true或false
steps	间隔
grid-colour	X轴中间线条颜色
stroke	X轴的宽度
tick-height	标尺高度
labels	数据源
3D	数字		3D效果的高度

  例 “x_axis”:{ “colour”: “#aaaaaa”, “offset”: false, “steps”:3,——— “grid-colour”: “#eeeeee”,- “stroke”: 1, “tick-height”:4, “labels”: ["January","February","March","April","May","June","July","August","Spetember"]  }, ToolTip（提示——可选）

shadow	阴影	布尔值true或false
stroke	描边宽度	单位px
colour	描边颜色
background	背景颜色
title	标题字体CSS样式
body	主体字体CSS样式
rounded	圆角度

例 “tooltip”:{ “shadow”:false, “stroke”:5, “colour”:”#00d000″, “background”:”#d0d0ff”, “rounded”:0, “title”:”{font-size: 14px; color: #905050;}”, “body”:”{font-size: 10px; font-weight: bold; color: #9090ff;}” } Menu（菜单—-可选）

colour	背景颜色
outline-colour	边框颜色
values	显示值

  例 “menu”:{ “colour”:”#E0E0ff” “outline-colour”:    “#707070″, “values” : [ { "type":           "camera-icon", "text":            "Save as image" }, { "type":           "text", "text":            "Save as image 2" }, { "type":           "camera-icon", "text":            "3!!", "javascript-function":    "my_function" } ] }, Elements（必选） 可根据其配置出需要的图表，其共有属性如下：

type	表格类型	可用此配置不同的图表形式。有柱状图，线性图，饼形图等。在下面会一一说明
alpha	图形透明度
colour	图形颜色
text	文字说明	说明表示数据
font-size	字体大小
values	数据源

  Example: { “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指定： 其效果如图：

type	类型	Bar	普通平面柱状图
		Bar_sketch	素描柱状图
		Bar_glass	玻璃高光柱状图
		bar_3d	3D效果柱状图
		bar_filled	填充柱状图
		Bar_cylinder	圆柱形柱状图
		Bar_cylinder_outline	带边线的圆柱形柱状图
		Bar_round_glass	上圆边柱状图
		bar_round	上下圆边柱状图
		bar_dome	圆顶柱状图
		bar_plastic	塑料材质柱状图
		bar_plastic_flat	扁平塑料材质柱状图
outline-colour	外边线颜色

  例子{ “title”:{ “text”:  “Many data lines”, “style”: “{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}” },   “elements”:[ { "type":      "bar", "colour":    "#9933CC", "on-click":  "trace:http://example.com", "values" :   [{"top":7, "on-click":  "trace:http://google.com"},0,-7] }, { “type”:      “bar_sketch”, “colour”:    “#9933CC”, “on-click”:  “trace:http://example.com”, “values” :   [{"top":7, "on-click":  "trace:http://google.com"},0,-7] }, { “type”:      “bar_glass”, “colour”:    “#9933CC”, “on-click”:  “trace:http://example.com”, “values” :   [{"top":7, "on-click":  "trace:http://google.com"},0,-7] }, { “type”:      “bar_3d”, “colour”:    “#9933CC”, “on-click”:  “trace:http://example.com”, “values” :   [{"top":7, "on-click":  "trace:http://google.com"},0,-7] }, { “type”:      “bar_filled”, “colour”:    “#9933CC”, “on-click”:  “trace:http://example.com”, “values” :   [{"top":7, "on-click":  "trace:http://google.com"},0,-7] }, { “type”:      “bar_cylinder”, “colour”:    “#9933CC”, “on-click”:  “trace:http://example.com”, “values” :   [{"top":7, "on-click":  "trace:http://google.com"},0,-7] }, { “type”:      “bar_cylinder_outline”, “colour”:    “#3030FF”, “on-click”:  “trace:http://example.com”, “values” :   [{"top":7, "on-click":  "trace:http://google.com"},0,-7] }, { “type”:      “bar_round_glass”, “colour”:    “#CC0000″, “on-click”:  “trace:http://example.com”, “values” :   [{"top":7, "on-click":  "trace:http://google.com"},0,-7] }, { “type”:      “bar_round”, “colour”:    “#CC0000″, “on-click”:  “trace:http://example.com”, “values” :   [{"top":7, "on-click":  "trace:http://google.com"},0,-7] }, { “type”:      “bar_dome”, “colour”:    “#CCCC00″, “on-click”:  “trace:http://example.com”, “values” :   [{"top":7, "on-click":  "trace:http://google.com"},0,-7] }, { “type”:      “bar_plastic”, “colour”:    “#CCCC00″, “on-click”:  “trace:http://example.com”, “values” :   [{"top":7, "on-click":  "trace:http://google.com"},0,-7] }, { “type”:      “bar_plastic_flat”, “colour”:    “#CCCC00″, “on-click”:  “trace:http://example.com”, “values” :   [{"top":7, "on-click":  "trace:http://google.com"},0,-7] } ], “x_axis”: ｛”3d”:  5 }, “y_axis”:{ “tick_length”: 3, “colour”:      “#d000d0″, “grid_colour”: “#00ff00″, “offset”:      0, “min”:         -10, “max”:         10 } } Elements.pie（饼状图）

type	类型	Pie
start-angle	数字–旋转角度	开始旋转时候的角度
colours	颜色组	多种颜色的时候交替出现
alpha	透明度
stroke	外线宽度
animate	动画效果	设置为false不显示动画效果。也可以设置多种动画效果如反弹。渐入效果
label-colour	说明文字颜色	不设置时颜色和填充颜色相同
tip	提示内容
gradient-fill	渐变填充
no-labels	布尔值	是否显示文字说明
radius	弧度	根据弧度可改变饼图大小。
values	数据源

例：{ “elements”:[ { "type":      "pie", "colours":   ["#d01f3c","#356aa0","#C79810"], “alpha”:     0.6, “border”:    2, “start-angle”: 35, “label-colour”:    “#0000d0″, “tip”:   “#val# #total# #percent# #label#”, “gradient-fill”: true, “no-labels”: true, “radius”:  55, “animate”:[{"type":"bounce","distance":5},{"type":"fade"}], “values” :   [ 2, 3, {"value":6.5,"label":"hello (#val#)", "tip":"99 bottles of beer","on-click":"http://eden"}, {"value":6.5,"on-click":"my_function"} ] } ] } Elements.area（区域图）

type	类型	.area
colour	边线颜色
fill	填充颜色
fill-alpha	填充透明读
text	说明文字
width	线条宽度
font-size	字体大小
line-style	线条样式
dot-size	天宽度
dot-style	点样式
values	数据源

  例 { “elements”: [ { "type": "area", "fill-alpha": 0.4, "values": [ { "value": 100, "colour": "#D02020", "tip": "June 2008 Search Rank Rank 100 / 100" }, { "value": 80, "colour": "#D02020", "tip": "July 2008 Search Rank Rank 80 / 100" }, { "value": 73, "colour": "#D02020", "tip": "August 2008 Search Rank Rank 73 / 100" }, { "value": 100, "colour": "#D02020", "tip": "September 2008 Search Rank Rank 100 / 100" } ], “width”: 2, “dot-size”: 14, “dot-style”:  {“type”:”hollow-dot”, “width”:1, “size”:2}, “halo-size”: 3, “colour”: “#ff9900″, “fill”: “#dbecf6″ } ], “bg_colour”: “#ffff00″, “x_axis”: { “colour”: “#aaaaaa”, “grid-colour”: “#eeeeee”, “stroke”: 1, “tick-height”: 4, “labels”: { “labels”: ["Oct","Nov","Dec","Jan","Feb","Mar","Apr", "May","Jun","Jul","Aug","Sep" ] } }, “y_axis”: { “colour”: “#aaaaaa”, “grid-colour”: “#eeeeee”, “stroke”: 1, “tick-length”: 5, “min”: 0, “max”: 105, “steps”: 50 } } Elements.line（线图）  

type	类型	line
colour	线条颜色
text	说明文字
font-size	字体大小
width	线条宽度
dot-size	点大小	默认为5
dot-style	点宽度	线条上点样式设置
halo-size	发光大小
tip	提示
line-style	线条样css

例子{ “elements”:[ { "type":"line", "values":[1,0,0,0,0,0,0,0,1,0,0,0,6,2,0,0,0,0,0,6,0,0,0,0], “colour”:”#ffae00″, “text”:”Returning Visits”, “font-size”:12, “tip”:”Returning: #val#” }, { “type”:”line”, “values”:[7,5,5,8,6,6,7,11,4,7,5,3,3,11,8,9,12,10,11,11,8,4,10,2], “colour”:”#52aa4b”, “text”:”Unique Visits”, “font-size”:12, “tip”:”Unique: #val#” }, { “type”:”line”, “values”:[14,26,12,20,18,20,12,68,8,8,5,3,10,32,31,16,22,33,32,36,49,8,31,5], “colour”:”#335ac9″, “text”:”Total Visits”, “font-size”:12, “tip”:”Total: #val#” } ], “title”:{ “text”:”Visits data for Alan Edwardes from the 4th of June to the 5th of June”, “style”:”{font-size:12px;padding-bottom:10px;text-align:left;color:#999999;}” }, “y_axis”:{ “stroke”:1, “colour”:”#c6d9fd”, “grid-colour”:”#dddddd”, “min”:0, “max”:73, “steps”:5 }, “x_axis”:{ “offset”:false, “stroke”:1, “colour”:”#c6d9fd”, “grid-colour”:”#dddddd”, “labels”:{ “labels”:["09pm","10pm","11pm","12am","01am","02am","03am","04am","05am","06am","07am","08am","09am","10am","11am","12pm","01pm","02pm","03pm","04pm","05pm","06pm","07pm","08pm"] } }, “bg_colour”:”#ffffff” }