< Zurück | Weiter >

Lerneinheit 4: Kreisdiagramm mit der Dojo-API für Diagramme hinzufügen (optional)

In dieser optionalen Lerneinheit verwenden Sie Content-Assist und die Dojo-API für Digramme, um Ihrer Ergebnisseite ein Kreisdiagramm hinzuzufügen. Das Kreisdiagramm enthält die Angabe zum Prozentsatz der Darlehenskosten, die für Tilgung und Zinsen aufgewendet werden.

Bevor Sie mit dieser Lerneinheit beginnen, installieren Sie Mozilla Firefox.
Anmerkung: Die Schritte können variieren, je nachdem, welche Version von Firebug und Firefox Sie verwenden.
  1. Konfigurieren Sie die Webanwendung für die Ausführung in Firefox, indem Sie auf Fenster > Web-Browser > Firefox klicken.
  2. Fügen Sie der Datei index.html die folgende require-Anweisung dem vorhandenen Script-Tag hinzu:
    "dojox/charting/Chart",
    "dojox/charting/plot2d/Pie",
    "dojox/charting/action2d/Highlight",
    "dojox/charting/action2d/MoveSlice",
    "dojox/charting/action2d/Tooltip",
    "dojox/charting/themes/Dollar",
  3. Fügen Sie das folgende div-Element unter dem von Ihnen erstellten div-Element MonthlyPayment hinzu, um das Ergebnis anzuzeigen:
    <div id="chart" style="width: 350px; height: 350px"></div>
  4. Geben Sie in der vorhandenen Funktion dojo.ready die Zeichenfolge var chart = new dojox oberhalb der Verbindungsfunktion ein und rufen Sie Content-Assist auf. Sie sollten eine Liste aller verfügbaren Dojo-Typen im dojox-Namespace sehen.
  5. Fahren Sie mit der Eingabe fort und geben Sie .charting.C ein und die Liste sollte durch das Filtern erkennbar kleiner werden. Wählen Sie dojox.charting.Chart2D aus und fügen Sie es auf Ihrer Seite ein.
  6. Fügen Sie zwei Parameter hinzu: chart und null und die ID für den div-Knoten für die Position des Kreisdiagramms auf Ihrer Seite:
    var chart = new dojox.charting.Chart("chart", null);
  7. Geben Sie in der nächsten Zeile chart.set ein und rufen Sie Content-Assist auf. Sie sollten die Methode setTheme sehen. Wählen Sie diese Methode aus und fügen Sie sie in die Seite ein.
  8. Geben Sie die Zeichenfolge dojox.charting.themes.Dollar als Parameter ein:
    chart.setTheme(dojox.charting.themes.Dollar);
  9. Kopieren Sie den folgenden Code in die nächste Zeile. Sie können Content-Assist bei Bedarf für die verschiedenen Methoden und Typen aufrufen.
    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");
    Dieser Code fügt Ihrem Diagramm Plotting-Daten hinzu und definiert Hervorhebungen und Kurzinfos, die dem Benutzer angezeigt werden, wenn er mit der Maus über die Kreisdiagrammausschnitt fährt. Weitere Informationen zur Dojo-API für Diagramme finden Sie unter www.dojotoolkit.org/reference-guide/dojox/charting.html#dojox-charting.
  10. Fügen Sie in der Funktion "dojo.connect" unterhalb des vorhandenen Codes den folgenden Code hinzu:
    // Datenserie dem Diagramm hinzufügen und rendern
    		chart.updateSeries("paymentSeries", [
            {
                y: loanWidget.principal,
                stroke: "black",
                tooltip: "Principle"
            },
            {
                y: loanWidget.interestPaid,
                stroke: "black",
                tooltip: "Interest"
            }]);
            chart.render()
    Dieser Code fügt eine neue Reihe von Daten dem Diagramm hinzu und rendert sie, sobald Benutzer einen Eingabewert ändern.
    Die daraus resultierende Quelle sieht etwa wie folgt aus:
    <!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(
    // Gruppe von Modul-IDs
    [ "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-Funktion, für Ergebnisse der Abhängigkeitsbewertung aufgerufen
    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");
    
    		// LoanInput-Widget abrufen
    		loanWidget = registry.byId('LoanInput');
    
    		// "calculate" aus Widget "LoanInput" verarbeiten
    		dojo.connect(dijit.registry.byId("LoanInput"), "calculate", function(event) {
    			var payment = loanWidget.monthlyPayment;
    			if (payment == NaN) {
    				payment = 0;
    			}
    
    			// Ergebnisfeld aktualisieren
    			var formattedValue = dojo.currency.format(payment, {currency: "USD"});
    			dojo.attr("monthlyPayment", "innerHTML", formattedValue);
    			// Diagramm aktualisieren
    			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. Speichern Sie die Seite und führen Sie die Seite auf dem Server aus.
  12. Geben Sie einen Darlehensbetrag ein und zeigen Sie das Kreisdiagramm an.
    Monatliche Rate

Prüfpunkt für Lerneinheit

Sie haben Ihrer Seite ein Kreisdiagramm hinzugefügt und die Seite auf einem Server getestet.

Sie haben Folgendes erlernt:
  • Vorgehensweise bei der Verwendung von Content-Assist und der Dojo-API für Diagramme, um einer Webseite eine Kreisdiagramm hinzuzufügen.
< Zurück | Weiter >
Symbol das den Typ des Artikels anzeigt. Artikel für Lerneinheit
Nutzungsbedingungen für Information Center | Feedback

Symbol für Zeitmarke Letzte Aktualisierung: 29.04.2014

Dateiname: loan_lesson4.html