Area Chart & 두 개의 그래프 그리기 Code
|
<html> <head> <title>Chart</title> <script src='dojo-release-1.9.1/dojo/dojo.js' ></script> <script> require([ "dojox/charting/Chart", "dojox/charting/plot2d/Lines", "dojox/charting/plot2d/Areas", "dojox/charting/axis2d/Default", "dojo/domReady!" ], function (Chart) { var chart = new Chart("test"); chart.addPlot("default", {type: "Lines", markers: true, tension:3}); chart.addPlot("someOtherPlot", {type: "Areas"}); chart.addAxis("x"); chart.addAxis("y", {vertical: true}); chart.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]); chart.addSeries("Series 2", [1, 1, 4, 2, 1, 6, 4, 3], {plot: "someOtherPlot", stroke: {color:"blue"}, fill: "blue"}); chart.render(); }); </script> </head> <body> <div id="test" style="width: 250px; height: 150px;"></div> </body> </html> |
Table 3 Area & 두 개의 그래프 Code
Code 설명
하나의 Chart안에 서로 다른 두 개의 그래프를 그린 코드이다. 우선 Area를 그리기 위해 plot2d/Areas를 호출하였다. Line에는 value를 표시하는 marker를 주었고 tension을 3으로 설정하여 부드럽게 표현하였다. 그리고 addSeries()에서 Series 2의 경우에는 plot를 someOtherPlot으로 설정하여 Area module을 불러오고 선 색와 Area의 색은 blue로 통일하였다.
결과 화면
Figure 2 Table 3 결과 화면
'Dojo > Chart' 카테고리의 다른 글
| 5. Dojo Pie & Animation Chart (0) | 2013.08.08 |
|---|---|
| 4. Dojo ClusteredColumns & Animation Chart (0) | 2013.08.08 |
| 3. Dojo Column Chart & Chart Theme Setting (0) | 2013.08.08 |
| 1. Dojo Line Chart & Chart Instruction (0) | 2013.08.08 |