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

この Angular 導入ガイドでは、HTML マークアップ、jQuery スクリプト、および AngularJS ディレクティブを使用して、wijradialgauge を 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 パラメータを追加します。
    • wijradialgauge に使用する value パラメータを設定します。
    スクリプト
    コードのコピー 
    <script type="text/javascript">
    var app = angular.module("MyApp", ["wijmo"]);
    function MyController($scope) {
        $scope.value = 90;
    }
</script>
  4. <body> タグ内に次のマークアップを記述して、ウィジェットを作成します。Angular を使用せずに jQuery でこの処理を行う方法については、「移動範囲にカスタムゾーンの設定」を参照してください。
    • <wij-wijradialgauge> ディレクティブを使用してウィジェットを作成し、要素内でいくつかのオプションを属性として設定します。
      • value オプションを設定して、コントローラーの「value」を指定します。
      • max および min オプションを設定します。
    • マークアップ内で要素をネストして、ranges オプションに range 要素の配列を指定します。また、各 range 内で、以下のいくつかのオプションを属性として設定します。
      • startValue 属性（start-value ディレクティブ）を設定して、範囲の描画を開始する位置を設定します。
      • endValue 属性（end-value ディレクティブ）を設定して、範囲の描画を終了する位置を設定します。
      • startDistance 属性（start-distance ディレクティブ）を使用して、範囲の開始位置を描画するための、ゲージ文字盤の中心から端までの距離の割合（%）を設定します。
      • endDistance 属性（end-distance ディレクティブ）を使用して、範囲の終了位置を描画するための、ゲージ文字盤の中心から端までの距離の割合（%）を設定します。
      • startWidth 属性（start-width ディレクティブ）を使用して、範囲の開始位置を描画する太さを設定します。
      • endWidth 属性（end-width ディレクティブ）を使用して、範囲の終了位置を描画する太さを設定します。
      • 各 range ディレクティブ内で style ディレクティブをネストし、範囲の色および幅を設定します。
    マークアップ
    コードのコピー 
    <wij-radialgauge value="70" max="100" min="0">
    <ranges>
        <range start-value="0" end-value="100" start-distance="0.64" end-distance="0.64" start-width="10" end-width="10" >
            <style fill="Grey" stroke="none"></style>
        </range>
        <range start-value="40" end-value="60" start-distance="0.58" end-distance="0.58" start-width="10" end-width="10">
            <style fill="Yellow" stroke="Yellow" stroke-width="1.5"></style>
        </range>
        <range start-value="60" end-value="80" start-distance="0.58" end-distance="0.58" start-width="10" end-width="10">
            <style fill="Orange" stroke="Orange" stroke-width="1.5"></style>
        </range>
        <range start-value="80" end-value="100" start-distance="0.58" end-distance="0.58" start-width="10" end-width="10">
            <style fill="Red" stroke="Red" stroke-width="1.5"></style>
        </range>
    </ranges>
</wij-radialgauge>
  5. HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のように表示されます。

関連トピック

RadialGauge
AngularJS クイックスタート

参照

wijradialgauge メソッド
ranges フィールド

 

 

Copyright © GrapeCity inc. All rights reserved.