Wijmo UI for the Web
円グラフのサンプル
| Wijmo ユーザーガイド > 概念 > ウィジェットを統合するフレームワーク > Knockoutの使用 > 円グラフのサンプル |
1. ライブラリ参照の追加
最初の手順では、.html ページを作成し、依存ファイルへのリンクを <head> タグ内のプロジェクトに追加します。これを行うには、コンテンツ配信ネットワーク（CDN）ファイルに単にリンクします。
 |
注意：CDN http://wijmo.c1.grapecity.com/products/wijmo-enterprise//#wijmo-cdnから最新の依存ファイルを参照してください。 |
| リファレンス |
コードのコピー |
|---|---|
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20151.71.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20151.71.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20151.71.min.js" type="text/javascript"></script> | |
次に、Knockout 2.0 および Wijmo 対応 Knockout 拡張ライブラリへの参照を <head> タグ内に追加します。
<!--Knockout JS ライブラリ--> <script src="http://cdn.wijmo.com/external/knockout-2.0.0.js" type="text/javascript"></script> <!--Wijmo Knockout 統合ライブラリ--> <script src="http://cdn.wijmo.com/external/knockout.wijmo.js" type="text/javascript"></script>
2. ViewModel とビューの作成
ここで、ビューモデルを作成し、UI のデータと動作を定義します。次の <script> を <head> タグ内に入力します。
| ビューモデルを作成する方法 |
コードのコピー |
|---|---|
<script type="text/javascript"> <!--ViewModel を作成します--> var viewModel = function () { var self = this; self.males = ko.numericObservable(10); self.females = ko.numericObservable(90); }; </script> | |
wijpiechart HTML 要素を作成するには、以下のマークアップを .html ドキュメントの本体に配置します。これは、MVVM パターンのビューとして機能します。
| マークアップを表示する |
コードのコピー |
|---|---|
<!--ビューを作成します--> <div> males: <input type="text" data-bind="value: males" /> females: <input type="text" data-bind="value: females" /> </div> <div class="piechart" data-bind="wijpiechart: { width: 600, height: 400, seriesList: [ {label: 'Male', data: males}, {label: 'Female', data: females} ]}"> </div> | |
3. ViewModel への Wijmo ウィジェットのバインドと KO のアクティブ化
ここで、次の JavaScript を ViewModel スクリプトの後の <script> タグ内に追加することで、ViewModel にバインドし、knockout.js をアクティブ化します。
| ViewModel をバインドする |
コードのコピー |
|---|---|
<!--ViewModel をバインドします-->
$(document).ready(function () {
var vm = new viewModel();
ko.applyBindings(vm);
}); | |
マークアップが表示される例を示す完全なサンプルを示します。
| 完全なマークアップ |
コードのコピー |
|---|---|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../../external/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="../../external/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script> <script src="../../external/globalize.min.js" type="text/javascript"></script> <script src="../../wijmo/jquery.wijmo.wijchartcore.js" type="text/javascript"></script> <script src="../../wijmo/jquery.wijmo.wijpiechart.js" type="text/javascript"></script> <script src="../../wijmo/jquery.wijmo.wijutil.js" type="text/javascript"></script> <script src="../../wijmo/jquery.wijmo.wijslider.js" type="text/javascript"></script> <script src="../../external/knockout-2.0.0.js" type="text/javascript"></script> <script src="../../../../Wijmo-Open/development-bundle/wijmo/knockout.wijmo.js" type="text/javascript"></script> <script type="text/javascript"> <!--ViewModel を作成します--> var viewModel = function () { var self = this; self.males = ko.numericObservable(10); self.females = ko.numericObservable(90); }; <!--ViewModel をバインドします--> $(document).ready(function () { var vm = new viewModel(); ko.applyBindings(vm); }); </script> </head> <body> <!--ビューを作成します--> <div> males: <input type="text" data-bind="value: males" /> females: <input type="text" data-bind="value: females" /> </div> <div class="piechart" data-bind="wijpiechart: { width: 600, height: 400, seriesList: [ {label: 'Male', data: males}, {label: 'Female', data: females} ]}"> </div> </body> </html> | |
ページを開くと、wijpiechart が上の図のように表示されます。男性と女性に新しい値を入力すると、それに応じて円グラフが更新されます。
全て展開
すべて折りたたむ