이 선택적 학습에서 컨텐츠 지원 및 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"
} ]);
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>
페이지에 원형 차트를 추가하고 이를 서버에서 테스트했습니다.