히포차트의 다양한 디자인 요소를 변경하여 사용자의 환경에 맞게 꾸며봅시다.


 히포차트의 본격적인 개발에 앞서 각종 차트의 디자인 요소에 대해 알아보겠습니다. 차트 자체가 아무리 멋진 UI를 가지고 있더라도 사용자 프로그램과의 어울림이 없다면 무용지물이라고 할 수 있으므로 디자인 및 색상의 변경은 중요한 사항인데요, 히포차트는 거의 모든 차트 요소의 색상 및 형태가 조절 가능하므로 이에 충분히 부합합니다. 

 (1) 디자인 타입(DesignType)

 히포차트는 기본적으로 5개의 디자인 타입을 가지고 있습니다. 디자인 타입은 히포차트의 배경 디자인을 의미하는데 아래서 하나씩 알아보겠습니다.



  • Designable(기본값)
  • Default
  • Classic
  • Flat
  • Simple
  • None
① Designable
 - 테스트 버전 시절 부터 고수해오던 히포차트의 고유의 배경 디자인입니다. 푸른 바탕에 흰색 종이가 올려져 있는 모양에 왼쪽 상단에 핀이 하나 꼽혀 있고 오른쪽 상단에는 조금 찢어진 모양으로 흰 색 부분에 그래프가 그려지고 푸른 바탕에 범례가 표시되는 형태입니다.



② Default
 - 기본값인 Designable 처럼 차트 주변이 라운드 처리가 되어 있고, 핀과 찢어진 모양이 빠진 형태입니다.



③ Classic
 - 위 두 모양과 다르게 각 모서리의 라운드 처리없이 각지게 표현되고 있습니다.



④ Flat
 - Default 형태에서 흰 색 도화지(?) 부분이 제거된 형태입니다. 이 타입은 배경색을 조절함으로써 다양한 효과를 줄 수 있어 유용하다 할 수 있습니다.



⑤ Simple
 -  베타 2.0 이상 부터 추가된 형태이고 히포차트의 고유의 디자인을 조금 탈피한 주변 환경과 보다 잘 어울릴 수 있는 타입이라고 할 수 있습니다. 배경색(아래서 설명)을 조절함으로써 테두리 라인 색상이 변경 가능합니다. 단, 이 타입은 바탕이 흰색이므로 Titles 의 글자 색상(위에서 보듯이 기본값은 흰 색)을 변경해주어야 합니다.



 (2) 차트 디자이너(ChartDesigner)

 히포차트의 기본 디자인을 도와주는 클래스로서 아래 속성창에서 Designer라는 항목으로 설정 가능합니다.



 항목 클릭 시 위와 같은 설정 창이 나오는데 각 속성은 아래와 같습니다. (위 이미지는 기본값이 세팅된 형태입니다)

  • BackColor : 차트 배경색
  • BackLineColor : Designable, Default, Classic 등에 있는 Border 라인 색상
  • InnerBackColor : Designable, Default, Classic 등에 있는 흰 색 부분의 색상(일부 디자인 타입에는 적용되지 않습니다.)
  • IsGradation : 푸른 배경색에 그라데이션이 적용할 것인가 여부를 설정
  • IsShowBorder : Border 라인을 표시할 것인가 여부를 설정

 
(3) 코드 예시

 위에서 디자인 타임(Design Time)에서 디자인 타입과 차트 디자이너를 설정하는 방법을 알아봤는데 이는 물론 코드에서도 작성이 가능합니다. 아래는 윈폼 차트의 샘플 코드인데 차트 객체인 hHippoChart1 에서 각 속성에 접근하고 있습니다.

 
 아래는 주요 디자인 타입별 반영된 모습입니다.



 
 이상으로 히포차트의 기본 디자인을 변경하는 방법을 알아보았습니다. 반영된 모습을 보면 Simple 일 경우는 타이틀이 흰색이라 보이지 않고, 다른 타입들은 로고색상이 기본값(푸른계열)을 유지하고 있어 위에서 설정한 연두색 계열과 어울리지를 않는 군요. 이를 해결하기 위해서는 모두 각각 유사한 색상으로 설정을 해주어야 하는데 다소 번거롭고 코드가 길어질 수 있습니다. 
 그래서 이런 부분을 간단히 해결할 수 있는 "테마 변경 메소드" 를 다음 강죄에서 소개할까 합니다. 그리고 좌표축, 범례 등 보다 세부적인 다자인 변경에 대해 알아보겠습니다.

 

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

Posted by 리바이 병장

댓글을 달아 주세요



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