Wijmo 5

Gauge 101

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

入门

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

  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; });

Result (live):

显示值

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

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

<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; });

Result (live):

使用范围

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

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

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

<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; });

Result (live):

自动缩放

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

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

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

<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; });

Result (live):

方向

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

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

<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; }

Result (live):

样式

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

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

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

<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; }

Result (live):

编辑值

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

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

<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; });

Result (live):