Wijmo

Gauge入門

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

はじめに

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

  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>ゲージの値</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; });

結果(ライブ):

値の表示

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

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

<div id="dvLinearGauge"></div> <div id="dvRadialGauge"></div> <!-- "ゲージの値" input omitted --> <select id="dvShowTextMenu"> <option value="Value">Value</option> <option value="MinMax">最小値と最大値</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; });

結果(ライブ):

範囲の使用

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

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

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

<div id="urLinearGauge"></div> <div id="urBulletGraph"></div> <div id="urRadialGauge"></div> <!-- "ゲージの値" input omitted --> <label> 範囲の表示&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には、ゲージのレイアウトを設定するためにstartAnglesweepAngleの2つのプロパティがあります。 startAngleプロパティは、RadialGaugeの開始角度(回転)を指定します。 sweepAngleプロパティは、RadialGaugeの弧の長さを表す角度を指定します。 どちらのプロパティも、角度は9時の位置から時計回りに測定されます。

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

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

<div id="asRadialGauge"></div> <!-- "ゲージの値" 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のstartAngleプロパティとsweepAngleプロパティは、LinearGaugeまたはBulletGraphには適用されません。 その代わりに、LinearGaugeとBulletGraphには、ゲージをどのように表示するかを決定するdirectionプロパティがあります。 directionプロパティのオプションは以下の4つです。

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

<div class="row"> <div class="direction-col"> <div id="dLinearGauge"></div> </div> <div class="direction-col"> <div id="dBulletGraph"></div> </div> </div> <!-- "ゲージの値" 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 selectedValue if (!sender.selectedValue) return; // get the data we need var direction = sender.selectedValue, vertical = direction.match(/Up|Down/i), dirCols = Array.prototype.slice.call(document.querySelectorAll('.direction-col')); // split or stack columns dirCols.forEach(function (el) { wijmo.toggleClass(el, 'col-md-6', vertical); }); // set Gauge.direction linearGauge.direction = direction; bulletGraph.direction = direction; // update gauge's CSS class wijmo.toggleClass(linearGauge.hostElement, 'vertical-gauge', vertical); wijmo.toggleClass(bulletGraph.hostElement, 'vertical-gauge', vertical); });
.vertical-gauge { height: 300px; width: 1.2em; }

結果(ライブ):

スタイル設定

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

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

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

<div id="sLinearGauge" class="custom-gauge"></div> <div id="sRadialGauge" class="custom-gauge"></div> <!-- "ゲージの値" 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プロパティも用意されています。

以下の例は、LinearGaugeおよびRadialGaugeコントロールでisReadOnlyプロパティと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; });

結果(ライブ):