SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

jQuery UIの標準ウィジェットを補完する高機能ライブラリ「Wijmo」の活用

今話題の「AngularJS」と「Wijmo(ウィジモ)」連携で広がる可能性

jQuery UIの標準ウィジェットを補完する高機能ライブラリ「Wijmo」の活用 第8回

  • X ポスト
  • このエントリーをはてなブックマークに追加

AngularJS機能でWijmoチャートを動的に変更

 もう少し複雑な例として、スコープに保持したリストのデータをCompositeChartウィジェット(wijcompositechart)で表示し、Gridウィジェット(wijgrid)でデータを変更できるようにする例をリスト3に示します。

リスト3 WijmoとAngularJSで表形式データを表示・編集する例(003_wijmo_angularjs2.html)
(中略)
<script type="text/javascript">
    // wijmoモジュールを使用するモジュールを定義 ...(1)
    var myApp = angular.module("MyApp", ["wijmo"]);

    // コントローラーを定義 ...(2)
    myApp.controller("MyController", function($scope, $locale) {
        // コントローラー内に変数を定義
        $scope.dataList = [
              { "Name": "第一四半期", "Sales": 4000, "Benefit": 2000},
              { "Name": "第二四半期", "Sales": 2500, "Benefit": 1000},
              { "Name": "第三四半期", "Sales": 1000, "Benefit": -3000},
              { "Name": "第四四半期", "Sales": 5000, "Benefit": 1500}
        ];
    });
</script>
</head>
<body ng-controller="MyController">
<h1>Wijmoサンプル2(AngularJS)</h1>

<h3>CompositeChartウィジェット</h3>
<!-- 変数dataListをデータソースとしてCompositeChartを表示 ... (3)-->
<wij-compositechart dataSource="dataList" show-chart-labels="false" style="width:480px; height:240px;">
    <series-list>
        <series label="売上" type="column"> <!-- 系列1:棒グラフ ...(4)-->
            <data>
                <x bind="Name" ></x>        <!-- x軸はName -->
                <y bind="Sales"></y>        <!-- y軸はSales -->
            </data>
        </series>
        <series label="利益" type="line">   <!-- 系列2:線グラフ ...(5)-->
            <data>
                <x bind="Name" ></x>        <!-- x軸はName -->
                <y bind="Benefit"></y>      <!-- y軸はBenefit -->
            </data>
        </series>
    </series-list>
</wij-compositechart>

<h3>Gridウィジェット</h3>
<!-- 変数dataListをデータソースとしてGridを表示 ... (6)-->
<wij-grid id="dataGrid" data="dataList" allow-editing="true" style="width: 480px;">
     <columns>
        <column></column>
        <column data-type="number" input-type="number"></column>
        <column data-type="number" input-type="number"></column>
    </columns>
</wij-grid>
(以下略)

 リスト2同様、(1)でMyAppモジュールを、(2)でMyControllerコントローラーを指定しています。コントローラーではオブジェクト配列dataListをスコープに設定しています。listにはデータ名称(Name)、売上(Sales)、利益(Benefit)を保持します。

 (3)でWijmoのCompositeChartウィジェット(wijcompositechart)を記述しています。「dataSource="dataList"」記述で変数dataListをデータソースに指定しています。(4)は売上(Sales)を表示する棒グラフ、(5)は利益(Benefit)を表示する線グラフの定義です。

 (6)でWijmoのGridウィジェット(wijgrid)を記述しています。「data="dataList"」記述で変数dataListをデータソースに指定しています。また「allow-editing="true"」記述により、ダブルクリックでグリッドセルの値を変更できるようにしています。

 リスト3を実行すると、売り上げの棒グラフ・利益の線グラフが表示され、グリッドにグラフの元データが反映されます。グリッドでName、Sales、Benefitの値を変更すると、その変更がグラフに反映されます。

図4 グリッドセルで値を変更するとグラフに反映される(003_wijmo_angularjs2.html)
図4 グリッドセルで値を変更するとグラフに反映される(003_wijmo_angularjs2.html)

まとめ

 本記事では、JavaScriptライブラリ「Wijmo」を、AngularJSと組み合わせて利用する方法を紹介しました。WijmoのAngularJS連携機能を用いると、<wij-*>独自タグを用いてWijmoウィジェットを記述し、双方向データバインディングによりWijmoウィジェットのプロパティを動的に変更できるなど、あたかもWijmoがAngularJSの一部であるかのように利用できます。

 AngularJSはHTML/JavaScriptアプリケーション向けMVCフレームワークとして注目度が高く、AngularJSを利用したページ内でWijmoを利用できる連携機能は、Wijmo活用の幅を大きく広げるものといえます。

参考資料

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
jQuery UIの標準ウィジェットを補完する高機能ライブラリ「Wijmo」の活用連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8313 2014/12/08 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング