< Précédent | Suivant >

Leçon 4 : Ajout d'un graphique circulaire à l'aide de l'API Dojo de génération de graphiques (facultatif)

Dans cette leçon facultative, vous utilisez l'assistant de contenu et l'API de génération de graphiques Dojo pour ajouter un graphique circulaire à votre page de résultats. Le graphique circulaire affiche le pourcentage du total des coûts de prêt par rapport aux intérêts et au principal.

Avant de commencer cette leçon, installez Mozilla Firefox.
Remarque : Les étapes peuvent varier selon la version de Firebug et Firefox que vous utilisez.
  1. Configurez l'application Web pour une exécution sur Firefox en cliquant sur Fenêtre > Navigateur Web > Firefox.
  2. Dans le fichier index.html, ajoutez les instructions require suivantes à la balise de script existant :
    "dojox/charting/Chart",
    "dojox/charting/plot2d/Pie",
    "dojox/charting/action2d/Highlight",
    "dojox/charting/action2d/MoveSlice",
    "dojox/charting/action2d/Tooltip",
    "dojox/charting/themes/Dollar",
  3. Ajoutez la div suivante sous la div MonthlyPayment que vous avez créée pour afficher les résultats :
    <div id="chart" style="width: 350px; height: 350px"></div>
  4. Dans la fonction dojo.ready existante, tapez var chart = new dojox au-dessus de la fonction connect et appelez l'assistant de contenu. Vous devez voir une liste de tous les types Dojo disponibles dans l'espace de nom dojox.
  5. Continuez à taper .charting.C et vous devez voir la liste commençant à se filtrer. Sélectionnez dojox.charting.Chart2D et insérez-le dans votre page.
  6. Ajoutez deux paramètres : chart et null , et l'ID pour le noeud div d'emplacement sur la page :
    var chart = new dojox.charting.Chart("chart", null);
  7. Sur la ligne suivante, tapez chart.set et appelez l'assistant de contenu. Vous devez voir la méthode setTheme. Sélectionnez cette méthode et insérez-la sur la page.
  8. Entrez dojox.charting.themes.Dollar en paramètre :
    chart.setTheme(dojox.charting.themes.Dollar);
  9. Copiez le code suivant à la ligne suivante. Vous pouvez appeler l'assistant de contenu sur les différentes méthodes et types, si vous le souhaitez.
    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");
    Ce code ajoute des informations de trace à votre graphique et configure la mise en évidence et des infobulles pour les interactions (lorsque les utilisateurs pointent sur les tranches de graphique circulaire). Pour plus d'informations sur les API de génération de graphiques Dojo, voir : www.dojotoolkit.org/reference-guide/dojox/charting.html#dojox-charting.
  10. Dans la fonction dojo.connect, sous le code existant, ajoutez le code suivant :
    // 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()
    Ce code permet d'ajouter une nouvelle série de données au graphique et affiche son rendu chaque fois que les utilisateurs modifient une valeur d'entrée.
    La source résultante est similaire à la suivante :
    <!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(
    // Ensemble d'identificateurs de modules
    [ "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", ],
    // Fonction de rappel, appelée sur les résultats d'évaluation des dépendances
    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>
  11. Sauvegardez la page et exécutez la page sur le serveur.
  12. Entrez un montant de prêt et affichez le graphique à secteurs.
    règlement mensuel

Point de contrôle

Vous avez ajouté un graphique à secteurs à votre page et l'avez testé sur un serveur.

Ce que vous avez appris :
  • Comment utiliser l'assistant de contenu et l'API de génération de graphiques Dojo pour ajouter un graphique circulaire à une page Web
< Précédent | Suivant >
Icône indiquant le type de rubrique Rubrique de leçon de tutoriel
Dispositions pour les centres de documentation | Commentaires en retour

Icône d'horodatage Dernière mise à jour: May 29, 2014 10:11

Nom de fichier : loan_lesson4.html