Wijmo

Gauge入門

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

はじめに

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

  1. KnockoutJS、Wijmo、およびWijmoのKnockoutJSバインディングへの参照を追加します。
  2. データとロジックを提供するビューモデルを追加します。
  3. 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 LinearGauge directive --> <div data-bind="wjLinearGauge: { value: props.value, min: props.min, max: props.max, format: props.format }"></div> <!-- Wijmo RadialGauge directive --> <div data-bind="wjRadialGauge: { value: props.value, min: props.min, max: props.max, format: props.format }"></div> <!-- Wijmo InputNumber directive --> <div class="app-input-group"> <label>ゲージの値</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()); })();

結果(ライブ):

値の表示

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

以下の例は、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>ゲージの値</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' }">最小値と最大値</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) };

結果(ライブ):

最小値と最大値 すべて なし

範囲の使用

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

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

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

<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>ゲージの値</label> <div data-bind="wjInputNumber: { value: props.value, min: props.min, max: props.max, format: props.format, step: props.step }"></div> </div> <label> 範囲の表示  <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'; }) } };

結果(ライブ):

自動スケーリング

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

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

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

<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>ゲージの値</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> 自動スケール  <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) };

結果(ライブ):

方向

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

以下の例で、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>ゲージの値</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' }) } }

結果(ライブ):

スタイル設定

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

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

この例では、"custom-gauge" CSSクラスをLinearGaugeとRadialGaugeに追加し、オレンジ色のポインタを作成する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>ゲージの値</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; }

結果(ライブ):

値の編集

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

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

<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> 読み取り専用  <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) };

結果(ライブ):