Pie & Animation Chart Example Code
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="dojo-release-1.9.1/dijit/themes/claro/claro.css"> <script src='dojo-release-1.9.1/dojo/dojo.js'></script>
<script> require(["dojox/charting/Chart", "dojox/charting/plot2d/Pie", "dojox/charting/action2d/Highlight", "dojox/charting/action2d/MoveSlice" , "dojox/charting/action2d/Tooltip", "dojox/charting/themes/MiamiNice", "dojox/charting/widget/Legend", "dojo/ready"], function(Chart, Pie, Highlight, MoveSlice, Tooltip, MiamiNice, Legend, ready){ ready(function(){ var chartTwo = new Chart("chartTwo"); chartTwo.setTheme(MiamiNice) .addPlot("default", { type: Pie, font: "normal normal 11pt Tahoma", fontColor: "black", labelOffset: -30, radius: 100 }).addSeries("Series A", [ {y: 4, text: "Red", stroke: "black", tooltip: "Red is 50%"}, {y: 2, text: "Green", stroke: "black", tooltip: "Green is 25%"}, {y: 1, text: "Blue", stroke: "black", tooltip: "I am feeling Blue!"}, {y: 1, text: "Other", stroke: "black", tooltip: "Mighty <strong>strong</strong><br>With two lines!"} ]); var anim_a = new MoveSlice(chartTwo, "default"); var anim_b = new Highlight(chartTwo, "default"); var anim_c = new Tooltip(chartTwo, "default"); chartTwo.render(); var legendTwo = new Legend({chart: chartTwo}, "legendTwo"); }); }); </script> </head> <body class="claro"> <div id="chartTwo" style="width: 300px; height: 300px;"></div> <div id="legendTwo"></div> </body> </html> |
Table 6 Pie & Animation Chart Code
Code 설명
theme를 load해야 하는데 나중에 tooltip으로 나오는 메세지가 theme랑 연관되어 있기 때문이다. plot2d/Pie는 Pie chart를, action2d/Highlight는 그래프를 선택했을 때 색 변화를 주기 위해서, action2d/MoveSlice는 그래프를 선택했을 때 선택한 부분이 움직이기 위해서, action2d/Tooltip은 그래프를 선택했을 때 부가 설명을 보여주기 위해서, widget/Legend는 그래프에 나오는 항목을 표기하기 위해서 호출하였다. labelOffset은 Pie Chart의 각 Slice 부분에 있는 각 label들의 거리를 뜻하는데 0 일 경우 원의 둘레에 위치하게 되고, 음수일 경우 원의 바깥, 양수일 경우 원의 안쪽에 위치하게 된다. radius의 경우 원의 반지름, 즉 Pie Chart의 크기를 나타낸다.
결과 화면
Figure 5 Table 6 결과 화면
'Dojo > Chart' 카테고리의 다른 글
4. Dojo ClusteredColumns & 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 |