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]);