히포차트로 웹(Web)에서 차트를 그려보자!




 [적용 버전]
  베타 2.0 이상

 [시나리오]
 
 1. 웹에서 컬럼차트와 파이차트를 그린다.
 2. 각 차트의 이미지 지정 경로는 images 폴더 하위로 한다.
 3. 각 차트의 Alt 를 설정한다.
 4. "수치 보여주기/안보여주기" 옵션 버튼을 삽입한다.
 5. 컬럼 차트는 쉐도우 효과를 주고 파이 차트는 투명 효과를 준다.

(1) 디자인 타임 설정


위 그림과 같이 히포차트 웹 컨트롤 2개를 끌어다 놓고 아래 보이는 속성창의 Designer 를 통해 BackColor 를 조절해 두번재 차트를 녹색계열로 디자인합니다.


속성창에서 Alt 를 설정하고, 아래와 같이 images 폴더 생성 후 imageURL을 수정합니다.




(2) 중요 코드 설명

1. 페이지 로드와 유지해야할 속성
 - 포스트백 이후에도 설정을 유지할 수치표시여부 bool 타입 속성을 뷰스테이트를 이용해 만듭니다. 페이지 로드에서는 페이지 첫 로드시에만 차트를 그리도록 수정하고 수치 표시 여부의 기본값으로 false 를 넘깁니다.


2. 차트 그리기
 - 예제로 첫번째 차트인 컬럼 차트 샘플입니다. 컬럼 디자인타입을 쉐도우 형태, 넓이타입을 꽉차게(Tight) 주고 있고 해당 값은 랜덤으로 생성하고 있습니다.


3. "수치 보여주기 옵션 버튼" 이벤트 핸들러
 - 버튼 클릭 시 수치보여주기 일 경우 안보이게 처리하고 안보일 경우 다시 보여주게 처리하는 로직입니다.



 html  보기

 C#  전체 코드 보기

VB  전체 코드 보기

 
사업자 정보 표시
히포차트 | 하영대 | 경기도 성남시 수정구 복정동 631-5 401 | 사업자 등록번호 : 129-34-55719 | TEL : 031-751-6673 | Mail : hippochart@gmail.com | 통신판매신고번호 : 제 2010-경기성남-1203호 | 사이버몰의 이용약관 바로가기

Posted by 리바이 병장
TAG , ,

댓글을 달아 주세요



/* 다음 웹인사이드 로그 분석*/