'차팅'에 해당되는 글 1건

  1. 2007.09.25 [FLEX] 예매시스템6 - 예매현황보기부분!-_-; FlexCharting! 2
 

챠팅 부분을 해봅시다. 저도 이쪽은 잘몰라서 책에도 잘 안나와 있고 해서 가장 쉬운 차트로 했습니다-_-;

우선 예매한 연령별 현황을 보도록 합시다.

자바클래스 소스를 보도록합시다.









[code]
public double[] getAgestatus() {
  Connection con = null;
  Statement stmt = null;
  ResultSet rs = null;
 
  double status[] = new double[6];
  int age = 0, avg_age = 0, count=0;

  try {
   String jdbcDriver = "jdbc:apache:commons:dbcp:/pool";
         con = DriverManager.getConnection(jdbcDriver);
   stmt = con.createStatement();
   String query =
     "SELECT Age FROM bs_Book,bs_Member WHERE bs_Book.ID = bs_Member.ID";
   rs = stmt.executeQuery(query);
   
   while(rs.next()) {
    age = rs.getInt("Age");
    avg_age += age;
    if(age < 20)   // 연령별로 예약수를 조사
     status[0]++;
    else if(age >= 20 && age < 30)
     status[1]++;
    else if(age >= 30 && age < 40)
     status[2]++;
    else if(age >= 40 && age < 50)
     status[3]++;
    else
     status[4]++;
    count++;
   }
   status[0] = (status[0] / (double)count) * 100; // 퍼센트로 계산
   status[1] = (status[1] / (double)count) * 100;
   status[2] = (status[2] / (double)count) * 100;
   status[3] = (status[3] / (double)count) * 100;
   status[4] = (status[4] / (double)count) * 100;
  } catch (SQLException e) {
   e.printStackTrace();
   return null;
  } finally {
   if (rs != null) try { rs.close(); } catch(SQLException ex) {}
   if (stmt != null) try { stmt.close(); } catch(SQLException ex) {}
   if (con != null) try { con.close(); } catch(SQLException ex) {}
  }
  return status;
 }
[/code]
이부분은 프로시저인지 뭔지로 할 수도 있는데 제가 할줄몰라서 클래스에 때려박았습니다-_-;
보시면 예약리스트와 멤버리스트를 조인해서 그 예약된 id의 나이만 출력하도록 합니다.
그래서 for문을 이용해서 20대인지 30대인지 등을 파악해서 status에 저장해서 그 배열을 리턴합니다.
그 status를 리턴하면 0에는 20대미만의 수, 1에는 20대의 수 등이 들어가겠죠.

플렉스로 가봅시다-_-;

[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
   width="100%" height="100%"
 title="나이별 예매현황">
 <mx:Script>
  <![CDATA[
   import mx.rpc.events.ResultEvent;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.remoting.RemoteObject;
   import mx.controls.Alert;
   
   [Bindable]
   public var agestatus:Array = new Array();
   
   public function UpdateAgestatus():void {
    var srv:RemoteObject = new RemoteObject();
    srv.destination = "booksystem";
    srv.addEventListener("result", resultHandler);
    srv.addEventListener("fault", faultHandler);
    srv.getAgestatus();
   }
   private function resultHandler(event:ResultEvent):void {
    var array:Array = event.result as Array;
    agestatus = [
       {name: "20대미만", value: array[0]},
       {name: "20대", value: array[1]},
       {name: "30대", value: array[2]},
       {name: "40대", value: array[3]},
       {name: "50대이상", value: array[4]},
    ];
    parentApplication.viewstack.selectedChild = parentApplication.ViewAgeStatus;
   }
   private function faultHandler(event:FaultEvent):void {
    mx.controls.Alert.show("실패 메세지: " + event.fault.message);
   }
  ]]>
 </mx:Script>
 <mx:ColumnChart width="100%" height="100%" dataProvider="{agestatus}"
   showDataTips="true" >
        <mx:horizontalAxis>
         <mx:CategoryAxis dataProvider="{agestatus}" categoryField="name"/>
        </mx:horizontalAxis>
        <mx:verticalAxis>
         <mx:LinearAxis minimum="0" maximum="100" />
        </mx:verticalAxis>
        <mx:series>
         <mx:ColumnSeries dataProvider="{agestatus}"
           xField="name" yField="value" />
        </mx:series>
    </mx:ColumnChart>
</mx:Panel>

[/code]
RemoteObject를 이용해서 getAgestatus를 호출합니다. 리턴값은 배열로 받습니다.

var array:Array = event.result as Array; 이렇게 하면 배열로 받아올 수 있습니다.
뭐든지 다 잘받아오는 플렉스입니다-_-;

agestatus라는 Array에 name이라는 것에 20대미만 이런식으로 쓰고 value에는 받아온 해당 값을 넣습니다.

가장 보편적인 차트인 ColumnChart를 사용해봅시다. dataProvider는 방금전에 만든 agestatus로 하고 horizontalAxis는 가로에 나타낼 문자열을 말하는 듯합니다. 20대, 30대 이런것을 넣기위해 name속성을 적용합시다.

verticalAxis는 세로축 말하는 거 같은데 저도 잘모르겠습니다. 책보고 따라한거라 ^^
뭐 최소값과 최대값을 설정하는 거 같습니다 ^^
mx:series에 xField에는 name이고 yField는 value로 하는군요-_-; 뭐 저런식으로 하니까 되더군요-_-;

좀더 연구해봐야겠습니다 차팅은 ^^

예매시스템 소스파일입니다.
http://mudchobo.tomeii.com/tt/108
 
Posted by 머드초보
,