smartclient框架组件介绍10(GraphMeter,GraphMeter2,GraphBarVsLine)

GraphMeter：仪表盘组件

效果图

GraphMeter仪表盘组件属性、方法清单

GraphMeter提供绘制仪表盘的功能，能够根据传入参数绘制对应的线性图。

方法描述：

方法

名称/描述

create

根据相关属性创建线型图组件，一般组件都是通过这个方法创建实体对象的

setValue

设置仪表盘的指针指向值

属性描述：

方法

名称/描述

title

仪表盘的标题

min

仪表盘扇区起始值

max

仪表盘扇区结束值

value

指针指向值

chartUnitsPost

刻度单位

GreenStart

绿色扇区起始值（yellowStart、RedStart同理）

GreenEnd

绿色扇区结束值（yellowEnd、RedEnd同理）

GreenColor

绿色扇区重设颜色（yellowColor、RedColor同理）

tickmarksSmallNum

设置刻度单位最小刻度值

tickmarksBigNum

设置刻度单位刻度总格数

Radius: Number

设置扇形外圈的半径大小。

segmentRadiusStart: Number

设置扇形内圈的半径大小。

initMeterParams

仪表盘图其他可设置参数的集合。

create方法

详述

方法名

Create

概述

通过输入的各个属性创建仪表盘组件

返回

仪表盘的实体对象

参数（可以是Canvas的任意一个属性）

参数

说明

title

仪表盘的标题

min

仪表盘扇区起始值

max

仪表盘扇区结束值

value

指针指向值

使用示例

var meterTest=isc.GraphMeter.create({

width : "50%",

height : "50%",

min: 0,

max: 100,

value: 59,

title: 'TEST',

initMeterParams:{'chart.key.background':'blue','chart.text.color':'red'}

});

setValue方法

详述

方法名

setValue

概述

设置仪表盘组件的指针指向值

参数

介于仪表盘扇区起始值、结束值之间的数值

返回

无返回结果（线型图会自动更新）

使用示例

//设置设置仪表盘组件的指针指向值

meterTest.setValue(98);

 

GraphMeter2：仪表盘2组件

效果图

GraphMeter2仪表盘2组件属性、方法清单

GraphMeter提供绘制仪表盘的功能，能够根据传入参数绘制对应的线性图。

方法描述：

方法

名称/描述

create

根据相关属性创建线型图组件，一般组件都是通过这个方法创建实体对象的

setValue

设置仪表盘2的指针指向颜色。

属性描述：

方法

名称/描述

title

仪表盘2的标题

Value:Number

指针指向值,只允许1到6的范围，分别指向1到6的颜色区域。（颜色区域个数为4个，则只能设置1到4）

colors: Array[String]

颜色区域的数组，最大支持6种颜色。

key: Array[String]

颜色区域对应的图例说明，需要与colors参数长度保持一致。

radius: Number

设置扇形外圈的半径大小。

segmentRadiusStart: Number

设置扇形内圈的半径大小。

needleLinewidth: Number

指针的线型宽度。(默认为2px)

linewidthSegments

颜色区域的间隙宽度。（默认为10px）

initMeterParams

仪表盘2其他可设置参数的集合。

create方法

详述

方法名

Create

概述

通过输入的各个属性创建仪表盘组件

返回

仪表盘2的实体对象

参数（可以是Canvas的任意一个属性）

参数

说明

title

仪表盘的标题

colors: Array[String]

颜色区域的数组，最大支持6种颜色。

key: Array[String]

颜色区域对应的图例说明，需要与colors参数长度保持一致。

value

指针指向值,只允许1到6的范围，分别指向1到6的颜色区域。（颜色区域个数为4个，则只能设置1到4）

radius: Number

设置扇形外圈的半径大小。

segmentRadiusStart: Number

设置扇形内圈的半径大小。

使用示例

var meter2 = GraphMeter2.create({

width: "100%",

height: "100%",

title: "仪表盘2组件",

value: 3,

colors:['green','yellow','red','pink','blue','orange'],

radius: 300,

segmentRadiusStart: 150,

key: ["绿色","黄色","红色","粉红","蓝色","橙色"],

initMeterParams: {''chart.needle.tail'':false}

});

setValue方法

详述

方法名

setValue

概述

设置仪表盘2组件的指针指向颜色区域

参数

根据colors参数，也就是颜色区域的个数，最大支持1到6的范围

返回

无返回结果（线型图会自动更新）

使用示例

//设置设置仪表盘组件的指针指向值

meter2.setValue(6);

 

GraphBarVsLine：柱状/折线合并组件

效果图

GraphBarVsLine线型图组件属性、方法清单

GraphBarVsLine提供绘制线型图的功能，能够根据传入参数绘制对应的线型图

方法描述：

方法

名称/描述

Create

根据相关属性创建线型图组件，一般组件都是通过这个方法创建实体对象的

setLineData

设置线型图（折线图）部分的数据

setBarData

设置线型图（柱状图）部分的数据

属性描述：

方法

名称/描述

barVsLineTitle

线型图的标题

barVsLineLabels

线型图各个点对应的标签

lineData

折线图各个点对应的数据。支持多根折线，使用多维数组的方式传入入参。注：数组长度必须和barVsLineLabels数组长度一致。

BarData

柱状图各个点对应的数据。支持一组中有多根柱状，使用多维数组的方式传入入参.

但要注意：柱状图和折线图多维数组相反，例如：柱状图：[[1,5],[2,6],[3,7],[4,8]]对应于折线图：[[1,2,3,4],[5,6,7,8]]。

注：数组长度必须和barVsLineLabels数组长度一致。

lineYMax

折线图Y轴最大值

barYMax

柱状图Y轴最大值

lineLinewidth

折线图线性粗细

barLinewidth

柱状图线性粗细

barColors

柱状图的颜色。（支持一组有多根柱状）

lineColors

折线图的颜色（支持多根折线）

keys

折线和柱状图的key显示标题。注：数组长度必须和colors数组长度一致。

xlabelCount

限制横坐标显示个数，例如：100个横坐标，显示不下，则配置xlabelCount：10，就只显示其中10个坐标。

keyPosition

可选择：”graph”和”gutter”，分别显示在图表的右上角和图表正上方。

barUnitsPost

折线图的纵坐标单位（居左。）

lineUnitsPost

折线图的纵坐标单位（居右）。

barTooltips

对应柱状图各个点的tooltip。注：数组长度必须和barVsLineLabels数组长度一致。

lineTooltips

对应折线图各个点的tooltip。注：数组长度必须和barVsLineLabels数组长度一致。

gutterTop

图表的上边界宽度。

gutterBottom

图表的下边界宽度。

gutterLeft

图表的左边界宽度。

gutterRight

图表的右边界宽度。

initBarParams

柱状图其他可设置参数集合。

initLineParams

折线图其他可设置参数的集合。

create方法

详述

方法名

Create

概述

通过输入的各个属性创建对应的线型图组件

返回

线型图的实体对象

参数（可以是Canvas的任意一个属性）

参数

说明

barVsLineTitle

线型图的标题

keys

折线和柱状图的key显示标题

colors

折线和柱状图的颜色

lineLinewidth

折线图线性粗细

barLinewidth

柱状图线性粗细

barVsLineLabels

线型图各个点对应的标签

lineYMax

折线图Y轴最大值

barYMax

柱状图Y轴最大值

使用示例

//创建线型图组件

var barVsLine=isc.GraphBarVsLine.create({

barVsLineTitle: 'barVsLineTitle',

width: "100%",

height: "100%",

keys: ['test1','test2'],

colors: ['blue','yellow'],

lineLinewidth: 3,

barLinewidth: 3,

barVsLineLabels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

BarYMax: 200,

LineYMax: 100,

initBarParams:{'chart.key.background':'blue','chart.text.color':'red'},

initLineParams:{'chart.key.background':'blue','chart.text.color':'red'}

});

setLineData方法

详述

方法名

setLineData

概述

设置线型图（折线图）部分的数据

参数

线型图（折线图）组件各个点对应的数据

返回

无返回结果（线型图会自动更新）

使用示例

//设置线型图组件各个点对应的数据，线型图会自动更新

barVsLine.setLineData([143,65,141,35,136,132,29,125,26,127,80,129]);

setBarData方法

详述

方法名

setBarData

概述

设置线型图（柱状图）部分的数据

参数

线型图（柱状图）组件各个点对应的数据

返回

无返回结果（线型图会自动更新）

使用示例

//设置线型图组件各个点对应的数据，线型图会自动更新

barVsLine.setBarData([23,25,25,80,27,26,90,28,10,86,29,72]);