En esta lección opcional, puede utilizar la asistencia de contenido y la API de diagramas de Dojo para añadir un gráfico circular en la página de resultados. El gráfico circular muestra el porcentaje del total de costes de préstamos en relación con el interés y el principal.
"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");
Este código añade información de trazado en su diagrama y configura funciones de resaltado y sugerencias para cuando los usuarios pasen el ratón por encima de las porciones del gráfico circular. Para obtener más información acerca de las API de diagramas de
Dojo, consulte: www.dojotoolkit.org/reference-guide/dojox/charting.html#dojox-charting.// añadir series de datos al gráfico y representarlos
chart.updateSeries("paymentSeries", [
{
y: loanWidget.principal,
stroke: "black",
tooltip: "Principle"
},
{
y: loanWidget.interestPaid,
stroke: "black",
tooltip: "Interest"
}]);
chart.render()
Este código añade una nueva serie de datos al gráfico y se representa cada vez que los usuarios cambian un valor de entrada. <!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(
// Conjunto de identificadores de módulo
[ "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", ],
// Función de devolución de llamada, invocada en resultado de evaluación de dependencias
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");
// obtener el widget LoanInput
loanWidget = registry.byId('LoanInput');
// manejar "calculate" desde el widget "LoanInput"
dojo.connect(dijit.registry.byId("LoanInput"), "calculate", function(event) {
var payment = loanWidget.monthlyPayment;
if (payment == NaN) {
payment = 0;
}
// actualizar el campo de resultados
var formattedValue = dojo.currency.format(payment, {currency: "USD"});
dojo.attr("monthlyPayment", "innerHTML", formattedValue);
// actualizar el gráfico
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'">Calculadora de pagos de préstamos</div>
<div data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'">
<div id="LoanInput" data-dojo-type="loan.LoanInput"></div>
<div>Pago mensual<span id="monthlyPayment"></span></div>
<div id="chart" style="width: 350px; height: 350px"></div>
</div>
</div>
</body>
</html>
Ha añadido un gráfico circular a su página y lo ha probado en un servidor.