Dojo Column Chart & Chart Theme Setting Example 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/Columns", "dojox/charting/themes/PlotKit/blue", "dojox/charting/axis2d/Default", "dojo/domReady!" ], function (Chart, Columns, PlotKitBlue) { var chart = new Chart("test"); chart.addPlot("default", {type: Columns, gap:2}); chart.addAxis("x"); chart.addAxis("y", {vertical: true, min:1}); chart.addSeries("Series 1", [3, 2, 2, 3, 4, 5, 5, 7, 10, 2, 3, 14]); chart.setTheme(PlotKitBlue); chart.render(); }); </script> </head> <body> <div id="test" style="width: 250px; height: 150px;"></div> </body> </html> |
Table 4 Column Chart & Chart Theme Setting Code
Code 설명
require문에서는 Column Chart를 그리기 위해 plot2d/Columns를 불렀고 theme를 설정하기 위해 themes/PlotKit/blue 호출하였다. addPlot()함수에 type을 Columns로 주었고, gap은 Bar와 Bar사이의 간격인데 2로 설정하였다. 마지막으로 setTheme()함수로 PlotKitBlue Theme를 적용하였다.
결과 화면
Figure 3 Table 4 결과 화면
'Dojo > Chart' 카테고리의 다른 글
| 5. Dojo Pie & Animation Chart (0) | 2013.08.08 |
|---|---|
| 4. Dojo ClusteredColumns & Animation Chart (0) | 2013.08.08 |
| 2. Dojo Area Chart & 두 개의 그래프 그리기 (0) | 2013.08.08 |
| 1. Dojo Line Chart & Chart Instruction (0) | 2013.08.08 |