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

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

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

  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 パラメータでデータコンテキストを制御する単純なコントローラーを作成します。
    スクリプト
    コードのコピー 
    <script type="text/javascript">
    var app = angular.module("MyApp", ["wijmo"]);
    function MyController($scope) {
        $scope.data = [{
                label: "North America",
                value: 18625,
                items: [{
                    label: "United States",
                    value: 16800
                },{
                    label: "Canada",
                    value: 1825
                }]
            }, {
                label: "Asia",
                value: 18934,
                items: [{
                    label: "China",
                    value: 9240
                },{
                    label: "Japan",
                    value: 4901
                },{
                    label: "India",
                    value: 1876
                },{
                    label: "South Korea",
                    value: 1304
                },{
                    label: "Indonesia",
                    value: 868
                },{
                    label: "Saudi Arabia",
                    value: 745
                }]
            }, {
                label: "Europe",
                value: 16685,
                items: [{
                    label: "Germany",
                    value: 3634
                },{
                    label: "France",
                    value: 2734
                },{
                    label: "United Kingdom",
                    value: 2522
                },{
                    label: "Russia",
                    value: 2096
                },{
                    label: "Italy",
                    value: 2071
                },{
                    label: "Spain",
                    value: 1358
                },{
                    label: "Turkey",
                    value: 820
                },{
                    label: "Netherlands",
                    value: 800
                },{
                    label: "Switzerland",
                    value: 650
                }]
            }, {
                label: "South America",
                value: 4554,
                items: [{
                    label: "Brazil",
                    value: 2245
                },{
                    label: "Mexico",
                    value: 1260
                },{
                    label: "Argentina",
                    value: 611
                },{
                    label: "Venezuela",
                    value: 438
                }]
            }, {
                label: "Australasia & Oceania",
                value: 1742,
                items: [{
                    label: "Australia",
                    value: 1560
                },{
                    label: "New Zealand",
                    value: 182
                }]
            }, {
                label: "Africa",
                value: 872,
                items: [{
                    label: "Nigeria",
                    value: 522
                },{
                    label: "South Africa",
                    value: 350
                }]
            }];
        $scope.labelFormatter= function () {
            return "Country: " + this.label + "<br/> GDP: " + this.value + " $BN";
        }
    }
</script>
  4. <body> タグ内に次のマークアップを追加して、ウィジェットを作成します。Angular を使用せずに jQuery でこの処理を行う方法については、Treemap の「クイックスタート」を参照してください。
    • <wij-treemap> ディレクティブを使用して、ウィジェットを作成します。 
      • ラベルを書式設定するため、label-formatter オプションを設定します。
      • ウィジェットの表示タイプを表す type オプションを正方形（squarified）に設定します。 
      • show-label および show-title オプションを true に設定して、ラベルとタイトルを wijtreemap に表示します。
    マークアップ
    コードのコピー 
    <wij-treemap id="treemap" label-formatter="labelFormatter" data="data" type="squarified" show-label="true" show-title="true" >
</wij-treemap>
  5. 作成されたウィジェットは、実際には次のように表示されます。

関連トピック

AngularJS クイックスタート
TreeMap

 

 

Copyright © GrapeCity inc. All rights reserved.