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

この Angular 導入ガイドでは、HTML マークアップ、jQuery スクリプト、および AngularJS ディレクティブを使用して、CompositeChart ウィジェットを 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 つのモデルを使用します。
      • 1 つは「Region」モデルであり、6 つのデータフィールドを指定します。各データフィールドは、コントローラー内で指定されるメインのグラフのデータにリンクされます。
      • もう 1 つは「PieData」モデルであり、3 つのデータフィールドを指定します。各データフィールドは、コントローラ内ーで指定される円グラフのデータにリンクされます。円グラフでは、他のグラフのように x 値および y 値を使用しないため、このモデルではラベル、値、およびオフセットフィールドを指定します。
    • コントローラーで $scope パラメータを使用して、モデルのデータコンテキストを制御します。
    • コントローラーに、オプションの $locale パラメータを追加します。
    • コントローラーに、2 つの $scopes を追加します。
      • list スコープには 5 つのデータ行を追加し、Region モデルのデータを設定します。
      • pieData スコープには 3 つのデータ行を追加し、pieData モデルのデータを設定します。
    Angular を使用せずに jQuery でこの処理を行う方法については、「曲線回帰の追加」を参照してください。
    スクリプト
    コードのコピー 
    <script type="text/javascript">
    var app = angular.module("MyApp", ["wijmo"]);
    //Type class
    function Type(data) {
        this.HardwareType = data.HardwareType;
        this.West = data.West;
        this.Central = data.Central;
        this.East = data.East;
        this.Stream1 = data.Stream1;
        this.Stream2 = data.Stream2;
    };
    function PieData(data) {
        this.MacType = data.MacType;
        this.Percentage = data.Percentage;
        this.Offset = data.Offset;
    }
    function MyController($scope, $locale) {
        $scope.list = [
            new Type({ 
                HardwareType: "Desktops", 
                West: 5, 
                Central: 2, 
                East: 3, 
                Stream1: 3, 
                Stream2: 1
            }), 
            new Type({ 
                HardwareType: "Notebooks", 
                West: 3, 
                Central: 2, 
                East: 4, 
                Stream1: 6, 
                Stream2: 3
            }), 
            new Type({ 
                HardwareType: "AIO", 
                West: 4, 
                Central: 3, 
                East: 4, 
                Stream1: 2, 
                Stream2: 4
            }), 
            new Type({ 
                HardwareType: "Tablets", 
                West: 7, 
                Central: 2, 
                East: 2, 
                Stream1: 9, 
                Stream2: 7
            }), 
            new Type({ 
                HardwareType: "Phones", 
                West: 2, 
                Central: 1, 
                East: 5, 
                Stream1: 5, 
                Stream2: 2
            })
        ];
        $scope.pieData = [
            new PieData({ 
                MacType: "MacBook Pro", 
                Percentage: 46.78,
                Offset: 15
            }), 
            new PieData({ 
                MacType: "iMac", 
                Percentage: 23.18,
                Offset: 0
            }), 
            new PieData({ 
                MacType: "MacBook", 
                Percentage: 20.25,
                Offset: 0
            })
        ];
    }
</script>
  4. <body> タグ内に次のマークアップを記述して、ウィジェットを作成します。
    • <wij-compositechart> ディレクティブを使用してウィジェットを作成し、要素内でいくつかのオプションを属性として設定します。
      • dataSource オプション（data-source ディレクティブ）の設定により、コントローラーのリストを指定します。
      • height および width オプションを設定します。
    • マークアップ内で要素をネストして、axis、header、および seriesList オプションを設定します。
      • axis ディレクティブ内に y 軸をネストし、text オプションを設定します。
      • ヘッダテキストは、グラフのタイトルを表示するように設定します。
      • series-list ディレクティブ内に、各データ系列を表す series ディレクティブをネストします。
        • 縦棒タイプの 3 つの series ディレクティブではそれぞれ、縦棒タイプだけでなくラベルも指定します。また、data ディレクティブもネストし、モデル内の各データフィールドにバインドする x および y オプションを指定します。
        • 円タイプの series ディレクティブでは、独自に data-source ディレクティブで pieData を指定し、タイプのほかに半径および中心座標を指定します。また、data ディレクティブをネストし、モデル内のデータフィールドにバインドするラベルおよびデータオプションを指定します。
        • スプラインタイプの series ディレクティブでは、スプラインタイプのほかにラベルを指定します。また、data ディレクティブをネストし、モデル内のデータフィールドにバインドする x および y オプションを指定します。
        • ベジエタイプの series ディレクティブでは、ベジエタイプのほかにラベルを指定します。また、data ディレクティブをネストし、モデル内のデータフィールドにバインドする x および y オプションを指定します。
    マークアップ
    コードのコピー 
    <wij-compositechart data-source="list" height="400" width="600">
    <axis>
        <y text="Total Hardware"></y>
    </axis>
    <data>
        <x bind="HardwareType"></x>
    </data>
    <header text="Hardware Distribution"></header>
    <legend visible="true"></legend>
    <series-list>
        <series label="West" type="column">
            <data>
                <y bind="West"></y>
            </data>
        </series>
        <series label="Central" type="column">
            <data>
                <y bind="Central"></y>
            </data>
        </series>
        <series label="East" type="column">
            <data>
                <y bind="East"></y>
            </data>
        </series>
        <series radius="60" type="pie" data-source="pieData">
            <center x="150" y="150"></center>
            <data>
                <label bind="MacType"></label>
                <value bind="Percentage"></value>
                <offset bind="Offset"></offset>
            </data>
        </series>
        <series label="Steam 1" type="spline">
            <data>
                <y bind="Stream1"></y>
            </data>
            <markers visible="true" type="box"></markers>
        </series>
        <series label="Steam 2" type="bezier">
            <data>
                <y bind="Stream2"></y>
            </data>
            <markers visible="true" type="diamond"></markers>
        </series>
    </series-list>
</wij-compositechart>
  5. HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のようになります。

関連トピック

AngularJS クイックスタート

参照

axis フィールド
header フィールド
seriesList フィールド

 

 

Copyright © GrapeCity inc. All rights reserved.