OpenFlashChart简明手册

先来看看OpenFlashChart的效果：

区域说明：

OpenFlashChart主要包含以下配置信息：

配置名

说明

Title

Chart标题。主要用来说明该Chart是用来展示什么数据。

XAxis

X轴。主要用来展示X轴的分类标签。

YAxis

Y轴。主要用来展示对应X轴分类的Y轴的值。

YAxisRight

右Y轴。有时候不同的Element会使用不同的Y轴，就比如上图中，BarElement使用左边的Y轴，Line Element使用右边的Y轴。

XLegend

X轴的图例。在X轴下方显示一段文字，用来说明X轴的含义。

YLegend

Y轴的图例。在Y轴左侧显示一段文字，用来说明Y轴的含义。

YLegendRight

右Y轴的图例。在右Y轴右侧显示一段文字，用来说明右Y轴的含义。

Legend

图例。这是Elements使用的图例，用来说明每个颜色的Element分别代表什么。

ToolTip

提示信息

Elements

每个OpenFlashChart可以包含多个Element，每个Element会绑定不同的数据，按照配置展现成不同的形式。每个Element可以指定自己的图例说明文字和图例颜色。如果Chart的图例为显示的话，就会看到这些信息在图例中显示。这些Element的数据可能会使用到XAxis，YAxis，YAxisRight。

Title、XLegend、YLegend、YLegendRight的配置
这几个在显示效果上都是一段文字，可使用的样式，目前只有两个属性可以配置。

属性

说明

text

要显示的字符串。

style

标准的css，可以使用标准的键值对加分号的方式，也可以把这个字符串使用大括号括起来。支持的属性有限，仅支持下列属性：text-align,font-size,textdecoration,margin,margin-top,margin-bottom,margin-left,marginright,padding,padding-top,padding-bottom,padding-left,paddingright, 
font-weight,font-style,font-family,color,background-color,display关于这些属性的取值范围，请参考css手册。

Legend的配置
这个与每个Element息息相关，可配置的信息如下。

属性

说明

alpha

图例的透明度，取值范围0到1(0为不可见，1为不透明)，只对position为right的图例起作用。

backgroundColor

图例的背景色，只对position为right的图例起作用。

border

是否显示图例的边框，只对position为right的图例起作用。

borderColor

图例边框的颜色，只对position为right的图例起作用。

stroke

图例边框的宽度，只对position为right的图例起作用。

margin

图例的外边距，以像素为单位，只对position为right的图例起作用。

padding

图例的内填充，以像素为单位，只对position为right的图例起作用。

position

图例显示的位置，目前只有top、right可选。

visible

是否显示图例。

shadow

图例是否显示阴影，只对position为right的图例起作用。

ToolTip的配置
目前有这么些属性可以供配置。

属性

说明

backgroundColor

背景色

color

字体颜色

titleStyle

标题的样式，可以使用标准的css

bodyStyle

内容的样式，可以使用标准的css

mouse

显示在鼠标的什么位置，可选值Closest,Proximity,Normal

shadow

是否显示阴影

stroke

显示的边框的宽度

rounded

显示的圆角边框的弯曲大小

Axis的配置
OpenFlashChart的坐标轴相当强大，相应的，坐标轴的配置大概是OpenFlashChart里面最复杂的内容了。
这里面有很多的概念需要了解，这部分会介绍相应的概念。
以X轴举例，可以看下面一个例子：

对该图进行一个简单的分析：

从X轴的示例可以看出坐标轴由这么几个东西组成：
Axis Label：坐标轴标签，在上图中的最下方使用蓝色线标出。
Axis Line：轴线，在上图中的Axis Label上方使用蓝色线标出。
Tick：刻度线，在上图中Axis Label上方使用红色线标出。
Grid Line：表格线，在上图中最上方使用红色线标出。
对于Y轴，没有太大的区别，不再绘图进行解释。
X轴与Y轴共有的属性说明：

属性

说明

color

轴线和刻度线的颜色

gridColor

表格线的颜色

stroke

轴线的宽度或高度，对于X轴来讲，是高度。对于Y轴讲，是宽度

offset

指定是否应该在显示最小值刻度之前有一个小的间隔，对X轴和Y轴都起作用。如果为true，则坐标轴的刻度和文字的起始位置不为给坐标轴的起始点。如果为false，则坐标轴的刻度和标签的起始位置为坐标轴的起始点。

max

轴的最大值

min

轴的最小值

steps

每个label间的差值。如果min为1，max为6，steps为1，则坐标轴显示的label为1，2，3，4，5如果min为1，max为5，steps为2，则坐标轴显示的label为1，3，5

zDepth3D

指定3d渲染的深度，默认为0，表示不使用3d渲染

另外，Chart实际上是把数据展现成图表，那么数据可能是一个取值范围，而不是几个独立的标签。
如果是取值范围，需要设置min、max、steps三个属性。如果是标签，可以设置labelsShortcut这个属性，每个标签用逗号隔开，不需要引
号。
AxisLabel的配置
AxisLabel可配置的属性如下：

属性

说明

color

标签上文字的颜色

rotate

标签是否旋转，默认为0，表示不旋转，取值范围-180到180

size

标签上文字的字体大小，最小为6

text

标签上显示的文字

align

该属性只有当label被旋转的时候才会有意义，可选值为auto、center，说明如下：1. auto 旋转标签被移动，这样的标签的最高点是指向刻度线。2. center 旋转标签被移动，这样的标签在刻度线下居中。

justify

指定如何对齐多行文本，可选值为left、center、right。注意指定的是如何对齐多行文本，如果只有一行，则标签还是会居中。

visible

是否显示，默认为true。

关于justify的说明：

上图中X轴的标签展示了justify属性的使用。
justify主要用来排列多行文本，当使用left、center、right的时候，会分别按照左对齐，居中，右对齐排列。
关于align的说明：

上图中X轴的标签展示了justify属性的使用，X轴第一个标签的align为auto，第二个标签的align为center。可以看到第一个标签的最高点指
向刻度线，第二个标签的中点指向刻度线。
XAxisLabels、 YAxisLabels 的配置
对于每个坐标轴对象来说，都有一个labels属性，用来配置坐标轴上显示的标签。
X轴使用XAxisLabels对象，Y轴和右Y轴使用YAxisLabels对象。
每个AxisLabels对象下又都有一个labels属性，该属性为类型为AxisLabel的数组。
每个AxisLabels对象下的其他属性均与AxisLabel对象相同，并不是为Labels整个显示区域设置，实际上是每个AxisLabel的默认值。
Elements的配置
所有的Element的都有的属性：

属性

说明

alpha

Element的透明度，取值范围0到1(0为不可见，1为不透明)。

text

Element在图例上显示的文字。

color

Element在图例上显示的颜色，除了这个含义，不同的种类Element会使用该属性作为其他方式使用，请参考具体的Element。

fontSize

Element在图例上显示的文字的大小。

colors

该Element使用的颜色集合，这些颜色集合对于不同的Element有不同的含义，可直接参考具体Element的说明。

values

对于Element，values就是该Element要显示的数据。一般情况下，推荐直接使用数据绑定来实现Element数据的配置。如果不使用数据绑定，则可以使用json，在服务器端配置亦可使用字符串。

toolTip

该Element是用的提示信息的模版，需要使用Magic Value。每种Element使用的MagicValue不同，可以参考开发手册。

bindingConfig

Element的数据绑定信息。目前不是所有的Element都支持数据绑定。

Tooltip 使用的Magic Value：

类标

可使用Magic Value

PointDotBase

#x#,#y#,#val#,#size#

Pie

#label#,#key#,#val#,#radius#

XAxisLabels、 YAxisLabels

#val#

Bar,Stack

#top#,#bottom#,#val#

Horizontal,HStack

#right#,#left#,#val#

Candle

#high#,#open#,#close#,#low#