Wijmo 5

Gauge 101

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

入门

在KnockoutJS应用中开始使用Gauge的步骤:

  1. 添加对KnockoutJS, Wijmo和Wijmo的KnockoutJS绑定的引用。
  2. 添加一个视图模型提供数据和逻辑。
  3. 向当前页面添加一个Wijmo Gauge控件,并将它绑定到你的数据。
  4. (可选)添加一些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" href="styles/app.css" /> <script src="scripts/knockout.js" type="text/javascript"></script> <script src="scripts/wijmo.js" type="text/javascript"></script> <script src="scripts/wijmo.input.js" type="text/javascript"></script> <script src="scripts/wijmo.gauge.js" type="text/javascript"></script> <script src="scripts/wijmo.knockout.js" type="text/javascript"></script> <script src="scripts/bindings/appBindings.js"></script> <script src="scripts/app.js"></script> <script src="scripts/viewmodels/appVM.js"></script> </head> <body> <!-- Wijmo 5 LinearGauge directive --> <div data-bind="wjLinearGauge: { value: props.value, min: props.min, max: props.max, format: props.format }"></div> <!-- Wijmo 5 RadialGauge directive --> <div data-bind="wjRadialGauge: { value: props.value, min: props.min, max: props.max, format: props.format }"></div> <!-- Wijmo 5 InputNumber directive --> <div class="app-input-group"> <label>Gauge Value</label> <div data-bind="wjInputNumber: { value: props.value, min: props.min, max: props.max, format: props.format, step: props.step }"></div> </div> </html>
// create and apply application view model function viewModel1() { this.props = { format: 'p0', max: 1, min: 0, value: ko.observable(0.5) ............. }; }; (function () { ko.applyBindings(new viewModel1()); })();

Result (live):

显示值

仪表盘控件提供了一个showText属性,决定仪表盘应该以文本格式展示哪个值。 showText属性有四个有效值:

下面的样例演示当你更改showText属性时产生的影响。

<div data-bind="wjLinearGauge: { value: props.value, min: props.min, max: props.max, format: props.format, showText: props.showText }" class="linear-gauge"></div> <div data-bind="wjRadialGauge: { value: props.value, min: props.min, max: props.max, format: props.format, showText: props.showText }" class="radial-gauge"></div> <div class="app-input-group"> <label>Gauge Value</label> <div data-bind="wjInputNumber: { value: props.value, min: props.min, max: props.max, format: props.format, step: props.step }"></div> </div> <div data-bind="wjMenu: { value: props.showText, header: 'Show Text' }"> <span data-bind="wjMenuItem: { value: 'Value' }">Value</span> <span data-bind="wjMenuItem: { value: 'MinMax' }">Min/Max</span> <span data-bind="wjMenuItem: { value: 'All' }">All</span> <span data-bind="wjMenuItem: { value: 'None' }">None</span> </div>
this.props = { format: 'p0', max: 1, min: 0, showText: ko.observable('All'), step: 0.25, value: ko.observable(0.5) };

Result (live):

Value Min/Max All None

使用范围

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

Range对象本身提供了几个属性来自定义每个区域,比如min, maxcolor

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

<div data-bind="wjLinearGauge: { value: props.value, min: props.min, max: props.max, format: props.format, showRanges: props.showRanges }" class="linear-gauge"> <div data-bind="wjRange: { wjProperty: 'pointer', thickness: props.ranges.pointerThickness }"></div> <div data-bind="wjRange: { min: props.ranges.lower.min, max: props.ranges.lower.max, color: props.ranges.lower.color }"></div> <div data-bind="wjRange: { min: props.ranges.middle.min, max: props.ranges.middle.max, color: props.ranges.middle.color }"></div> <div data-bind="wjRange: { min: props.ranges.upper.min, max: props.ranges.upper.max, color: props.ranges.upper.color }"></div> </div> <div data-bind="wjBulletGraph: { value: props.value, min: props.min, max: props.max, format: props.format, good: props.ranges.middle.max, bad: props.ranges.middle.min, target: props.ranges.target, showRanges: props.showRanges }" class="linear-gauge"> <div data-bind="wjRange: { wjProperty: 'pointer', thickness: props.ranges.pointerThickness }"></div> </div> <div data-bind="wjRadialGauge: { value: props.value, min: props.min, max: props.max, format: props.format, showRanges: props.showRanges }" class="radial-gauge"> <div data-bind="wjRange: { wjProperty: 'pointer', thickness: props.ranges.pointerThickness }"></div> <div data-bind="wjRange: { min: props.ranges.lower.min, max: props.ranges.lower.max, color: props.ranges.lower.color }"></div> <div data-bind="wjRange: { min: props.ranges.middle.min, max: props.ranges.middle.max, color: props.ranges.middle.color }"></div> <div data-bind="wjRange: { min: props.ranges.upper.min, max: props.ranges.upper.max, color: props.ranges.upper.color }"></div> </div> <div class="app-input-group"> <label>Gauge Value</label> <div data-bind="wjInputNumber: { value: props.value, min: props.min, max: props.max, format: props.format, step: props.step }"></div> </div> <label> Show Ranges  <input type="checkbox" data-bind="checked: props.showRanges" /> </label>
var self = this; // a set of property values for the Wijmo Gauges this.props = { format: 'p0', max: 1, min: 0, showRanges: ko.observable(true), step: 0.25, value: ko.observable(0.5) }; this.props.ranges = { pointerThickness: ko.computed(function () { return self.props.showRanges() ? 0.5 : 1; }), target: .75, lower: { min: 0, max: .33, color: ko.computed(function () { return self.props.showRanges() ? 'rgba(255,100,100,.1)' : 'red'; }) }, middle: { min: .33, max: .66, color: ko.computed(function () { return self.props.showRanges() ? 'rgba(255,255,100,.1)' : 'yellow'; }) }, upper: { min: .66, max: 1, color: ko.computed(function () { return self.props.showRanges() ? 'rgba(100,255,100,.1)' : 'green'; }) } };

Result (live):

自动缩放

RadialGauge提供了两个属性来配置它的布局,startAnglesweepAnglestartAngle属性指定了RadialGauge的开始角度或者旋转角度。 sweepAngle指定了代表RadialGauge弧长的角度。两个属性角度都是从顺时针方向,从9点钟位置开始。

RadialGauge也提供了autoScale 属性。当autoScale 设为true时,RadialGauge会自动缩放以适合包含它的元素。

下面的样例允许你实时地调整startAngle, sweepAngleautoScale

<div data-bind="wjRadialGauge: { value: props.value, min: props.min, max: props.max, format: props.format, autoScale: props.autoScale, startAngle: props.startAngle, sweepAngle: props.sweepAngle}" class="radial-gauge"></div> <div class="app-input-group"> <label>Gauge Value</label> <div data-bind="wjInputNumber: { value: props.value, min: props.min, max: props.max, format: props.format, step: props.step }"></div> </div> <div class="app-input-group"> <label>Start Angle</label> <div data-bind="wjInputNumber: { value: props.startAngle, min: -360, max: 360, step: 45 }"></div> </div> <div class="app-input-group"> <label>Sweep Angle</label> <div data-bind="wjInputNumber: { value: props.sweepAngle, min: 0, max: 360, step: 45 }"></div> </div> <label> Auto-Scale  <input type="checkbox" data-bind="checked: props.autoScale" /> </label>
this.props = { autoScale: ko.observable(true), format: 'p0', max: 1, min: 0, startAngle: ko.observable(0), sweepAngle: ko.observable(180), value: ko.observable(0.5) };

Result (live):

方向

RadialGauge的startAnglesweepAngle属性不能应用到LinearGauge或BulletGraph。 但LinearGauge和BulletGraph提供了direction 属性来决定它如何显示。下面是direction 属性的四个选项:

下面的样例会让你看到当direction属性更改后产生的影响。

<div data-bind="wjLinearGauge: { value: props.value, min: props.min, max: props.max, format: props.format, direction: props.direction, showRanges: props.showRanges }, style: (props.direction() == 'Up' || props.direction() == 'Down') ? {'height' : '300px', 'width': '1.2em'} : {'height' : '', 'width': ''}" class="linear-gauge"> <div data-bind="wjRange: { wjProperty: 'pointer', thickness: props.ranges.pointerThickness }"></div> <div data-bind="wjRange: { min: props.ranges.lower.min, max: props.ranges.lower.max, color: props.ranges.lower.color }"></div> <div data-bind="wjRange: { min: props.ranges.middle.min, max: props.ranges.middle.max, color: props.ranges.middle.color }"></div> <div data-bind="wjRange: { min: props.ranges.upper.min, max: props.ranges.upper.max, color: props.ranges.upper.color }"></div> </div> <div data-bind="wjBulletGraph: { value: props.value, min: props.min, max: props.max, format: props.format, good: props.ranges.middle.max, bad: props.ranges.middle.min, target: props.ranges.target, direction: props.direction, showranges: props.showranges }, style: (props.direction() == 'Up' || props.direction() == 'Down') ? {'height' : '300px', 'width': '1.2em'} : {'height' : '', 'width': ''}" class=" linear-gauge"> <div data-bind="wjRange: { wjProperty: 'pointer', thickness: props.ranges.pointerThickness }"></div> </div> <div class="app-input-group"> <label>Gauge Value</label> <div data-bind="wjInputNumber: { value: props.value, min: props.min, max: props.max, format: props.format, step: props.step }"></div> </div> <div data-bind="wjMenu: { value: props.direction, header: 'Direction' }"> <span data-bind="wjMenuItem: { value: 'Up' }">Up</span> <span data-bind="wjMenuItem: { value: 'Right' }">Right</span> <span data-bind="wjMenuItem: { value: 'Down' }">Down</span> <span data-bind="wjMenuItem: { value: 'Left' }">Left</span> </div>
var self = this; // a set of property values for the Wijmo Gauges this.props = { direction: ko.observable('Right'), format: 'p0', max: 1, min: 0, value: ko.observable(0.5) }; this.props.ranges = { pointerThickness: ko.computed(function () { return self.props.showRanges() ? 0.5 : 1 }), target: .75, lower: { min: 0, max: .33, color: ko.computed(function () { return self.props.showRanges() ? 'rgba(255,100,100,.1)' : 'red' }) }, middle: { min: .33, max: .66, color: ko.computed(function () { return self.props.showRanges() ? 'rgba(255,255,100,.1)' : 'yellow' }) }, upper: { min: .66, max: 1, color: ko.computed(function () { return self.props.showRanges() ? 'rgba(100,255,100,.1)' : 'green' }) } }

Result (live):

Up Right Down Left

样式

仪表盘控件的外观大部分在CSS中定义。除了默认的主题外, 我们还包括了一些专业设计的主题来自定义Wijmo控件的外观以实现一致的,具有吸引力的外观。

你可以使用CSS来自定义仪表盘的外观,要想自定义外观,复制默认主题的CSS规则到一个新的CSS文件,按需要更改这些规则。

在这个样例中,我们向LinerGauge和RadialGauge添加了"custom-gauge"CSS类,为这两个控件定义一些CSS规则来创建一个橘黄色的指针。

<div data-bind="wjLinearGauge: { value: props.value, min: props.min, max: props.max, format: props.format, showText: 'Value' }" class="custom-gauge"></div> <div data-bind="wjRadialGauge: { value: props.value, min: props.min, max: props.max, format: props.format, showText: 'Value' }" class="custom-gauge"></div> <div class="app-input-group"> <label>Gauge Value</label> <div data-bind="wjInputNumber: { value: props.value, min: props.min, max: props.max, format: props.format, step: props.step }"></div> </div>
this.props = { format: 'p0', max: 1, min: 0, value: ko.observable(0.5) };
.custom-gauge .wj-pointer { fill: #ffa500; stroke: #cd853f; }

Result (live):

编辑值

isReadOnly属性设为false时,仪表盘控件可以用作一个简单的表示器或者输入控件。 仪表盘也提供了一个step属性来确定,作为输入控件时,从当前值增加或者减少的量。

下面的样例演示如何使用LinerGauge和RadialGauge控件的isReadOnlystep控件。

<div data-bind="wjLinearGauge: { value: props.value, min: props.min, max: props.max, format: props.format, step: props.step, isReadOnly: props.isReadOnly }" class="linear-gauge"></div> <div data-bind="wjRadialGauge: { value: props.value, min: props.min, max: props.max, format: props.format, step: props.step, isReadOnly: props.isReadOnly }" class="radial-gauge"></div> <label> Read-Only  <input type="checkbox" data-bind="checked: props.isReadOnly" /> </label>
this.props = { format: 'p0', isReadOnly: ko.observable(false), max: 1, min: 0, step: 0.25, value: ko.observable(0.5) };

Result (live):