QeeChart各组件属性说明剖析.docx

QeeChart各组件属性说明剖析.docx

《QeeChart各组件属性说明剖析.docx》由会员分享，可在线阅读，更多相关《QeeChart各组件属性说明剖析.docx（16页珍藏版）》请在冰豆网上搜索。

QeeChart各组件属性说明剖析

QeeChart各组件属性说明

配置文件方式如：

20;font-weight:

bold;text-align:

center;"/>

[2011-01-11更新]

新增序列分组配置,如果以图表内图形有进行分组，可以通过如下配置完成

注：

为兼容之前版本，xml配置中可以使用，即没有时图表默认为group的编号为0;

20px;font-weight:

bold;text-align:

center;"/>

20px;font-weight:

bold;"top="-30"left="30"/>

[2011-01-24更新]

新增饼图图形,XML配置名称新增PieChart（饼图）、PieSeries（数据序列）、PieLegend（饼图图例）,

注意:

饼图只支持一个series，2D平面,图例只能使用PieLegend,不支持xAxis/yAxis定义

配置如下：

20px;font-weight:

bold;text-align:

center;"/>

{value}%"horizontal="false"borderColor="0xedc060"borderAlpha="0.8"backgroundColor="0xf6e1c9"backgroundAlpha="0.8"/>

======================================================================

=图表设置

=

====================================================================

根级结点ColumnChart是设置当前显示的图表，

取值范围：

ColumnChart|LineChart|BarChart|PieChart

可设置属性

paddingLeft="15"Number图表左边距

paddingTop="15"Number图表上边距

paddingRight="15"Number图表右边距

paddingBottom="15"Number图表下边距

backgroundColors="0xDDDDDD,0xFFFFFF"Array[2]图表背景渐变色

backgroundAlpha="1,1"Array[2]图表背景渐变透明度

backgroundRatios="0x00,0xFF"Array[2]图表渐变色所占比率位置

showXGrid="true"Boolean显示横向网格

showYGrid="flase"Boolean显示纵向网格

gridColor="0x999999"uint16刻度网格颜色

gridWidth="1"Number网格宽度

gridAlpha="1"Number（0-1）网格透明度

gridStyle="dotted|solid"String网格线类型（目前只有dotted虚线solid实线）

[2011-01-24更新]

PieChart特有属性

nameField=""String饼图各扇区类别字段

======================================================================

=

=图表标题设置

=

======================================================================

为Chart子结点:

title为是图表标题，如果不要标题可能不添加

可设置属性:

label="柱形图"String标准显示内容

style="font-size:

20;font-family:

TimesNewRoman,Times;margin-left:

10;font-weight:

bold;text-align:

center;"CSS支持简单的CSS

paddingLeft="10"Number左边距

paddingTop="10"Number上边距

paddingRight="10"Number右边距

paddingBottom="10"Number下边距

=======================================================================

=坐标轴设置

=

=====================================================================

xAxis为横向坐标轴，yAxis为纵向坐标轴。

都为Chart下面的子结

可设置的属性：

labelWidth="auto"Number|"auto"轴标签宽度数值，如为"auto"则取文本宽

labelHieght="auto"Number|"auto"轴标签高度数值，如为"auto"则取文本高

wordWrap="false"Boolean轴标签是否可换行默认false

labelSide="outer""outer"|"inner"轴标签位置outer图表外，"inner"图表内tickSide="inner""outer"|"inner"轴刻度位置outer图表外，"inner"图表内

borderColor="0x333333"uint16轴线颜色

borderWidth="1"Number轴线宽度

borderAlpha="1"Number（0-1）轴线透明度

tickLength="5"Number轴主刻度长度

minorTickLength="3"Number轴次刻度长度

其下有一个结点表示轴类型，取值范围：

CategoryAxis枚举类型的，如：

数据中有那几个产品

NumericAxis线性数据类型，如：

一些取值是在0-100之间取值

CategoryAxis

可设置属性：

fieldString轴表示的数据字段

padding="1"Number轴偏移刻度的倍数

interval="0"Number主刻度单位值

minorInterval="0"Number次刻度单位值必须小主刻度值且为倍数

referToLabel="false"Boolean刻度显示，是否参照传入数据标签。

如果标签文本不为空则显示刻度，没有文本标签则不显示

NumericAxis

可设置属性

baseAtZero="true"Boolean数据是否从0开始计算

numTicks="6"uint轴刻度数

interval="0"Number主刻度单位值

minorInterval="0"Number次刻度单位值必须小主刻度值且为倍数decimal="-1"int轴标签保留数据小数点位数，-1表示以传入数据所保留的小数点为准

maxValue="100"Number轴刻度最大值

minValue="0"Number轴刻度最小值

fields=""Array轴要表示数据中的字段（如图表中，有多个字段值要显示,value,vol等）

padding="1"Number轴偏移刻度的倍数

Title坐标轴标题（即坐标中对应轴单位）

Y轴标题属性

top="0"Number|"auto"标题左上角位置可以使用负数

left="0"Number|"auto"标题左边位置

right="auto"Number|"auto"右边位置

bottom="auto"Number|"auto"底边位置

label=""String标题内容

X轴标题属性

top="auto"Number|"auto"标题左上角位置可以使用负数

left="auto"Number|"auto"标题左边位置

right="0"Number|"auto"右边位置

bottom="0"Number|"auto"底边位置

label=""String标题内容

=======================================================================

=图表显示组件序列series

=

======================================================================

Chart下面结点series显示图

[2011-01-11更新]

新增取值：

group

新增加group，此为可选项，即配置xml中可以不添加，在不添加group情况下，图表实际上默认为所有Series属于group0

取值范围：

BarSeriesColumnSeriesLineSeriesPieSeries

LineSeries折线

field=""String数据字段

showTip="true"Boolean是否显示提示;

displayName=""String数据显示名称，图例上显示的就是这个

borderWidth="4"uint线宽度

borderColor="0xFF6600"uint16线颜色

borderAlpha="1"Number（0-1）线透明度

pointColor="0xFFFFFF"uint16点颜色

pointAlpha="1"Number（0-1）点透明度

pointRadius="3"Number点半径

pointBorderWidth="1"Number点周边线宽度

labelFormat=""StringSeries上Tip显示的格式如{date}date为显示的字段

ColumnSeries柱图

field=""String数据字段

showTip="true"Boolean是否显示提示;

displayName=""String数据显示名称，图例上显示的就是这个

backgroundColor="0xFF6600"uint16柱图填充色，设了这个就不显示渐变色

borderWidth="1"Number柱图边宽度

borderColor="0x17325f"uint16边线颜色

borderAlpha="1"Number（0-1）边线透明度

backgroundColors="0xfefe72,0xfe7701"Array[2]柱渐变色

backgroundRatios="0x00,0xFF"Array[2]渐变色所占比率

offsetLeft="0"Number柱偏移值，在同时显示多个柱图时

itemWidth="16"Number柱宽度

labelFormat=""StringSeries上Tip显示的格式如{date}date为显示的字段

BarSeries条图

field=""String数据字段

showTip="true"Boolean是否显示提示;

displayName=""String数据显示名称，图例上显示的就是这个

backgroundColor="0xFF6600"uint16条图填充色，设了这个就不显示渐变色

borderWidth="1"Number条图边宽度

borderColor="0x17325f"uint16边线颜色

borderAlpha="1"Number（0-1）边线透明度

backgroundColors="0xfefe72,0xfe7701"Array[2]柱渐变色

backgroundRatios="0x00,0xFF"Array[2]渐变色所占比率

offsetTop="0"Number柱偏移值，在同时显示多个条图时

itemWidth="16"Number条宽度

labelFormat=""StringSeries上Tip显示的格式如{date}date为显示的字段

[2011-01-24更新]

PieSeries饼图

field=""String数据字段

showTip="true"Boolean是否显示提示;

fillColors="0xFF2200,0xFF9900,0xFFFF00,0x0066FF,

0x990000,0x009933,0x9900FF,0x3333FF,

0x333366,0x660000,0x990000,0xFF6600,

0x009900,0x00FF00,0x993300,0x996600,

0x999900,0x99FF00"

Array饼图各元素显示的颜色

labelFormat=""StringSeries上Tip显示的格式如{date}date为显示的字段

=======================================================================

=图例Legend

=

=====================================================================

Chart下结点，显示图例，如果不要图例可以不添加结点

可设置属性

horizontal="true"Boolean是否水平显示

width="160"Number图例容器宽

height="20"Number图例容器高

left="auto"Number|"auto"左边距

right="auto"Number|"auto"右边距，当左右边距都"auto"则水平居中

bottom="20"Number|"auto"底边距

top="auto"Number|"auto"顶边距，当上下边距都"auto"则垂直居中

itemWidth="50"Number图例宽度

itemHeight="20"Number图例高度

itemMargin="10"Number间距

borderWidth="1"Number边宽

borderColor="0xDDDDDD"uint16边色

borderAlpha="1"Number（0-1）边透明度

backgroundColor="0xFFFFFF"uint16背景色

backgroundAlpha="1"Number（0-1）背景透明度

[2011-01-24更新]

PieLegend饼图图例

labelFormat=""StringSeries上Tip显示的格式如{date}date为显示的字段

=======================================================================

=dataProvider图表数据

=

======================================================================

下面结点，

可设属性：

Source=nullString服务器数据地址

结点下可以直接放xml数据如：

如果dataProvider里面设置了source属性，则不会管其下面包含的xml数据

=======================================================================

=组件JS封装对象及其方法Method

=

======================================================================

QeeC