ClusteredColumns & Animation Chart Code Example
|
<HTML> <HEAD> <script src="dojo-release-1.9.1/dojo/dojo.js"></script> <script type=text/javascript> require(["dojox/charting/Chart", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/ClusteredColumns", "dojo/fx/easing" , "dojox/charting/themes/Tufte", "dojo/ready"], function(Chart, Default, ClusteredColumns, easing, Tufte, ready){ ready(function(){ var animChart = new Chart("animChart"); animChart.setTheme(Tufte). addAxis("x", { fixLower: "minor", fixUpper: "minor" }). addAxis("y", { vertical: true, fixLower: "minor", fixUpper: "minor", includeZero: true }). addPlot("default", { type: ClusteredColumns, gap: 10, animate: { duration: 2000, easing: easing.bounceInOut } }). addSeries("Series A", [ 3, 4, 3 ] ). addSeries("Series B", [ 2, 3 ] ). addSeries("Series C", [-4, 0.5, -1, -3 ] ). addSeries("Series D", [ 0.7, 1.5, -1.2, -1.25, 3 ] ). render(); }); }); </script> </head> <body <div id="animChart" style="width: 300px; height: 300px; float:left; " ></div> </body> </html> |
Table 5 ClusteredColumns & Animation Chart Code
Code 설명
plot2d/ClusteredColumns은 ClusteredColumns을 위해 fx/easing는 chart에 넣을 애니매이션을 위해 호출하였다. addPlot()함수에서 type을 ClusteredColumns을 설정하고 애니매이션 지속시간을 설정하기 위해 duration : 2000을 설정하였고, 애니매이션 효과는 bounceInOut을 설정하였다. chart 애니매이션에 관한 레퍼런스는 https://dojotoolkit.org/reference-guide/1.9/dojox/charting.html를 참고할 수 있다.
결과 화면
Figure 4 Table 5 실행 결과
'Dojo > Chart' 카테고리의 다른 글
| 5. Dojo Pie & Animation Chart (0) | 2013.08.08 |
|---|---|
| 3. Dojo Column Chart & Chart Theme Setting (0) | 2013.08.08 |
| 2. Dojo Area Chart & 두 개의 그래프 그리기 (0) | 2013.08.08 |
| 1. Dojo Line Chart & Chart Instruction (0) | 2013.08.08 |