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.
"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");
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.// 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. <!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>
Vous avez ajouté un graphique à secteurs à votre page et l'avez testé sur un serveur.