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

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

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

  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 パラメータを追加します。
    • MyTooltips 関数を追加して、hint オプションに使用します。
    • コントローラーのリストに、6 つのデータ行を追加します。
    Angular を使用せずに jQuery でこの処理を行う方法については、「すべての数値の書式設定」を参照してください。
    スクリプト
    コードのコピー 
    <script type="text/javascript">
    var app = angular.module("MyApp", ["wijmo"]);
    //AutoMaker class
    function AutoMaker(data) {
        this.Maker = data.Maker;
        this.Sales = data.Sales;
    };
    
    //MyTooltips class
    function MyTooltips(){
        return this.data.label + '\n ' +  Globalize.format(this.y, "p0") + '';
    };

    function MyController($scope, $locale) {
        $scope.list = [
              new AutoMaker({ Maker: "Ford", Sales: .05 }),
              new AutoMaker({ Maker: "GM", Sales: .04 }),
              new AutoMaker({ Maker: "Chrysler", Sales: .21 }),
              new AutoMaker({ Maker: "Toyota", Sales: .27 }),
              new AutoMaker({ Maker: "Nissan", Sales: .1 }),
              new AutoMaker({ Maker: "Honda", Sales: .24 })
        ];
    }
</script>
  4. <body> タグ内に次のマークアップを記述して、ウィジェットを作成します。
    • <wij-barchart> ディレクティブを使用してウィジェットを作成し、要素内でいくつかのオプションを属性として設定します。
      • dataSource オプション（data-source ディレクティブ）の設定により、コントローラーのリストを指定します。
      • height および width オプションを設定します。
      • chartLabelFormatString オプション（chart-label-format-string ディレクティブ）を設定して、小数点以下の桁数を表示しないパーセンテージ書式を使用します。
    • マークアップ内で要素をネストして、axis、seriesList、および hint オプションを設定します。
      • axis ディレクティブ内で x 軸および y 軸をネストし、いくつかのオプションを設定します。
      • series-list ディレクティブ内に data ディレクティブをネストします。さらに、x および y オプションをネストし、モデルのデータフィールドにバインドします。
      • hint ディレクティブ内では、この content に、スクリプトで作成した MyTooltips 関数を設定します。
    マークアップ
    コードのコピー 
    <wij-barchart data-source="list" height="400" width="600" chart-label-format-string="p0">
    <axis>
        <x text="Auto Makers"></x>
        <y text="Percent Increase in Sales Over Prior Year" anno-format-string="p0"></y>
    </axis>
    <series-list>
        <series label="2012 Auto Sales">
            <data>
                <x bind="Maker"></x>
                <y bind="Sales"></y>
            </data>
        </series>
    </series-list>
    <hint content="MyTooltips"></hint>
</wij-barchart>
  5. HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のように表示されます。

関連トピック

すべての数値の書式設定

参照

wijbarchart メソッド

 

 

Copyright © GrapeCity inc. All rights reserved.