Wijmo

Gauge入門

このページでは、WijmoのGaugeコントロールを使い始める方法を示します。

はじめに

GaugeコントロールをJavaScriptアプリケーションで使用する手順は以下のとおりです。

  1. Wijmoへの参照を追加します。
  2. Wijmoコントロールのホストとして機能するマークアップを追加します。
  3. JavaScriptを使用してWijmoコントロールを初期化します。
  4. (オプション)コントロールの外観をカスタマイズするCSSを追加します。
HTML
<div id="gsLinearGauge"></div> <div id="gsRadialGauge"></div> <div class="app-input-group"> <label>ゲージの値</label> <input id="gsValue"/> </div>
JS var gsLinearGauge = new wijmo.gauge.LinearGauge('#gsLinearGauge', { value: props.value, min: props.min, max: props.max, format: props.format, }); var gsRadialGauge = new wijmo.gauge.RadialGauge('#gsRadialGauge', { value: props.value, min: props.min, max: props.max, format: props.format, }); var gsValueInput = new wijmo.input.InputNumber('#gsValue', { value: props.value, min: props.min, max: props.max, format: props.format, step: props.step, valueChanged: function (s, e) { gsLinearGauge.value = s.value; gsRadialGauge.value = s.value; } });

結果(ライブ):

値の表示

ゲージコントロールには、ゲージにどの値をテキストとして表示するかを決定するshowTextプロパティがあります。 showTextプロパティの有効な値は以下の4つです。

以下の例は、showTextプロパティが変更されたときにどのようになるかを示します。

HTML
<div id="dvLinearGauge"></div> <div id="dvRadialGauge"></div> <div class="app-input-group"> <label>ゲージの値</label> <input id="dvValue" type="text" /> </div> <select id="dvShowTextMenu"> <option value="Value">Value</option> <option value="MinMax">最小値と最大値</option> <option value="All">All</option> <option value="None">None</option> </select>
JS
var dvLinearGauge = new wijmo.gauge.LinearGauge('#dvLinearGauge', { value: props.value, min: props.min, max: props.max, format: props.format, showText: props.showText }); var dvRadialGauge = new wijmo.gauge.RadialGauge('#dvRadialGauge', { value: props.value, min: props.min, max: props.max, format: props.format, showText: props.showText }); var dvValueInput = new wijmo.input.InputNumber('#dvValue', { value: props.value, min: props.min, max: props.max, format: props.format, step: props.step, valueChanged: function (s, e) { dvLinearGauge.value = s.value; dvRadialGauge.value = s.value; } }); var showTextMenu = new wijmo.input.Menu('#dvShowTextMenu', { selectedIndexChanged: function (s, e) { if (s.selectedValue) { dvLinearGauge.showText = s.selectedValue; dvRadialGauge.showText = s.selectedValue; s.header = '<b>Show Text</b>: ' + s.text; } }, selectedValue: props.showText });

結果(ライブ):

範囲の使用

すべてのWijmoゲージには、Rangeオブジェクトの配列を含むrangesプロパティがあります。 デフォルトでは、関心ゾーンを示すために範囲がゲージの表面に表示されます。ただし、showRangesプロパティを使用して範囲を非表示にすることもできます。 その代わりに、現在のゲージ値を含む範囲の色がゲージポインタに適用されます。

minmaxcolorプロパティを使用して、各Rangeオブジェクトをカスタマイズすることができます。

以下のサンプルは、LinearGauge、RadialGauge、およびBulletGraphで範囲を使用する方法を示します。

HTML
<div id="urLinearGauge"></div> <div id="urBulletGraph"></div> <div id="urRadialGauge"></div> <div class="app-input-group"> <label>ゲージの値</label> <input id="urValue" type="text" /> </div> <label> 範囲の表示  <input id="urShowRanges" type="checkbox" /> </label>
JS
// create the ranges var lowerRange = new wijmo.gauge.Range(props.ranges.lower), middleRange = new wijmo.gauge.Range(props.ranges.middle), upperRange = new wijmo.gauge.Range(props.ranges.upper); // create the gauges var urLinearGauge = new wijmo.gauge.LinearGauge('#urLinearGauge', { value: props.value, min: props.min, max: props.max, format: props.format, pointer: { thickness: props.ranges.pointerThickness }, ranges: [ lowerRange, middleRange, upperRange ] }); var urBulletGraph = new wijmo.gauge.BulletGraph('#urBulletGraph', { 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 }); var urRadialGauge = new wijmo.gauge.RadialGauge('#urRadialGauge', { value: props.value, min: props.min, max: props.max, format: props.format, pointer: { thickness: props.ranges.pointerThickness }, ranges: [ lowerRange, middleRange, upperRange ] }); // change value var urValueInput = new wijmo.input.InputNumber('#urValue', { value: props.value, min: props.min, max: props.max, format: props.format, step: props.step, valueChanged: function (s, e) { urLinearGauge.value = s.value; urBulletGraph.value = s.value; urRadialGauge.value = s.value; } }); // showRanges checkbox var showRanges = document.getElementById('urShowRanges'); showRanges.checked = props.showRanges; showRanges.addEventListener('click', function (e) { var show = e.target.checked; urLinearGauge.showRanges = show; urBulletGraph.showRanges = show; urRadialGauge.showRanges = show; });

結果(ライブ):

自動スケーリング

RadialGaugeには、ゲージのレイアウトを設定するためにstartAnglesweepAngleの2つのプロパティがあります。 startAngleプロパティは、RadialGaugeの開始角度(回転)を指定します。 sweepAngleプロパティは、RadialGaugeの弧の長さを表す角度を指定します。 すべての角度は9時の位置から時計回りに測定されます。

RadialGaugeにはautoScaleプロパティもあります。 autoScaleプロパティがtrueに設定されている場合は、ゲージを含む要素が満たされるようにRadialGaugeが自動的に拡大します。

以下の例では、startAnglesweepAngleautoScaleの各プロパティをリアルタイムに調整できます。

HTML
<div id="asRadialGauge"></div> <div class="app-input-group"> <label>ゲージの値</label> <input id="asValue" type="text" /> </div> <div class="app-input-group"> <label>Start Angle</label> <input id="asStartAngle" type="text" /> </div> <div class="app-input-group"> <label>Sweep Angle</label> <input id="asSweepAngle" type="text" /> </div> <label> 自動スケール  <input id="asAutoScale" type="checkbox" /> </label>
JS
var asRadialGauge = new wijmo.gauge.RadialGauge('#asRadialGauge', { value: props.value, min: props.min, max: props.max, format: props.format, startAngle: props.startAngle, sweepAngle: props.sweepAngle, autoScale: props.autoScale }); var asValueInput = new wijmo.input.InputNumber('#asValue', { value: props.value, min: props.min, max: props.max, format: props.format, step: props.step, valueChanged: function (s, e) { asRadialGauge.value = s.value; } }); var asStartAngleInput = new wijmo.input.InputNumber('#asStartAngle', { value: props.startAngle, min: -360, max: 360, step: 45, valueChanged: function (s, e) { asRadialGauge.startAngle = s.value; } }); var asSweepAngleInput = new wijmo.input.InputNumber('#asSweepAngle', { value: props.sweepAngle, min: 0, max: 360, step: 45, valueChanged: function (s, e) { asRadialGauge.sweepAngle = s.value; } }); // toggle autoScale property var asAutoScaleInput = document.getElementById('asAutoScale'); asAutoScaleInput.checked = props.autoScale; asAutoScaleInput.addEventListener('click', function (e) { asRadialGauge.autoScale = e.target.checked; });

結果(ライブ):

Gauge 方向

RadialGaugeのstartAngleプロパティとsweepAngleプロパティは、LinearGaugeまたはBulletGraphには適用されません。 その代わりに、LinearGaugeとBulletGraphには、ゲージをどのように表示するかを決定するdirectionプロパティがあります。 directionプロパティのオプションは以下の4つです。

以下の例で、directionプロパティを変更したときにどのようになるかを確認できます。

HTML
<div class="row"> <div class="direction-col"> <div id="dLinearGauge"></div> </div> <div class="direction-col"> <div id="dBulletGraph"></div> </div> </div> <div class="app-input-group"> <label>ゲージの値</label> <input id="dValue" type="text" /> </div> <select id="dDirection"> <option value="Up">Up</option> <option value="Right">Right</option> <option value="Down">Down</option> <option value="Left">Left</option> </select>
JS
var dLinearGauge = new wijmo.gauge.LinearGauge('#dLinearGauge', { value: props.value, min: props.min, max: props.max, format: props.format, pointer: { thickness: props.ranges.pointerThickness }, ranges: [ lowerRange, middleRange, upperRange ] }); var dBulletGraph = new wijmo.gauge.BulletGraph('#dBulletGraph', { 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 }); var dValueInput = new wijmo.input.InputNumber('#dValue', { value: props.value, min: props.min, max: props.max, format: props.format, step: props.step, valueChanged: function (s, e) { dLinearGauge.value = s.value; dBulletGraph.value = s.value; } }); var dDirection = new wijmo.input.Menu('#dDirection', { selectedIndexChanged: function (s, e) { if (s.selectedValue) { var direction = s.selectedValue, vertical = direction.match(/Up|Down/i) != null; // update gauge direction dLinearGauge.direction = direction; dBulletGraph.direction = direction; // update CSS wijmo.toggleClass(dLinearGauge.hostElement, 'vertical-gauge', vertical); wijmo.toggleClass(dBulletGraph.hostElement, 'vertical-gauge', vertical); var dirCols = document.querySelectorAll('.direction-col'); for (var i = 0; i < dirCols.length; i++) { wijmo.toggleClass(dirCols[i], 'col-md-6', vertical); } // update menu text s.header = '<b>Direction</b>: ' + s.text; } }, selectedValue: props.direction });
CSS
.vertical-gauge { height: 300px; width: 1.2em; margin-left: auto; margin-right: auto; }

結果(ライブ):

スタイル設定

ゲージコントロールの外観は、ほとんどがCSSで定義されます。 デフォルトテーマに加えてプロフェッショナルなデザインのテーマが多数用意されており、すべてのWijmoコントロールの外観をカスタマイズして一貫性のある魅力的な見た目を提供できます。

ゲージの外観はCSSを使用してカスタマイズできます。 そのためには、デフォルトテーマから新しいCSSファイルにCSSルールをコピーし、必要に応じてプロパティを変更します。

この例では、"custom-gauge" CSSクラスをLinearGaugeとRadialGaugeに追加し、オレンジ色のポインタを作成するCSSルールを定義しています。

HTML
<div id="sLinearGauge" class="custom-gauge"></div> <div id="sRadialGauge" class="custom-gauge"></div> <div class="app-input-group"> <label>ゲージの値</label> <input id="sValue" type="text" /> </div>
JS
var sLinearGauge = new wijmo.gauge.LinearGauge('#sLinearGauge', { value: props.value, min: props.min, max: props.max, format: props.format, showText: 'Value' }); var sRadialGauge = new wijmo.gauge.RadialGauge('#sRadialGauge', { value: props.value, min: props.min, max: props.max, format: props.format, showText: 'Value' }); var sValueInput = new wijmo.input.InputNumber('#sValue', { value: props.value, min: props.min, max: props.max, format: props.format, step: props.step, valueChanged: function (s, e) { sLinearGauge.value = s.value; sRadialGauge.value = s.value; } });
CSS
/* orange gauge pointer */ .wj-gauge.custom-gauge .wj-pointer { fill: #ffa500; stroke: #cd853f; }

結果(ライブ):

値の編集

ゲージコントロールはシンプルなインジケーターとしてだけでなく、isReadOnlyプロパティをfalseに設定することで入力コントロールとしても使用できます。 入力コントロールとして使用する場合に現在の値を増減する量を決定するstepプロパティも用意されています。

以下の例は、LinearGaugeおよびRadialGaugeコントロールでisReadOnlyプロパティとstepプロパティを使用する方法を示します。

HTML
<div id="evLinearGauge"></div> <div id="evRadialGauge"></div> <label> isReadOnly  <input id="evReadOnly" type="checkbox" /> </label>
JS
var evLinearGauge = new wijmo.gauge.LinearGauge('#evLinearGauge', { value: props.value, min: props.min, max: props.max, format: props.format, isReadOnly: props.isReadOnly, step: props.step, valueChanged: function (s, e) { evRadialGauge.value = s.value; } }); var evRadialGauge = new wijmo.gauge.RadialGauge('#evRadialGauge', { value: props.value, min: props.min, max: props.max, format: props.format, isReadOnly: props.isReadOnly, step: props.step, valueChanged: function (s, e) { evLinearGauge.value = s.value; } }); // toggle isReadOnly property var isReadOnly = document.getElementById('evReadOnly'); isReadOnly.checked = props.isReadOnly; isReadOnly.addEventListener('click', function (e) { var isReadOnly = e.target.checked; evLinearGauge.isReadOnly = isReadOnly; evRadialGauge.isReadOnly = isReadOnly; });

結果(ライブ):

カスタムSVG要素

デフォルトでは、Wijmoのラジアルゲージは、ゲージの現在の値を示すためにカラーセクタとテキスト要素を使用します。 この結果、きれいで読みやすいようになります。

より伝統的な針スタイルのポインタを使用する場合は、追加のSVGシェイプをコントロールに追加し、変形を適用して針を移動させることができます。

HTML
<div id="csvgRadialGauge"></div>
JS
var csvgRadialGauge = new wijmo.gauge.RadialGauge('#csvgRadialGauge', { min: 0, max: 100, value: 25, startAngle: -45, sweepAngle: 270, showTicks: true, tickSpacing: 10, showText: 'Value', isReadOnly: false, refreshed: updateNeedle, valueChanged: updateNeedle }); // update needle element when gauge size or value change // rounded (drop-shaped) needle function updateNeedle(gauge) { // add needle element if necessary var needle = gauge.hostElement.querySelector('.needle'), cap = gauge.hostElement.querySelector('.cap'); if (!needle) { var svg = gauge.hostElement.querySelector('svg'); needle = document.createElementNS('http://www.w3.org/2000/svg', 'path'); wijmo.addClass(needle, 'needle'); svg.appendChild(needle); cap = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); wijmo.addClass(cap, 'cap'); svg.appendChild(cap); } // update needle parameters var args = getArgs(gauge); needle.setAttribute('d', wijmo.format('M {lft} {y} A {wid} {wid} 0 0 0 {rgt} {y} L {x} {top} Z', args)); needle.setAttribute('transform', wijmo.format('rotate({angle} {x} {y})', args)); cap.setAttribute('cx', args.x); cap.setAttribute('cy', args.y); cap.setAttribute('r', args.capRadius); } // get arguments needed for the needle element function getArgs(gauge) { var rc = gauge.clientSize, cx = rc.width / 2, cy = rc.height / 2, r = Math.min(rc.width, rc.height) / 2, wid = r / 10, pct = (gauge.value - gauge.min) / (gauge.max - gauge.min), angle = gauge.startAngle + gauge.sweepAngle * wijmo.clamp(pct, 0, 1) - 90; return { angle: angle, x: cx.toFixed(4), y: cy.toFixed(4), wid: wid.toFixed(4), capRadius: (wid * 1.2).toFixed(4), lft: (cx - wid).toFixed(4), rgt: (cx + wid).toFixed(4), top: (cy - r).toFixed(4), bot: (cy + wid).toFixed(4) } }
CSS
.wj-radialgauge .needle { /* pointer needle */ fill: orange; stroke: black; stroke-width: 1px; transition: transform 400ms; } .wj-radialgauge .cap { /* needle cap */ fill: orange; stroke: black; stroke-width: 2px; } #csvgRadialGauge .wj-value { /* move value text down */ transform: translateY(1.75em) }

結果(ライブ):