在本可选课程中,您将使用内容辅助和 Dojo 绘图 API 将饼图添加至结果页面。该饼图显示总贷款成本与利息和本金的百分比。
"dojox/charting/Chart",
"dojox/charting/plot2d/Pie",
"dojox/charting/action2d/Highlight",
"dojox/charting/action2d/MoveSlice",
"dojox/charting/action2d/Tooltip",
"dojox/charting/themes/Dollar",
<div id="chart" style="width: 350px; height: 350px"></div>
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");
此代码会将绘制信息添加至图表,并设置突出显示和工具提示以在用户将光标悬浮在饼图分区上方时显示。有关 Dojo 绘图 API 的更多信息,请参阅:www.dojotoolkit.org/reference-guide/dojox/charting.html#dojox-charting。// 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>
您已将饼图添加至页面并在服务器上对其进行测试。