openflashchart属性配置API

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

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

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渲染

AxisLabel可配置的属性如下:

属性

说明

color

标签上文字的颜色

rotate

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

size

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

text

标签上显示的文字

align

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

justify

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

visible

是否显示,默认为true。

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#

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值