Wijmo图表基础之RadialGauge仪表盘
wijmo.gaugemodule包含LinearGauge,RadialGauge和BulletChart
控件。它们用来以图形的方式展示并且选择性地编辑数字信息。
本文就结合实际例子介绍RadialGauge。
入门
下面是在JavaScript应用中开始使用Gauge控件的步骤:
1.添加Wijmo的引用。
2.添加标记作为Wijmo控件的宿主。
3.通过JavaScript初始化Wijmo控件。
4.(可选)添加一些CSS来自定义仪表盘控件的外观。
添加引用到页面的代码参考:
显示值
仪表盘控件提供了一个showText属性,决定仪表盘应该以文本
格式展示哪个值。showText属性有四个有效值:
?Value:显示Gauge的当前值。
?MinMax:显示Gauge当前的最小值和最大值。
?All:显示Gauge当前最小值,最大值和当前值。这个选项是
Value和MinMax选项的组合。
?None:Gauge控件不显示文本值
本示例中设置最大值,最小值和值的代码:
使用范围
所有Wijmo仪表盘都有ranges属性,包含一个Range对象数组。
默认情况下,范围在仪表盘表面显示来表明关注的区域;而且,你
可以使用showRanges属性来隐藏范围。在这种情况下,仪表盘要确
定哪一个范围包含当前值,并且将这个范围的颜色应用到仪表盘指
针。
Range对象本身提供了几个属性来自定义每个区域,比如min,
max和color。
本文的示例演示如何使用LinerGauge、BulletGraph和RadialGauge
的范围。
代码参考:
自动缩放
RadialGauge提供了两个属性来配置它的布局,startAngle和
sweepAngle。startAngle属性指定了RadialGauge的开始角度或者旋
转角度。sweepAngle指定了代表RadialGauge弧长的角度。两个属
性角度都是从顺时针方向,从9点钟位置开始。
本文示例中设置角度的代码参考:
本文示例的效果如图
|
|