한국투자증권 주식매매프로그램 만들기

파이썬 주식매매프로그램 만들기

Dojo/Chart

5. Dojo Pie & Animation Chart

토폴로지 2013. 8. 8. 07:46

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

'Dojo/Chart'의 다른글

  • 현재글5. Dojo Pie & Animation Chart

관련글

댓글

티스토리툴바