< Anterior | Siguiente >

Lección 4: Añadir un gráfico circular utilizando la API de diagramas de Dojo (opcional)

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.

Antes de empezar con esta lección, instale Mozilla Firefox.
Nota: Los pasos pueden variar dependiendo de la versión de Firebug y Firefox que esté utilizando.
  1. Configure la aplicación web para trabajar en Firefox pulsando Ventana > Navegador web > Firefox.
  2. En el archivo index.html añada las siguientes sentencias require al código del script existente:
    "dojox/charting/Chart",
    "dojox/charting/plot2d/Pie",
    "dojox/charting/action2d/Highlight",
    "dojox/charting/action2d/MoveSlice",
    "dojox/charting/action2d/Tooltip",
    "dojox/charting/themes/Dollar",
  3. Añada la siguiente línea div debajo de la línea div de MonthlyPayment que ha creado para que se visualice el resultado:
    <div id="chart" style="width: 350px; height: 350px"></div>
  4. En la función existente de dojo.ready, escriba var chart = new dojox encima de la función de conexión e invoque la asistencia de contenido. Debería ver una lista de todos los tipos de Dojo disponibles en el espacio de nombres dojox.
  5. Siga escribiendo .charting.C y debería empezar a filtrarse la lista. Seleccione dojox.charting.Chart2D e insértelo en la página.
  6. Añada dos parámetros: chart y null, y el ID para el nodo div en el lugar en que se ubicará en la página:
    var chart = new dojox.charting.Chart("chart", null);
  7. En la siguiente línea escriba chart.set e invoque la asistencia de contenido. Debería ver el método setTheme. Seleccione este método e insértelo en la página.
  8. Escriba dojox.charting.themes.Dollar como parámetro:
    chart.setTheme(dojox.charting.themes.Dollar);
  9. Copie este código en la línea siguiente. Puede invocar la asistencia de contenido en los distintos métodos y tipos si lo desea.
    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.
  10. En la función dojo.connect, debajo del código existente, añada este código:
    // 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.
    El resultado es similar al siguiente:
    <!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>
  11. Guarde la página y ejecútela en el servidor.
  12. Escriba una cantidad de préstamo y visualice el gráfico circular.
    pago mensual

Punto de comprobación de la lección

Ha añadido un gráfico circular a su página y lo ha probado en un servidor.

Ha aprendido:
  • A utilizar la asistencia de contenido y la API de diagramas de Dojo para añadir un gráfico circular a una página web.
< Anterior | Siguiente >
Icono que indica el tipo de tema Tema de lección de guía de aprendizaje
Términos y condiciones para centros de información | Comentarios

Icono de indicación de fecha y hora Última actualización: 22 de abril de 2014

Nombre de archivo: loan_lesson4.html