Wijmo UI for the Web
AngularJS と wijlineargauge
Wijmo ユーザーガイド > Angular JS ディレクティブ > AngularJS と Gauge ウィジェット > AngularJS と wijlineargauge
全て展開全て展開
すべて折りたたむすべて折りたたむ

この Angular 導入ガイドでは、HTML マークアップ、jQuery スクリプト、および AngularJS ディレクティブを使用して、wijlineargauge を HTML プロジェクト内で使用する方法について学習します。

コントローラーとモデルをそれぞれ個別のファイルで設定する、より複雑なサンプルについては、弊社 Web サイト「AngularJS Directive Gallery」内の「Wijmo Gauges」を参照してください。

  1. 新しい HTML ページを作成するには、任意のテキストエディタで次のコードを追加し、.html 拡張子を付けてドキュメントを保存します。<HTML> タグと <body> タグが通常のタグとは異なることに注意してください。
    • <HTML> タグは、ng-app ディレクティブによって Angular アプリケーションとマークされ、さらに Wijmo を使用するように指定されます。
    • <body> タグを使用して、作成する Angular コントローラーのスコープを定義します。スコープには <div> などの別のタグも使用できますが、ここでは、body 全体を使用します。ng-controller ディレクティブは、このスコープ内で使用するコントローラーを指定します。

    ドロップダウンからマークアップをコピーします

  2. 依存ファイルへのリンクを HTML ページの <head> タグ内に追加します。最新の依存ファイルについては、「wijmo cdn」のコンテンツ配信ネットワーク（CDN）ファイルを参照してください。通常の参照に加え、Angular 用に 2 つのスクリプト参照を追加します。この参照は jQuery 参照の後に続ける必要があるので、最後の 2 行となります。
    • 1 つは AngularJS 自身です。
    • もう 1 つは、Wijmo の Angular javascript 統合ライブラリです。

    ドロップダウンして参照コードをコピーし、head タグ内に貼り付けます。

  3. <head> タグ内の参照の後に、次のスクリプトを追加します。このスクリプトは、アプリケーションが Wijmo を使用するように設定し、単純なコントローラーを作成します。       
    • コントローラーで $scope パラメータを使用して、データコンテキストを制御します。
    • コントローラーに、オプションの $locale パラメータを追加します。
    • value パラメータを設定します。これは、wijlineargauge および wijslider の両方に使用します。
    スクリプト
    コードのコピー 
    <script type="text/javascript">
    var app = angular.module("MyApp", ["wijmo"]);
    function MyController($scope, $locale) {
        $scope.value = 70;
    }
</script>
  4. <body> タグ内に次のマークアップを記述して、ウィジェットを作成します。Angular を使用せずに jQuery でこの処理を行う方法については、「Gaugeをカスタマイズする」を参照してください。
    • <wij-lineargauge> ディレクティブを使用してゲージウィジェットを作成し、要素内でいくつかのオプションを属性として設定します。
      • value オプションを設定して、コントローラーの「value」を指定します。
      • height および width オプションを設定します。
      • max および min オプションを設定して、ゲージに表示される値を制御します。
    • マークアップ内で要素をネストして、animation、face、labels、pointer、および ranges オプションを設定します。
      • animation ディレクティブ内で、enabled、duration、および easing 属性を設定します。
      • face ディレクティブの style 属性を設定して、ゲージの背景色および外枠の色を設定します。
      • labels ディレクティブの style 属性を設定して、ラベルフォントのスタイルを指定します。
      • pointer ディレクティブの style 属性を設定して、ポインタの背景色および外枠の色を設定します。
      • ranges ディレクティブ内で range ディレクティブをネストし、以下の多数の属性を指定します。
        startValue（start-value）、endValue（end-value）、startDistance（start-distance）、endDistance（end-distance）、startWidth（start-width）、endWidth（end-width）
      • ネストした range ディレクティブ内で、style 属性によって範囲の色および不透明度を設定します。
    • <wij-slider> ディレクティブを使用してスライダーウィジェットを作成し、要素内でいくつかのオプションを属性として設定します。
      • value オプションを設定して、コントローラーの「value」を指定します。
      • width  オプションを設定します。
    マークアップ
    コードのコピー 
    <wij-lineargauge value="value" height="120" width="400" max="100" min="0">
    <animation enabled="true" duration="400" easing=">"></animation>
    <face>
        <style fill="270-#FFFFFF-#D9E3F0" stroke="#7BA0CC" stroke-width="2"></style>
    </face>
    <labels>
        <style fill="#1E395B" font-size="12" font-weight="800"></style>
    </labels>
    <pointer shape="rect" length="0.6">
        <style fill="#1E395B" stroke="#7BA0CC" stroke-width="1" opacity="1"></style>
    </pointer>
    <ranges>
        <range start-value="80" end-value="100" start-distance="0.85" end-distance="0.85" start-width="0.5" end-width="0.5">
            <style fill="90-#3DA1D8-#3A6CAC" opacity="1" stroke="none"></style>
        </range>
    </ranges>
</wij-lineargauge>
<p>Drag and release the slider to change the gauge's value.</p>
<wij-slider value="value" width="400px"></wij-slider>
  5. HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のように表示されます。

関連トピック

AngularJS クイックスタート
AngularJS と wijslider
LinearGauge
Slider

参照

wijlineargauge メソッド
value フィールド
height フィールド
width フィールド
min フィールド
max フィールド
animation フィールド
face フィールド
labels フィールド
pointer フィールド
ranges フィールド
wijslider メソッド
value フィールド

 

 

Copyright © GrapeCity inc. All rights reserved.