Wijmo UI for the Web
AngularJS と wijlinechart
全て展開全て展開
すべて折りたたむすべて折りたたむ

この Angular 導入ガイドでは、HTML マークアップ、jQuery スクリプト、および AngularJS ディレクティブを使用して、LineChart ウィジェットを 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 を使用するように設定し、モデルおよびコントローラーを作成します。
    • 4 つのデータフィールドを指定するモデルを使用して、コントローラーに設定するデータにリンクします。
    • コントローラーで $scope パラメータを使用して、モデルのデータコンテキストを制御します。
    • コントローラーに、オプションの $locale パラメータを追加します。
    • コントローラーのリストに、3 つのデータ行を追加します。
    Angular を使用せずに jQuery でこの処理を行う方法については、「データバインディング」を参照してください(「複数のデータメンバを持つ複数系列グラフ」)。
    スクリプト
    コードのコピー
    <script type="text/javascript">
        var app = angular.module("MyApp", ["wijmo"]);
        //Region class
        function Region(data) {
            this.RegionName = data.RegionName;
            this.Desktops = data.Desktops;
            this.Notebooks = data.Notebooks;
            this.Tablets = data.Tablets;
        };
        function MyController($scope, $locale) {
            $scope.list = [
                new Region(
                    {
                        RegionName: "West", 
                        Desktops: 5,
                        Notebooks: 3,
                        Tablets: 7
                    }),
                    ({
                        RegionName: "Central", 
                        Desktops: 1,
                        Notebooks: 6,
                        Tablets: 8
                    }),
                    ({
                        RegionName: "East", 
                        Desktops: 2,
                        Notebooks: 4,
                        Tablets: 3
                    })
            ];
        }
    </script>
  4. <body> タグ内に次のマークアップを記述して、ウィジェットを作成します。
    • <wij-LineChart> ディレクティブを使用してウィジェットを作成し、要素内でいくつかのオプションを属性として設定します。
      • dataSource オプション(data-source ディレクティブ)の設定により、コントローラーのリストを指定します。
      • height および width オプションを設定します。
      • showChartLabels オプション(show-chart-labels ディレクティブ)を false に設定します。
    • マークアップ内で要素をネストして、axisdataheader、および seriesList オプションを設定します。
      • axis ディレクティブ内に y 軸をネストし、origin オプションを 0 に設定します。
      • data ディレクティブの x bind 属性を、RegionName フィールドにバインドするように設定します。これにより、このフィールドが系列リスト内の全系列に適用されます。
      • ヘッダテキストは、グラフのタイトルを表示するように設定します。
      • series-list ディレクティブ内に各系列をネストし、ヒント(ツールチップテキスト)および凡例のラベルを指定します。また、data ディレクティブには y オプションをネストし、モデルのデータフィールドにバインドするように指定します。
    マークアップ
    コードのコピー
    <wij-linechart data-source="list" height="400" width="600" show-chart-labels="false">
        <axis>
            <y origin="0"></y>
        </axis>
        <data>
            <x bind="RegionName"></x>
        </data>
        <header text="Hardware Distribution"></header>
        <series-list>
            <series label="Desktops">
                <data>
                    <y bind="Desktops"></y>
                </data>
            </series>
            <series label="Notebooks">
                <data>
                    <y bind="Notebooks"></y>
                </data>
            </series>
            <series label="Tablets">
                <data>
                    <y bind="Tablets"></y>
                </data>
            </series>
        </series-list>
    </wij-linechart>
  5. HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のように表示されます。

関連トピック

参照

 

 


Copyright © GrapeCity inc. All rights reserved.