Wijmo 5

Gauge入門

このページでは、WijmoのGaugeコントロールを使い始める方法を示します。 R {{ color.red }} G {{ color.green }} B {{ color.blue }}

はじめに

wijmo.gaugeモジュールにはLinearGaugeRadialGaugeBulletGraphコントロールを含まれます。これらのコントロールを使用して、数値情報を視覚的に表示および編集することができます。

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

  1. AngularJS、Wijmo、およびWijmoのAngularJSディレクティブへの参照を追加します。
  2. appモジュールにWijmo 5ディレクティブを含めます。
    var app = angular.module('app', ['wj']);
  3. データとロジックを提供するコントローラーを追加します。
  4. Wijmo Gaugeコントロールをページに追加し、そのvalue、min、maxプロパティを設定します。
  5. (オプション)ゲージの外観をカスタマイズする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" type="text/css" href="css/app.css" /> <script src="scripts/angular.js" type="text/javascript"></script> <script src="scripts/wijmo.js" type="text/javascript"></script> <script src="scripts/wijmo.gauge.js" type="text/javascript"></script> <script src="scripts/wijmo.angular.js" type="text/javascript"></script> <script src="scripts/app.js" type="text/javascript"></script> </head> <body ng-app="app" ng-controller="appCtrl"> <!-- Wijmo 5 LinearGauge directive --> <wj-linear-gauge value="props.value" min="{​{ props.min }}" max="{​{ props.max }}" format="{​{ props.format }}"> </wj-linear-gauge> <!-- Wijmo 5 RadialGauge directive --> <wj-radial-gauge value="props.value" min="{​{ props.min }}" max="{​{ props.max }}" format="{​{ props.format }}"> </wj-radial-gauge> <!-- Wijmo 5 InputNumber directive --> <div> <label>value</label> <wj-input-number value="props.value" min="{​{ props.min }}" max="{​{ props.max }}" format="{​{ props.format }}" step="{​{ props.step }}"> </wj-input-number> </div> </body> </html>
// declare app module var app = angular.module('app', ['wj']); // app controller provides data app.controller('appCtrl', function appCtrl($scope) { $scope.props = { value: 50, min: 0, max: 100, step: 10, format: 'n0' }; });

結果(ライブ):

編集

ゲージは情報を視覚的に表示するだけでなく、入力コントロールとして使用することもできます。この場合はスライダーのように動作します。

ゲージコントロールを入力に使用するには、isReadOnlyプロパティをfalseに設定します。ゲージをクリックまたはタップするだけで、ユーザーがゲージの現在の値を変更することができます。

入力コントロールとして使用する場合に、クリック、タップ、マウスホイール操作により現在の値を増減する量を決定するstepプロパティも用意されています。

showTicksプロパティを使用して、ゲージの目盛りを表示することもできます。stepプロパティは、目盛りの間隔を指定します。

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

<wj-linear-gauge value="props.value" min="{​{ props.min }}" max="{​{ props.max }}" format="{​{ props.format }}" step="{​{ props.step }}" show-ticks="{​{ props.showTicks }}" is-read-only="{​{ props.isReadOnly }}"> </wj-linear-gauge> <wj-radial-gauge value="props.value" min="{​{ props.min }}" max="{​{ props.max }}" format="{​{ props.format }}" step="{​{ props.step }}" show-ticks="{​{ props.showTicks }}" is-read-only="{​{ props.isReadOnly }}"> </wj-radial-gauge> <label> isReadOnly&nbsp; <input type="checkbox" ng-model="props.isReadOnly" /> </label>
// declare app module var app = angular.module('app', ['wj']); // app controller provides data app.controller('appCtrl', function appCtrl($scope) { $scope.props = { value: 50, min: 0, max: 100, step: 10, format: 'n0', isReadOnly: false showTicks: false }; });

結果(ライブ):


サムの表示

既定では、ゲージ現在の値を色で塗りつぶして示します。thumbSizeプロパティを使用すると、現在の値を強調表示する要素を追加することができます。

この例では、thumbSizeプロパティの使用方法を紹介します。また、ゲージのfacepointer範囲のthicknessプロパティの値を減らして、サムをより見やすくしています。

<wj-linear-gauge value="props.value" min="{​{ props.min }}" max="{​{ props.max }}" step="{​{ props.step }}" format="{{ props.format }}" is-read-only="false" is-animated="false" thumb-size="10"> <wj-range wj-property="face" thickness="0.25"></wj-range> <wj-range wj-property="pointer" thickness="0.25"></wj-range> </wj-linear-gauge> <wj-radial-gauge value="props.value" min="{​{ props.min }}" max="{​{ props.max }}" step="{​{ props.step }}" format="{​{ props.format }}" is-read-only="false" is-animated="false" thumb-size="10"> <wj-range wj-property="face" thickness="0.08"></wj-range> <wj-range wj-property="pointer" thickness="0.08"></wj-range> </wj-radial-gauge> <div class="app-input-group"> <label>value</label> <wj-input-number value="props.value" min="{​{ props.min }}" max="{​{ props.max }}" format="{​{ props.format }}" step="{​{ props.step }}"> </wj-input-number> </div>
// declare app module var app = angular.module('app', ['wj']); // app controller provides data app.controller('appCtrl', function appCtrl($scope) { $scope.props = { value: 50, min: 0, max: 100, step: 10, format: 'n0' }; });

結果(ライブ):

範囲の使用

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

Rangeオブジェクト自体には、各ゾーンをカスタマイズするためにminmaxcolorなどのプロパティがあります。

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

<wj-linear-gauge value="props.value" min="{​{ props.min }}" max="{​{ props.max }}" format="{​{ props.format }}" show-ranges="{​{ props.showRanges }}"> <wj-range wj-property="pointer" thickness="{​{ props.ranges.pointerThickness }}"></wj-range> <wj-range min="{​{ props.ranges.lower.min }}" max="{​{ props.ranges.lower.max }}" color="{​{ props.ranges.lower.color }}"></wj-range> <wj-range min="{​{ props.ranges.middle.min }}" max="{​{ props.ranges.middle.max }}" color="{​{ props.ranges.middle.color }}"></wj-range> <wj-range min="{​{ props.ranges.upper.min }}" max="{​{ props.ranges.upper.max }}" color="{​{ props.ranges.upper.color }}"></wj-range> </wj-linear-gauge> <wj-radial-gauge value="props.value" min="{​{ props.min }}" max="{​{ props.max }}" format="{​{ props.format }}" show-ranges="{​{ props.showRanges }}"> <wj-range wj-property="pointer" thickness="{​{ props.ranges.pointerThickness }}"></wj-range> <wj-range min="{​{ props.ranges.lower.min }}" max="{​{ props.ranges.lower.max }}" color="{​{ props.ranges.lower.color }}"></wj-range> <wj-range min="{​{ props.ranges.middle.min }}" max="{​{ props.ranges.middle.max }}" color="{​{ props.ranges.middle.color }}"></wj-range> <wj-range min="{​{ props.ranges.upper.min }}" max="{​{ props.ranges.upper.max }}" color="{​{ props.ranges.upper.color }}"></wj-range> </wj-radial-gauge> <div class="app-input-group"> <label>value</label> <wj-input-number value="props.value" min="{​{ props.min }}" max="{​{ props.max }}" format="{​{ props.format }}" step="{​{ props.step }}"> </wj-input-number> </div> <label> showRanges  <input type="checkbox" ng-model="props.showRanges" /> </label>
// declare app module var app = angular.module('app', ['wj']); // app controller provides data app.controller('appCtrl', function appCtrl($scope) { $scope.props = { format: 'p0', value: 50, min: 0, max: 100, step: 10, showRanges: true, ranges: { pointerThickness: 0.5, lower: { min: 0, max: 33, color: 'rgba(255,100,100,.5)' }, middle: { min: 33, max: 66, color: 'rgba(255,255,100,.5)' }, upper: { min: 66, max: 100, color: 'rgba(100,255,100,.5)' } }; });

結果(ライブ):

レイアウトと外観のプロパティ

ゲージコントロールは大部分をCSSでスタイルできるよう設計されていますが、レイアウトや外観に影響するプロパティをいくつか持っています。

以下の例では、直線ゲージや円形ゲージのこれらのプロパティの効果を示します。

<wj-linear-gauge value="props.value" is-read-only="false" min="{​{ props.min }}" max="{​{ props.max }}" step="{​{ props.step }}" format="{​{ props.format }}" thumb-size="{​{ props.thumbSize }}" show-text="{​{ props.showText }}" has-shadow="{​{ props.hasShadow }}" is-animated="{​{ props.isAnimated }}" direction="{​{ props.direction }}"> </wj-linear-gauge> <wj-radial-gauge value="props.value" is-read-only="false" min="{​{ props.min }}" max="{​{ props.max }}" step="{​{ props.step }}" format="{​{ props.format }}" thumb-size="{​{ props.thumbSize }}" show-text="{​{ props.showText }}" has-shadow="{​{ props.hasShadow }}" is-animated="{​{ props.isAnimated }}" auto-scale="{​{ props.autoScale }}" start-angle="{​{ props.startAngle }}" sweep-angle="{​{ props.sweepAngle }}"> </wj-radial-gauge>
// declare app module var app = angular.module('app', ['wj']); // app controller provides data app.controller('appCtrl', function appCtrl($scope) { $scope.props = { value: 50, min: 0, max: 100, step: 10, format: 'n0', thumbSize: null, showText: 'All', isAnimated: true, hasShadow: true, direction: 'Right', autoScale: true, startAngle: 0, sweepAngle: 180 }; });

結果(ライブ):

共通のプロパティ


最小値と最大値 すべて なし
LinearGaugeのプロパティ
RadialGaugeのプロパティ

テキスト値の表示

ゲージコントロールには、テキスト表示に影響する3つのプロパティがあります。

次の例は、getTextコールバックを使用してゲージ値のカスタム文字列を提供する方法を示しています。ゲージをクリックして値を変更して、表示される値が「Empty」、「Low」、「Good」、「Full」と変化することを確認します。

この例では、CSSを使用してフォントの色とサイズを変更しています。

<wj-radial-gauge class="text-gauge" value="props.value" is-read-only="false" show-ranges="false" get-text="getText"> <wj-range min="0" max="10" color="red"></wj-range> <wj-range min="10" max="25" color="yellow"></wj-range> <wj-range min="25" max="100" color="green"></wj-range> </wj-radial-gauge>
// getText callback to convert values into strings $scope.getText = function (gauge, part, value, text) { switch (part) { case 'value': if (value <= 10) return 'Empty!'; if (value <= 25) return 'Low...'; if (value <= 95) return 'Good'; return 'Full'; case 'min': return 'EMPTY'; case 'max': return 'FULL'; } return text; }
.text-gauge.wj-gauge text { fill: #7c7cff; font-weight: bold; }

結果(ライブ):

スタイル設定

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

この例では、"custom-gauge" CSSクラスをLinearGaugeとRadialGaugeに追加し、ゲージの面範囲とサムの外観をカスタマイズするCSSルールを定義しています。また、カスタムCSSルールは"wj-state-focused"クラスを使用して、ゲージがフォーカスを持っているときのサムサイズを増やしています。

<h4> 既定のスタイル </h4> <wj-linear-gauge is-read-only="false" min="0" max="255" step="5" value="color.red"> <wj-range wj-property="pointer" color="red"></wj-range> </wj-linear-gauge> <wj-linear-gauge is-read-only="false" min="0" max="255" step="5" value="color.green"> <wj-range wj-property="pointer" color="green"></wj-range> </wj-linear-gauge> <wj-linear-gauge is-read-only="false" min="0" max="255" step="5" value="color.blue"> <wj-range wj-property="pointer" color="blue"></wj-range> </wj-linear-gauge> <h4> カスタムCSS </h4> <wj-linear-gauge class="custom-gauge" thumb-size="10" has-shadow="false" is-read-only="false" min="0" max="255" step="5" value="color.red"> <wj-range wj-property="face" thickness="0.25"></wj-range> <wj-range wj-property="pointer" thickness="0.25" color="red"></wj-range> </wj-linear-gauge> <wj-linear-gauge class="custom-gauge" thumb-size="10" has-shadow="false" is-read-only="false" min="0" max="255" step="5" value="color.green"> <wj-range wj-property="face" thickness="0.25"></wj-range> <wj-range wj-property="pointer" thickness="0.25" color="green"></wj-range> </wj-linear-gauge> <wj-linear-gauge class="custom-gauge" thumb-size="10" has-shadow="false" is-read-only="false" min="0" max="255" step="5" value="color.blue"> <wj-range wj-property="face" thickness="0.25"></wj-range> <wj-range wj-property="pointer" thickness="0.25" color="blue"></wj-range> </wj-linear-gauge>
.custom-gauge.wj-gauge { padding: 0px 10px; } .custom-gauge.wj-gauge .wj-face path { fill: #d0d0d0; stroke: none; } .custom-gauge.wj-gauge .wj-pointer path { fill: #404040; stroke: none; } .custom-gauge.wj-gauge circle.wj-pointer { fill: #404040; stroke: none; } .custom-gauge.wj-gauge.wj-state-focused circle.wj-pointer { fill: red; stroke: black; stroke-width: 8px; }

結果(ライブ):

ゲージを使用して色を編集:      

既定のスタイル

カスタムCSS