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

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

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

  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 を使用するように設定し、モデルおよびコントローラーを作成します。
    • 2 つのデータフィールドを指定して、コントローラーに設定したデータにリンクするモデルを使用します。
    • コントローラーで $scope パラメータを使用して、モデルのデータコンテキストを制御します。
    • コントローラーに、オプションの $locale パラメータを追加します。
    • 2 つのスコープを追加します。各スコープはそれぞれ、コントローラ内のリストに 20 のデータ行を追加します。
    Angular を使用せずに jQuery でこの処理を行う方法については、「マーカーの変更」を参照してください。
    スクリプト
    コードのコピー 
    <script type="text/javascript">
    var app = angular.module("MyApp", ["wijmo"]);
    //Type class
    function Type(data) {
        this.Weight = data.Weight;
        this.Height = data.Height;
    };
    function MyController($scope, $locale) {
        $scope.Female = [
            new Type({Weight: 161.4, Height: 63.4}), 
            new Type({Weight: 169.0, Height: 58.2}), 
            new Type({Weight: 166.2, Height: 58.6}), 
            new Type({Weight: 159.4, Height: 45.7}), 
            new Type({Weight: 162.5, Height: 52.2}), 
            new Type({Weight: 159.0, Height: 48.6}), 
            new Type({Weight: 162.8, Height: 57.8}), 
            new Type({Weight: 159.0, Height: 55.6}), 
            new Type({Weight: 179.8, Height: 66.8}), 
            new Type({Weight: 162.9, Height: 59.4}), 
            new Type({Weight: 161.0, Height: 53.6}), 
            new Type({Weight: 151.1, Height: 73.2}), 
            new Type({Weight: 168.2, Height: 53.4}), 
            new Type({Weight: 168.9, Height: 69.0}), 
            new Type({Weight: 173.2, Height: 58.4}), 
            new Type({Weight: 174.0, Height: 73.6}), 
            new Type({Weight: 162.6, Height: 61.4}), 
            new Type({Weight: 174.0, Height: 55.5}), 
            new Type({Weight: 162.6, Height: 63.6}), 
            new Type({Weight: 161.3, Height: 60.9})
        ];
        $scope.Male = [
            new Type({Weight: 175.0, Height: 70.2}), 
            new Type({Weight: 174.0, Height: 73.4}), 
            new Type({Weight: 165.1, Height: 70.5}), 
            new Type({Weight: 177.0, Height: 68.9}), 
            new Type({Weight: 192.0, Height: 102.3}), 
            new Type({Weight: 176.5, Height: 68.4}), 
            new Type({Weight: 169.4, Height: 65.9}), 
            new Type({Weight: 182.1, Height: 75.7}), 
            new Type({Weight: 179.8, Height: 84.5}), 
            new Type({Weight: 175.3, Height: 87.7}), 
            new Type({Weight: 184.9, Height: 86.4}), 
            new Type({Weight: 177.3, Height: 73.2}), 
            new Type({Weight: 167.4, Height: 53.9}), 
            new Type({Weight: 178.1, Height: 72.0}), 
            new Type({Weight: 168.9, Height: 55.5}), 
            new Type({Weight: 174.0, Height: 70.9}), 
            new Type({Weight: 167.6, Height: 64.5}), 
            new Type({Weight: 170.2, Height: 77.3}), 
            new Type({Weight: 167.6, Height: 72.3}), 
            new Type({Weight: 188.0, Height: 87.3})
        ];
    }
</script>
  4. <body> タグ内に次のマークアップを記述して、ウィジェットを作成します。
    • <wij-wijscatterchart> ディレクティブを使用してウィジェットを作成し、height および width オプションを、要素内で属性として設定します。
    • マークアップ内で要素をネストして、axis、header、legend、および seriesList オプションを設定します。
      • axis ディレクティブ内に y 軸をネストし、text オプションを設定します。
      • ヘッダテキストは、グラフのタイトルを表示するように設定します。
      • legend ディレクティブの visible 属性を true に設定し、凡例を表示します。
      • series-list ディレクティブ内に、2 つの系列オブジェクトをネストします。1 つは data-source ディレクティブを「Female」に、もう 1 つは「Male」にそれぞれ設定し、marker-type 属性もそれぞれ別の形に設定します。
      • それぞれの系列オブジェクト内では、data ディレクティブをネストします。さらに、x および y オプションをネストして、モデルのデータフィールドにバインドします。
    マークアップ
    コードのコピー 
    <wij-scatterchart height="400" width="600">
    <axis>
        <y text="Total Hardware"></y>
    </axis>
    <header text="Height Versus Weight of 40 Individuals by Gender"></header>
    <legend visible="true"></legend>
    <series-list>
        <series label="Female" data-source="Female" marker-type="box">
            <data>
                <x bind="Weight"></x>
                <y bind="Height"></y>
            </data>
        </series>
        <series label="Male" data-source="Male" marker-type="diamond">
            <data>
                <x bind="Weight"></x>
                <y bind="Height"></y>
            </data>
        </series>
    </series-list>
</wij-scatterchart>
  5. HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のように表示されます。

関連トピック

参照

wijscatterchart メソッド
axis フィールド
header フィールド
legend フィールド
seriesList フィールド

 

 

Copyright © GrapeCity inc. All rights reserved.