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