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 |
显示的圆角边框的弯曲大小 |
属性 |
说明 |
---|---|
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渲染 |
属性 |
说明 |
---|---|
color |
标签上文字的颜色 |
rotate |
标签是否旋转,默认为0,表示不旋转,取值范围-180到180 |
size |
标签上文字的字体大小,最小为6 |
text |
标签上显示的文字 |
align |
该属性只有当label被旋转的时候才会有意义,可选值为auto、center,说明如下:1. auto 旋转标签被移动,这样的标签的最高点是指向刻度线。2. center 旋转标签被移动,这样的标签在刻度线下居中。 |
justify |
指定如何对齐多行文本,可选值为left、center、right。注意指定的是如何对齐多行文本,如果只有一行,则标签还是会居中。 |
visible |
是否显示,默认为true。 |
所有的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# |