多种水球图

本节的内容可以参考示例文件"数据看板.Table"中的窗口"多种水球图"。

静态图的背景不会动,只有数值变化。这种背景使用形状即可

示例一,使用Segment:

 属性  值  说明
 属性变更-》Cap-》Visible  False  不显示指针帽
 属性变更-》Pointer-》Visible  False  不显示指针
 属性变更-》Pointer-》SweepTime  3  

1、Ellipse

2、Segment

 属性  值  说明
 布局-》CornerRadius  10  
 布局-》InnerRadius   250  
 布局-》OuterRadius   92  
 布局-》StartAngle  30  
 布局-》SweepAngle  260  
 属性变更-》Border-》Color  Transparent  
 属性变更-》Filling-》Color  128, 255, 255  
 属性变更-》Filling-》Color2  0, 192, 192
 属性变更-》Filling-》BushType  Gradient  

Decorators添加一个SingleLabel

 属性  值  说明
 布局-》Location  0  居中
 属性变更-》Color  Red  
 属性变更-》Font  微软雅黑, 26.25pt, style=Bold  
 属性变更-》Format  0  按整数显示
 行为-》PointerIndex  100  

效果:

动态水球图:

动态水球图的背景会根据数值的大小按比例移动。只有指针和Decorators才可以移动,下面分别使用这两项总几个例子。

示例二、使用指针作为背景:

 属性  值  说明
 属性变更-》Orientation  Vertical  指针上下垂直移动
 属性变更-》IsReversed  True  最小值在下方,最大值在上方
 属性变更-》Pointer-》Border-》Color  Transparent  不显示边框
 属性变更-》Pointer-》Filling-》Color  88, 214, 247   根据需要设置自己的颜色
 属性变更-》Pointer-》Filling-》Color2  Teal  
 属性变更-》Pointer-》Filling-》BushType  Gradient  
 属性变更-》Pointer-》Gradient-》Direction  Horizontal  
 属性变更-》Pointer-》Length  100  
 属性变更-》Pointer-》Offset  0  
 属性变更-》Pointer-》OrthogonalOffset  -50  指针下移50%
 属性变更-》Pointer-》Shape  Rectangle  指针形状为矩形
 属性变更-》Pointer-》Width  100  

以下分别为Value值设置为0,50,100的效果:

1、FaceShapes里添加形状Ellipse,属性设置:

 属性  值  说明
 布局-》Height、Width  100  正圆
 属性变更-》Border-》Color  88, 214, 247  

2、FaceShapes里添加形状Ellipse,属性设置:

 属性  值  说明
 布局-》Height、Width  92  正圆,水球的剪切区域
 属性变更-》Border-》Color  Transparent  不显示边框
 行为-》Name  aa1  用于剪切时绑定

3、打开指针属性变更-》Pointer-》Clippings集合,添加一个成员,属性设置:

 属性  值  说明
 Operation  Replace  
 ShapeName  aa1  上面形状的名称

设置后以下分别为Value值设置为0,50,100的效果:

由于指针始终都是在Decorators 前面的,所以只能通过Filling颜色的透明度实现了。把属性变更-》Pointer-》Filling-》Opacity 设置为50%。最终效果

示例三、使用Decorators 作为背景:

 属性  值  说明
 属性变更-》Orientation  Vertical  指针上下垂直移动
 属性变更-》IsReversed  True  最小值在下方,最大值在上方
 属性变更-》Pointer-》Visible  False  不显示指针

到Decorators 添加一个SingleMark,属性设置

 属性  值  说明
 布局-》Length  100  宽度100%
 布局-》Location  50  左右居中
 布局-》Width  105  高度105%
 布局-》OrthogonalOffset  -50  中心点下移50%
 属性变更-》Border-》Color  Transparent  
 属性变更-》Filling-》Color  88, 214, 247  
 属性变更-》Filling-》Color2  99, 100, 226  
 属性变更-》Filling-》BushType  Gradient  
 属性变更-》Gradient-》Direction  Horizontal  
 属性变更-》行为-》PointerIndex   100  绑定主指针

1、FaceShapes里添加形状Ellipse,属性设置:

 属性  值  说明
 布局-》Height、Width  100  正圆
 属性变更-》Border-》Color  DodgerBlue  

2、FaceShapes里添加形状Ellipse,属性设置:

 属性  值  说明
 布局-》Height、Width  92  正圆,水球的剪切区域
 属性变更-》Border-》Color  Transparent  不显示边框
 行为-》Name  aa1  用于剪切时绑定

3、打开上面Decorators 里添加的SingleMark,打开属性变更-》Clippings集合,添加一个成员,属性设置:

 属性  值  说明
 Operation  Replace  
 ShapeName  aa1  上面形状的名称

效果:

示例四、使用Decorators+图片 作为背景:

使用装饰件或者形状作为水球背景,水平面只能是直线,最多设置一下角度,稍微有点倾斜的效果。如果要实现波浪状的水平面只能是使用图片了。设计一张类似以下的图片

然后直接在上面示例三的基础上,打开Decorators 里添加的SingleMark,到属性变更-》CustomImage添加一个图片,设置属性:

 属性  值  说明
 属性变更-》CustomImage-》Height、Width  100  
 属性变更-》CustomImage-》RotateFlipType  Rotate90FlipXY  

效果如