Wijmo 5

Gauge 101

这个页面演示如何开始使用Wijmo的Gauge控件。

入门

wijmo.gauge module包含LinearGauge，RadialGauge和BulletChart控件。 它们用来以图形的方式展示并且选择性地编辑数字信息。

下面是在AngularJS应用中开始使用Gauge控件的步骤：

  1. 添加对AngularJS，Wijmo和Wijmo的AngularJS指令的引用。
  2. 在应用模块中包含Wijmo5指令：
    var app = angular.module('app', ['wj']);
  3. 添加一个控制器来提供数据和逻辑。
  4. 向当前页面添加Wijmo Gauge控件并设置它的value、min和max属性。
  5. （可选）添加一些CSS来自定义仪表盘的外观。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> <link rel="stylesheet" type="text/css" href="css/wijmo.css" /> <link rel="stylesheet" type="text/css" href="css/app.css" /> <script src="scripts/angular.js" type="text/javascript"></script> <script src="scripts/wijmo.js" type="text/javascript"></script> <script src="scripts/wijmo.gauge.js" type="text/javascript"></script> <script src="scripts/wijmo.angular.js" type="text/javascript"></script> <script src="scripts/app.js" type="text/javascript"></script> </head> <body ng-app="app" ng-controller="appCtrl"> <!-- Wijmo 5 LinearGauge directive --> <wj-linear-gauge value="props.value" min="{​{ props.min }}" max="{​{ props.max }}" format="{​{ props.format }}"> </wj-linear-gauge> <!-- Wijmo 5 RadialGauge directive --> <wj-radial-gauge value="props.value" min="{​{ props.min }}" max="{​{ props.max }}" format="{​{ props.format }}"> </wj-radial-gauge> <!-- Wijmo 5 InputNumber directive --> <div> <label>value</label> <wj-input-number value="props.value" min="{​{ props.min }}" max="{​{ props.max }}" format="{​{ props.format }}" step="{​{ props.step }}"> </wj-input-number> </div> </body> </html>
// declare app module var app = angular.module('app', ['wj']); // app controller provides data app.controller('appCtrl', function appCtrl($scope) { $scope.props = { value: 50, min: 0, max: 100, step: 10, format: 'n0' }; });

Result (live):

编辑 (仪表盘作为滑块)

除了以图形方式展示信息外，仪表盘也可以用作输入控件（这种情况下也把可以称它为”滑块”）

要使用仪表盘控件作为输入，设置isReadOnly属性为false。 这样会允许用户仅仅通过点击或触摸仪表盘来更改仪表盘的当前值。

当使用仪表盘作为输入控件时，记得设置step属性来定义点击或轻击导致的变化精度，以及鼠标滚轮滚动导致的变化幅度。

下面的示例演示如何使用LinearGauge和RadialGauge的isReadOnly和step属性。

<wj-linear-gauge value="props.value" min="{​{ props.min }}" max="{​{ props.max }}" format="{​{ props.format }}" step="{​{ props.step }}" is-read-only="{​{ props.isReadOnly }}"> </wj-linear-gauge> <wj-radial-gauge value="props.value" min="{​{ props.min }}" max="{​{ props.max }}" format="{​{ props.format }}" step="{​{ props.step }}" is-read-only="{​{ props.isReadOnly }}"> </wj-radial-gauge> <label> isReadOnly&nbsp; <input type="checkbox" ng-model="props.isReadOnly" /> </label>
// declare app module var app = angular.module('app', ['wj']); // app controller provides data app.controller('appCtrl', function appCtrl($scope) { $scope.props = { value: 50, min: 0, max: 100, step: 10, format: 'n0', isReadOnly: false }; });

Result (live):

显示“拇指”（“拇指”就是我们可以通过鼠标拖动的那个小块）

默认情况下，仪表盘通过向控件填充颜色来表明当前的值。 你可以使用thumbSize属性来添加一个可视的元素以突出当前值。

下面的示例演示如何使用thumbSize属性。 该示例也减小了仪表盘face的thickness属性和pointer范围，因此“拇指”变得更加明显。

<wj-linear-gauge value="props.value" min="{​{ props.min }}" max="{​{ props.max }}" step="{​{ props.step }}" format="{{ props.format }}" is-read-only="false" is-animated="false" thumb-size="10"> <wj-range wj-property="face" thickness="0.25"></wj-range> <wj-range wj-property="pointer" thickness="0.25"></wj-range> </wj-linear-gauge> <wj-radial-gauge value="props.value" min="{​{ props.min }}" max="{​{ props.max }}" step="{​{ props.step }}" format="{​{ props.format }}" is-read-only="false" is-animated="false" thumb-size="10"> <wj-range wj-property="face" thickness="0.08"></wj-range> <wj-range wj-property="pointer" thickness="0.08"></wj-range> </wj-radial-gauge> <div class="app-input-group"> <label>value</label> <wj-input-number value="props.value" min="{​{ props.min }}" max="{​{ props.max }}" format="{​{ props.format }}" step="{​{ props.step }}"> </wj-input-number> </div>
// declare app module var app = angular.module('app', ['wj']); // app controller provides data app.controller('appCtrl', function appCtrl($scope) { $scope.props = { value: 50, min: 0, max: 100, step: 10, format: 'n0' }; });

Result (live):

使用范围

所有Wijmo仪表盘都有ranges属性，包含一个Range对象数组。默认情况下，范围在仪表盘表面显示来表明关注的区域； 而且，你可以使用showRanges属性来隐藏范围。 在这种情况下，仪表盘要确定哪一个范围包含当前值，并且将这个范围的颜色应用到仪表盘指针。

你可以使用min、max和color属性来自定义每个Range对象。

下面的示例演示如何使用LinerGauge和RadialGauge的范围。

<wj-linear-gauge value="props.value" min="{​{ props.min }}" max="{​{ props.max }}" format="{​{ props.format }}" show-ranges="{​{ props.showRanges }}"> <wj-range wj-property="pointer" thickness="{​{ props.ranges.pointerThickness }}"></wj-range> <wj-range min="{​{ props.ranges.lower.min }}" max="{​{ props.ranges.lower.max }}" color="{​{ props.ranges.lower.color }}"></wj-range> <wj-range min="{​{ props.ranges.middle.min }}" max="{​{ props.ranges.middle.max }}" color="{​{ props.ranges.middle.color }}"></wj-range> <wj-range min="{​{ props.ranges.upper.min }}" max="{​{ props.ranges.upper.max }}" color="{​{ props.ranges.upper.color }}"></wj-range> </wj-linear-gauge> <wj-radial-gauge value="props.value" min="{​{ props.min }}" max="{​{ props.max }}" format="{​{ props.format }}" show-ranges="{​{ props.showRanges }}"> <wj-range wj-property="pointer" thickness="{​{ props.ranges.pointerThickness }}"></wj-range> <wj-range min="{​{ props.ranges.lower.min }}" max="{​{ props.ranges.lower.max }}" color="{​{ props.ranges.lower.color }}"></wj-range> <wj-range min="{​{ props.ranges.middle.min }}" max="{​{ props.ranges.middle.max }}" color="{​{ props.ranges.middle.color }}"></wj-range> <wj-range min="{​{ props.ranges.upper.min }}" max="{​{ props.ranges.upper.max }}" color="{​{ props.ranges.upper.color }}"></wj-range> </wj-radial-gauge> <div class="app-input-group"> <label>value</label> <wj-input-number value="props.value" min="{​{ props.min }}" max="{​{ props.max }}" format="{​{ props.format }}" step="{​{ props.step }}"> </wj-input-number> </div> <label> showRanges  <input type="checkbox" ng-model="props.showRanges" /> </label>
// declare app module var app = angular.module('app', ['wj']); // app controller provides data app.controller('appCtrl', function appCtrl($scope) { $scope.props = { format: 'p0', value: 50, min: 0, max: 100, step: 10, showRanges: true, ranges: { pointerThickness: 0.5, lower: { min: 0, max: 33, color: 'rgba(255,100,100,.5)' }, middle: { min: 33, max: 66, color: 'rgba(255,255,100,.5)' }, upper: { min: 66, max: 100, color: 'rgba(100,255,100,.5)' } }; });

Result (live):

布局和外观属性

仪表盘控件设计为主要由CSS确定样式，但是它们也有几个影响布局和外观的属性：

  • thumbSize: 决定用来显示当前值的“拇指”元素的大小。
  • showText: 决定仪表盘是否将最小值，最大值和当前值显示为文本元素。
  • hasShadow: 决定仪表盘是否在表面和值范围添加一个影子效果。
  • isAnimated: 决定仪表盘在更新当前值的时候是否使用动画效果。
  • autoScale: 决定径向仪表盘是否自动缩小范围以填充控件。
  • startAngle, sweepAngle: 定径向仪表盘的开始角度和扫描角度。角度按度来衡量，从9点钟位置起顺时针计算。
  • direction: 决定线性仪表盘的填充方向。

下面的示例演示这些属性在线性仪表盘和径向仪表盘的效果：

<wj-linear-gauge value="props.value" is-read-only="false" min="{​{ props.min }}" max="{​{ props.max }}" step="{​{ props.step }}" format="{​{ props.format }}" thumb-size="{​{ props.thumbSize }}" show-text="{​{ props.showText }}" has-shadow="{​{ props.hasShadow }}" is-animated="{​{ props.isAnimated }}" direction="{​{ props.direction }}"> </wj-linear-gauge> <wj-radial-gauge value="props.value" is-read-only="false" min="{​{ props.min }}" max="{​{ props.max }}" step="{​{ props.step }}" format="{​{ props.format }}" thumb-size="{​{ props.thumbSize }}" show-text="{​{ props.showText }}" has-shadow="{​{ props.hasShadow }}" is-animated="{​{ props.isAnimated }}" auto-scale="{​{ props.autoScale }}" start-angle="{​{ props.startAngle }}" sweep-angle="{​{ props.sweepAngle }}"> </wj-radial-gauge>
// declare app module var app = angular.module('app', ['wj']); // app controller provides data app.controller('appCtrl', function appCtrl($scope) { $scope.props = { value: 50, min: 0, max: 100, step: 10, format: 'n0', thumbSize: null, showText: 'All', isAnimated: true, hasShadow: true, direction: 'Right', autoScale: true, startAngle: 0, sweepAngle: 180 }; });

Result (live):

共有的属性


Value Min/Max All None
LinearGauge属性
Up Right Down Left
RadialGauge属性

样式

仪表盘控件的外观主要在CSS中定义。要想自定义外观，复制默认主题的CSS规则到一个新的CSS文件，按需要更改这些规则。

在这个示例中，我们向仪表盘添加一个自定义仪表盘类，然后定义一些CSS规则来自定义仪表盘face范围和“拇指”的外观。 当仪表盘拥有焦点后，自定义CSS规则也可以使用wj-state-focused类来增加“拇指”的大小。

<h4> Default Styles </h4> <wj-linear-gauge is-read-only="false" min="0" max="255" step="5" value="color.red"> <wj-range wj-property="pointer" color="red"></wj-range> </wj-linear-gauge> <wj-linear-gauge is-read-only="false" min="0" max="255" step="5" value="color.green"> <wj-range wj-property="pointer" color="green"></wj-range> </wj-linear-gauge> <wj-linear-gauge is-read-only="false" min="0" max="255" step="5" value="color.blue"> <wj-range wj-property="pointer" color="blue"></wj-range> </wj-linear-gauge> <h4> Custom CSS </h4> <wj-linear-gauge class="custom-gauge" thumb-size="10" has-shadow="false" is-read-only="false" min="0" max="255" step="5" value="color.red"> <wj-range wj-property="face" thickness="0.25"></wj-range> <wj-range wj-property="pointer" thickness="0.25" color="red"></wj-range> </wj-linear-gauge> <wj-linear-gauge class="custom-gauge" thumb-size="10" has-shadow="false" is-read-only="false" min="0" max="255" step="5" value="color.green"> <wj-range wj-property="face" thickness="0.25"></wj-range> <wj-range wj-property="pointer" thickness="0.25" color="green"></wj-range> </wj-linear-gauge> <wj-linear-gauge class="custom-gauge" thumb-size="10" has-shadow="false" is-read-only="false" min="0" max="255" step="5" value="color.blue"> <wj-range wj-property="face" thickness="0.25"></wj-range> <wj-range wj-property="pointer" thickness="0.25" color="blue"></wj-range> </wj-linear-gauge>
.custom-gauge.wj-gauge { padding: 0px 10px; } .custom-gauge.wj-gauge .wj-face path { fill: #d0d0d0; stroke: none; } .custom-gauge.wj-gauge .wj-pointer path { fill: #404040; stroke: none; } .custom-gauge.wj-gauge circle.wj-pointer { fill: #404040; stroke: none; transform-origin: center center 0px; transform: scale(1); transition: transform .5s; } .custom-gauge.wj-gauge.wj-state-focused circle.wj-pointer { fill: red; stroke: black; stroke-width: 2px; transform: scale(1.3); transition: transform 1s, fill 0.5s, stroke 0.5s; }

Result (live):

使用仪表盘编辑颜色：      

默认样式

自定义CSS