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”
}