< 前へ | 次へ >

レッスン 4: Dojo グラフ作成 API で円グラフを追加する (オプション)

このオプション・レッスンでは、コンテンツ・アシストと Dojo グラフ作成 API を使用して、円グラフをユーザーの結果ページに追加します。 この円グラフには、ローン・コストの総額の利子と元本に対するパーセントが表示されます。

このレッスンを開始する前に、Mozilla Firefox をインストールします
注: 手順は、使用する Firebug および Firefox のバージョンによって異なります。
  1. 「ウィンドウ」 > 「Web ブラウザー」 > 「Firefox」をクリックして、Web アプリケーションを Firefox で実行するように構成します。
  2. index.html ファイルの既存のスクリプト・タグに、次の require 文を追加します。
    "dojox/charting/Chart",
    "dojox/charting/plot2d/Pie",
    "dojox/charting/action2d/Highlight",
    "dojox/charting/action2d/MoveSlice",
    "dojox/charting/action2d/Tooltip",
    "dojox/charting/themes/Dollar",
  3. 作成した MonthlyPayment div の下に、結果を表示する次の div を追加します。
    <div id="chart" style="width: 350px; height: 350px"></div>
  4. 既存の dojo.ready 関数内で、connect 関数の上に var chart = new dojox と入力し、コンテンツ・アシストを起動します。dojox 名前空間で利用できるすべての Dojo データ型のリストが表示されます。
  5. .charting.C と入力を続けると、 該当する候補のリストが絞られていきます。 dojox.charting.Chart2D を選択して、 ページに挿入します。
  6. chartnull の 2 つのパラメーターを追加し、ページに配置される div ノードの ID を追加します。
    var chart = new dojox.charting.Chart("chart", null);
  7. 次の行で、chart.set を入力し、コンテンツ・アシストを起動します。 setTheme メソッドが表示されます。 このメソッドを選択し、ページに挿入します。
  8. dojox.charting.themes.Dollar をパラメーターとして入力します。
    chart.setTheme(dojox.charting.themes.Dollar);
  9. 次のコードを次の行にコピーします。必要な場合、 各種メソッドおよびデータ型にコンテンツ・アシストを起動できます。
    chart.addPlot("default", {
        	type: "Pie",
        	labelOffset: -30,
        	radius: 90
        });
         chart.addSeries("paymentSeries", []);
            
         new dojox.charting.action2d.MoveSlice(chart, "default");
         new dojox.charting.action2d.Highlight(chart, "default");
         new dojox.charting.action2d.Tooltip(chart, "default");
    このコードでは、グラフへのプロット情報を追加し、 円グラフのスライスにカーソルを合わせたときに強調表示されツールチップが表示されるようセットアップします。 Dojo グラフ作成 API について詳しくは、次のサイトを確認してください。www.dojotoolkit.org/reference-guide/dojox/charting.html#dojox-charting
  10. dojo.connect 関数の内側で、既存コードの下に、次のコードを追加します。
    // add the data series to the chart and render
    		chart.updateSeries("paymentSeries", [
            {
                y: loanWidget.principal,
                stroke: "black",
                tooltip: "Principle"
            },
            {
                y: loanWidget.interestPaid,
                stroke: "black",
                tooltip: "Interest"
            }]);
            chart.render()
    このコードにより、 グラフに新しいデータ系列を追加し、ユーザーが入力値を変更するたびにレンダリングされます。
    結果のソースは、次のようなものになります。
    <!DOCTYPE HTML>
    <html>
    <head>
    <link rel="stylesheet" type="text/css"
    	href="dojo/dijit/themes/dijit.css">
    <link rel="stylesheet" type="text/css"
    	href="dojo/dijit/themes/claro/claro.css">
    <title>t1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript"
    	data-dojo-config="isDebug: false, async: true, parseOnLoad: true"
    	src="dojo/dojo/dojo.js"></script>
    <script type="text/javascript">
    require(
    // Set of module identifiers
    [ "dojo", "dijit/registry", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "loan/LoanInput", "dojo/currency", "dojox/charting/Chart",
    "dojox/charting/plot2d/Pie",
    "dojox/charting/action2d/Highlight",
    "dojox/charting/action2d/MoveSlice",
    "dojox/charting/action2d/Tooltip",
    "dojox/charting/themes/Dollar", ],
    // Callback function, invoked on dependencies evaluation results
    function(dojo, registry) {
    	dojo.ready(function() {
    		var chart = new dojox.charting.Chart("chart", null);
    		chart.setTheme(dojox.charting.themes.Dollar);
    		chart.addPlot("default", {
    			type : "Pie",
    			labelOffset : -30,
    			radius : 90
    		});
    		chart.addSeries("paymentSeries", []);
    
    
    		new dojox.charting.action2d.MoveSlice(chart, "default");
    		new dojox.charting.action2d.Highlight(chart, "default");
    		new dojox.charting.action2d.Tooltip(chart, "default");
    
    		// get the LoanInput widget
    		loanWidget = registry.byId('LoanInput');
    
    		// handle "calculate" from widget "LoanInput"
    		dojo.connect(dijit.registry.byId("LoanInput"), "calculate", function(event) {
    			var payment = loanWidget.monthlyPayment;
    			if (payment == NaN) {
    				payment = 0;
    			}
    
    			// update the result field
    			var formattedValue = dojo.currency.format(payment, {currency: "USD"});
    			dojo.attr("monthlyPayment", "innerHTML", formattedValue);
    			// update the chart
    			chart.updateSeries("paymentSeries", [ {
    				y : loanWidget.principal,
    				stroke : "black",
    				tooltip : "Principal"
    			}, {
    				y : loanWidget.interestPaid,
    				stroke : "black",
    				tooltip : "Interest"
    			} ]);
    			chart.render();
    		});
    	});
    });
    </script>
    </head>
    <body class="claro">
    	<div id="BorderContainer" style="height: 500px; width: 500px"
    		data-dojo-type="dijit.layout.BorderContainer"
    		data-dojo-props="design:'headline'">
    		<div data-dojo-type="dijit.layout.ContentPane"
    			data-dojo-props="region:'top'">Loan Payment Calculator</div>
    		<div data-dojo-type="dijit.layout.ContentPane"
    			data-dojo-props="region:'center'">
    			<div id="LoanInput" data-dojo-type="loan.LoanInput"></div>
    			<div>Monthly Payment: <span id="monthlyPayment"></span></div>
    			<div id="chart" style="width: 350px; height: 350px"></div>
    		</div>
    	</div>
    
    	</body>
    </html>
  11. ページを保存し、サーバーでページを実行します。
  12. ローンの総額を入力し、円グラフを表示します。
    毎月の支払額

演習のチェックポイント

円グラフがページに追加され、サーバーでテストされました。

この演習では以下のことを学習しました。
  • コンテンツ・アシストと Dojo グラフ作成 API を使用して、円グラフを Web ページに追加する方法
< 前へ | 次へ >
トピックのタイプを示すアイコン チュートリアルの演習のトピック
インフォメーション・センターのご利用条件 | フィードバック

タイム・スタンプ・アイコン 最終更新: May 29, 2014 10:20

ファイル名: loan_lesson4.html