﻿ Gauge Introduction

# Gauge 101

## 入门

1. 添加Wijmo的引用。
2. 添加标记作为Wijmo控件的宿主。
3. 通过JavaScript初始化Wijmo控件。
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 href="css/app.css" rel="stylesheet" type="text/css" /> <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/app.js" type="text/javascript"></script> </head> <body> <!-- LinearGauge --> <div id="gsLinearGauge"></div> <!-- RadialGauge --> <div id="gsRadialGauge"></div> <!-- InputNumber --> <div> <label>Gauge Value</label> <input id="gsValue" type="text" /> </div> </body> </html>
// init Wijmo controls var linearGauge = new wijmo.gauge.LinearGauge('#gsLinearGauge'), radialGauge = new wijmo.gauge.RadialGauge('#gsRadialGauge'), valueInput = new wijmo.input.InputNumber('#gsValue'); // LinearGauge - set properties linearGauge.value = props.value; linearGauge.min = props.min; linearGauge.max = props.max; linearGauge.format = props.format; // Radial Gauge - set properties radialGauge.value = props.value; radialGauge.min = props.min; radialGauge.max = props.max; radialGauge.format = props.format; // InputNumber - set properties valueInput.value = props.value; valueInput.min = props.min; valueInput.max = props.max; valueInput.format = props.format; valueInput.step = props.step; // InputNumber valueChanged event valueInput.valueChanged.addHandler(function (sender) { // update Gauge.value when InputNumber.value changes linearGauge.value = sender.value; radialGauge.value = sender.value; });

## 显示值

• Value: 显示Gauge的当前值。
• MinMax: 显示Gauge当前的最小值和最大值。
• All: 显示Gauge当前最小值，最大值和当前值。这个选项是 ValueMinMax选项的组合。
• None: Gauge控件不显示文本值

<div id="dvLinearGauge"></div> <div id="dvRadialGauge"></div> <!-- "Gauge Value" input omitted --> <select id="dvShowTextMenu"> <option value="Value">Value</option> <option value="MinMax">Min/Max</option> <option value="All">All</option> <option value="None">None</option> </select>
// init Wijmo controls var linearGauge = new wijmo.gauge.LinearGauge('#dvLinearGauge'), radialGauge = new wijmo.gauge.RadialGauge('#dvRadialGauge'), valueInput = new wijmo.input.InputNumber('#dvValue'), showTextMenu = new wijmo.input.Menu('#dvShowTextMenu'); // LinearGauge - set properties // format, min, max, and value omitted for brevity - identical to "Getting Started" linearGauge.showText = props.showText; // Radial Gauge - set properties // format, min, max, and value omitted for brevity - identical to "Getting Started" radialGauge.showText = props.showText; // InputNumber - set properties // omitted for brevity - identical to "Getting Started" // set Menu properties showTextMenu.selectedValue = props.showText; showTextMenu.selectedIndexChanged.addHandler(function (sender) { // make sure a value is selected if (!sender.selectedValue) return; // update Gauges' showText property linearGauge.showText = sender.selectedValue; radialGauge.showText = sender.selectedValue; });

## 使用范围

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

<div id="urLinearGauge"></div> <div id="urBulletGraph"></div> <div id="urRadialGauge"></div> <!-- "Gauge Value" input omitted --> <label> Show Ranges&nbsp; <input id="urShowRanges" type="checkbox" /> </label>
// init Wijmo controls var linearGauge = new wijmo.gauge.LinearGauge('#urLinearGauge'), bulletGraph = new wijmo.gauge.BulletGraph('#urBulletGraph'), radialGauge = new wijmo.gauge.RadialGauge('#urRadialGauge'), valueInput = new wijmo.input.InputNumber('#urValue'), showRanges = document.getElementById('urShowRanges'),, lowerRange = new wijmo.gauge.Range(), middleRange = new wijmo.gauge.Range(), upperRange = new wijmo.gauge.Range(); // set Range propeties lowerRange.min = props.ranges.lower.min; lowerRange.max = props.ranges.lower.max; lowerRange.color = props.ranges.lower.color; middleRange.min = props.ranges.middle.min; middleRange.max = props.ranges.middle.max; middleRange.color = props.ranges.middle.color; upperRange.min = props.ranges.upper.min; upperRange.max = props.ranges.upper.max; upperRange.color = props.ranges.upper.color; // LinearGauge - set properties // format, min, max, and value omitted for brevity - identical to "Getting Started" linearGauge.pointer.thickness = props.ranges.pointerThickness; linearGauge.ranges.push(lowerRange); linearGauge.ranges.push(middleRange); linearGauge.ranges.push(upperRange); // set BulletGraph properties and add Range objects // format, min, max, and value omitted for brevity - identical to "Getting Started" bulletGraph.showRanges = props.showRanges; bulletGraph.pointer.thickness = props.ranges.pointerThickness; bulletGraph.good = props.ranges.middle.max; bulletGraph.bad = props.ranges.middle.min; bulletGraph.target = props.ranges.target; // Radial Gauge - set properties // format, min, max, and value omitted for brevity - identical to "Getting Started" radialGauge.showRanges = props.showRanges; radialGauge.pointer.thickness = props.ranges.pointerThickness; radialGauge.ranges.push(lowerRange); radialGauge.ranges.push(middleRange); radialGauge.ranges.push(upperRange); // InputNumber - set properties // omitted for brevity - identical to "Getting Started" // showRanges checkbox showRanges.checked = props.showRanges; showRanges.addEventListener('change', function() { // determine showRanges by checkbox's checked state var showRanges = this.checked; linearGauge.showRanges = showRanges; bulletGraph.showRanges = showRanges; radialGauge.showRanges = showRanges; linearGauge.pointer.thickness = showRanges ? 0.5 : 1; bulletGraph.pointer.thickness = showRanges ? 0.5 : 1; radialGauge.pointer.thickness = showRanges ? 0.5 : 1; });

## 自动缩放

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

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

<div id="asRadialGauge"></div> <!-- "Gauge Value" input omitted --> <div> <label>Start Angle</label> <input id="asStartAngle" type="text" /> </div> <div> <label>Sweep Angle</label> <input id="asSweepAngle" type="text" /> </div> <label> Auto-Scale&nbsp; <input id="asAutoScale" type="checkbox" /> </label>
// init Wijmo controls var radialGauge = new wijmo.gauge.RadialGauge('#asRadialGauge'), valueInput = new wijmo.input.InputNumber('#asValue'), startAngleInput = new wijmo.input.InputNumber('#asStartAngle'), sweepAngleInput = new wijmo.input.InputNumber('#asSweepAngle'), autoScaleInput = document.getElementById('asAutoScale'); // Radial Gauge - set properties // format, min, max, and value omitted for brevity - identical to "Getting Started" radialGauge.autoScale = props.autoScale; // InputNumber - set properties // omitted for brevity - identical to "Getting Started" // StartAngle - set InputNumber properties startAngleInput.value = props.startAngle; startAngleInput.min = -360; startAngleInput.max = 360; startAngleInput.step = 45; startAngleInput.valueChanged.addHandler(function (sender) { // update gauge's startAngle property radialGauge.startAngle = sender.value; }); // SweepAngle - set InputNumber properties sweepAngleInput.value = props.sweepAngle; sweepAngleInput.min = 0; sweepAngleInput.max = 360; sweepAngleInput.step = 45; sweepAngleInput.valueChanged.addHandler(function (sender) { // update gauge's sweepAngle property radialGauge.sweepAngle = sender.value; }); // AutoScale - set CheckBox properties autoScaleInput.checked = props.autoScale; autoScaleInput.addEventListener('change', function () { // update gauge's autoScale property based on // checkbox's checked state radialGauge.autoScale = this.checked; });

## 方向

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

• Up: 仪表盘垂直绘制，它的值从下向上增长。
• Right: 仪表盘水平绘制，它的值从右向左增长。是默认的选项。
• Down: 仪表盘垂直绘制，它的值从上向下增长。
• Left: 仪表盘水平绘制，它的值从左向右增长。

<div class="row"> <div class="direction-col"> <div id="dLinearGauge"></div> </div> <div class="direction-col"> <div id="dBulletGraph"></div> </div> </div> <!-- "Gauge Value" input omitted --> <select id="dDirection"> <option value="Up">Up</option> <option value="Right">Right</option> <option value="Down">Down</option> <option value="Left">Left</option> </select>
// init Wijmo controls var linearGauge = new wijmo.gauge.LinearGauge('#dLinearGauge'), bulletGraph = new wijmo.gauge.BulletGraph('#dBulletGraph'), valueInput = new wijmo.input.InputNumber('#dValue'), menu = new wijmo.input.Menu('#dDirection'), lowerRange = new wijmo.gauge.Range(), middleRange = new wijmo.gauge.Range(), upperRange = new wijmo.gauge.Range(); // set Range propeties lowerRange.min = props.ranges.lower.min; lowerRange.max = props.ranges.lower.max; lowerRange.color = props.ranges.lower.color; middleRange.min = props.ranges.middle.min; middleRange.max = props.ranges.middle.max; middleRange.color = props.ranges.middle.color; upperRange.min = props.ranges.upper.min; upperRange.max = props.ranges.upper.max; upperRange.color = props.ranges.upper.color; // LinearGauge - set properties // format, min, max, and value omitted for brevity - identical to "Getting Started" linearGauge.direction = props.direction; linearGauge.showRanges = props.showRanges; linearGauge.pointer.thickness = props.ranges.pointerThickness; linearGauge.ranges.push(lowerRange); linearGauge.ranges.push(middleRange); linearGauge.ranges.push(upperRange); // set BulletGraph properties and add Range objects // format, min, max, and value omitted for brevity - identical to "Getting Started" bulletGraph.direction = props.direction; bulletGraph.showRanges = props.showRanges; bulletGraph.pointer.thickness = props.ranges.pointerThickness; bulletGraph.good = props.ranges.middle.max; bulletGraph.bad = props.ranges.middle.min; bulletGraph.target = props.ranges.target; // InputNumber - set properties // omitted for brevity - identical to "Getting Started" // Direction - set Menu properties menu.selectedValue = props.direction; menu.selectedIndexChanged.addHandler(function (sender) { // make sure there is a a selectedValue if (!sender.selectedValue) return; var direction = sender.selectedValue, dirCols = Array.prototype.slice.call(document.querySelectorAll('.direction-col')); // split or stack columns dirCols.forEach(function (el) { if (direction === 'Up' || direction === 'Down') { el.className += ' col-md-6'; } else { el.className = el.className.replace('col-md-6', ''); } }); // set Gauge.direction linearGauge.direction = direction; bulletGraph.direction = direction; // update gauge's CSS class if (direction === 'Up' || direction === 'Down') { linearGauge.hostElement.className += ' vertical-gauge'; bulletGraph.hostElement.className += ' vertical-gauge'; } else { bulletGraph.hostElement.className = bulletGraph.hostElement.className.replace('vertical-gauge', ''); linearGauge.hostElement.className = linearGauge.hostElement.className.replace('vertical-gauge', ''); } });
.vertical-gauge { height: 300px; width: 1.2em; }

## 样式

<div id="sLinearGauge" class="custom-gauge"></div> <div id="sRadialGauge" class="custom-gauge"></div> <!-- "Gauge Value" omitted for brevity -->
// init Wijmo controls var linearGauge = new wijmo.gauge.LinearGauge('#sLinearGauge'), radialGauge = new wijmo.gauge.RadialGauge('#sRadialGauge'), valueInput = new wijmo.input.InputNumber('#sValue'); // LinearGauge - set properties // format, min, max, and value omitted for brevity - identical to "Getting Started" linearGauge.showText = wijmo.gauge.ShowText.Value; // Radial Gauge - set properties // format, min, max, and value omitted for brevity - identical to "Getting Started" radialGauge.showText = wijmo.gauge.ShowText.Value; // InputNumber - set properties // omitted for brevity - identical to "Getting Started"
.custom-gauge .wj-pointer { fill: #ffa500; stroke: #cd853f; }

## 编辑值

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

<div id="evLinearGauge"></div> <div id="evRadialGauge"></div> <label> Read-Only&nbsp; <input id="evReadOnly" type="checkbox" /> </label>
// init Wijmo controls var linearGauge = new wijmo.gauge.LinearGauge('#evLinearGauge'), radialGauge = new wijmo.gauge.RadialGauge('#evRadialGauge'), isReadOnly = document.getElementById('evReadOnly'); // LinearGauge - set properties // format, min, max, and value omitted for brevity - identical to "Getting Started" linearGauge.step = props.step; linearGauge.isReadOnly = props.isReadOnly; // Radial Gauge - set properties // format, min, max, and value omitted for brevity - identical to "Getting Started" radialGauge.step = props.step; radialGauge.isReadOnly = props.isReadOnly; // isReadonly - set CheckBox properties isReadOnly.checked = props.isReadOnly; isReadOnly.addEventListener('change', function () { // determine isReadOnly checkbox's checked state var isReadOnly = this.checked; // update gauges linearGauge.isReadOnly = isReadOnly; radialGauge.isReadOnly = isReadOnly; });