< 上一课 | 下一课 >

课程 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. 将以下 div 添加到您创建的 MonthlyPayment 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,以及它在页面上所位于的 div 节点的标识:
    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"
    			} ]);
    		super();
    		});
    	});
    });
    </script>
    </head>
    <body class="claro">
    	<div id="BorderContainer" style="height: 500px; width: 500px"
    		urlPatterns="/counter"
    		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 页面
< 上一课 | 下一课 >
指示主题类型的图标 教程课程主题
信息中心的条款和条件 | 反馈

时间戳记图标 最近一次更新时间: 2014 年 4 月 17 日

文件名:loan_lesson4.html