< 이전 | 다음 >

학습 4: Dojo 차트 API를 사용하여 원형 차트 추가(선택사항)

이 선택적 학습에서 컨텐츠 지원 및 Dojo 차트 API를 사용하여 결과 페이지에 원형 차트를 추가하십시오. 원형 차트에는 이자 및 프린시펄에 대한 총 대출 비용의 백분율을 표시합니다.

이 학습을 시작하기 전에 Mozilla Firefox를 설치하십시오.
참고: 단계는 사용 중인 Firebug와 Firefox의 버전에 따라 다양할 수 있습니다.
  1. > 웹 브라우저 > Firefox를 클릭하여 Firefox에서 실행할 웹 애플리케이션을 구성하십시오.
  2. index.html 파일에서 다음 require 문을 기존 스크립트 태그에 추가하십시오.
    "dojox/charting/Chart",
    "dojox/charting/plot2d/Pie",
    "dojox/charting/action2d/Highlight",
    "dojox/charting/action2d/MoveSlice",
    "dojox/charting/action2d/Tooltip",
    "dojox/charting/themes/Dollar",
  3. 결과를 표시하도록 작성한 MonthlyPayment div 아래에 다음 div를 추가하십시오.
    <div id="chart" style="width: 350px; height: 350px"></div>
  4. 기존 dojo.ready 기능에서 연결 기능 위에 var chart = new dojox 를 입력하고 컨텐츠 지원을 호출하십시오. dojox 네임스페이스에서 사용 가능한 모든 Dojo 유형 목록이 표시되어야 합니다.
  5. .charting.C 를 계속 입력하고 필터링을 시작한 목록이 표시되어야 합니다. dojox.charting.Chart2D를 선택하고 이를 페이지에 삽입하십시오.
  6. 두 개의 매개변수(chartnull)와, 페이지에 위치할 div 노드에 대한 ID를 추가하십시오.
    var chart = new dojox.charting.Chart("chart", null);
  7. 다음 행에서 chart.set를 입력하고 컨텐츠 지원을 호출하십시오. setTheme 메소드가 표시되어야 합니다. 이 메소드를 선택하고 이를 페이지에 삽입하십시오.
  8. 매개변수로 dojox.charting.themes.Dollar를 입력하십시오.
    chart.setTheme(dojox.charting.themes.Dollar);
  9. 다음 행에서 다음 코드를 복사하십시오. 원하면 다양한 메소드 및 유형에서 컨텐츠 지원을 호출할 수 있습니다.
    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");
    이 코드는 차트에 플로팅 정보를 추가하고 사용자가 원형 차트 조각으로 마우스를 이동할 때 강조표시 및 도구 팁을 설정합니다. Dojo 차트 API에 대한 자세한 정보는 www.dojotoolkit.org/reference-guide/dojox/charting.html#dojox-charting의 내용을 참조하십시오.
  10. 기존 코드 아래의 dojo.connect 기능에 다음 코드를 추가하십시오.
    // 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()
    이 코드는 일련의 새 데이터를 차트에 추가하고 사용자가 입력 값을 변경할 때마다 렌더링합니다.
    결과 소스는 다음과 유사합니다.
    <!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(
    	// Set of module identifiers
    [ "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 function, invoked on dependencies evaluation results
    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. 페이지를 저장하고 서버에서 페이지를 실행하십시오.
  12. 대출 금액을 입력하고 원형 차트를 보십시오.
    매월 납부

학습 체크포인트

페이지에 원형 차트를 추가하고 이를 서버에서 테스트했습니다.

학습한 내용은 다음과 같습니다.
  • 컨텐츠 지원 및 Dojo 차트 API를 사용하여 웹 페이지에 원형 차트를 추가하는 방법
< 이전 | 다음 >
주제 유형을 표시하는 아이콘 학습서 학습 주제
Information Center의 이용 약관 | 피드백

시간소인 아이콘 마지막 업데이트 날짜: 2014-05-22

파일 이름: loan_lesson4.html