先来看看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, |
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# |