기본차트 시리즈 (2) - 컬럼 차트를 그려보자!


 지난 강좌에서 라인 차트에 대해 자세히 알아보았습니다. 지난 강좌는 차트 생성에 대한 기본적인 내용이 담겨 있으므로 반드시 먼저 읽어보시기 바랍니다.

이전강좌 보기 >>  실전! 히포차트 개발하기 - 기본차트 시리즈 (1) 라인 차트(Line chart) 


 이번에는 가장 많이 사용하는 차트 중에 하나인 컬럼 차트를 알아 볼텐데요 사실 중요한 내용은 라인 차트 강좌에서 모두 끝이 났습니다. 코드를 시작하는 방법과 주의사항 등 모두 이미 다루었으므로 컬럼 차트를 보다 멋지게 그리는 방법 위주로 설명을 해보겠습니다. 

 1. 다양한 샘플 보기 
 - '나는 설명 필요없고 샘플 코드만 보면 이해된다!!' 하시는 분들은 아래 코드들을 통해 학습하시면 되겠습니다. 이 중에 몇 개 필요한 것만 보시면 금방 이해가 되시리라 봅니다.
 
 
  •  Column Chart using Shadow
  •  100% FullStacked Column chart in 3D using Tight width and Interval 20%
  •  100% FullStacked Column chart in 3D using Dynamic width
  •  100% FullStacked Column chart using Dark and Tight width
  •  100% FullStacked Column chart
  •  Stacked Column chart in 3D using Transparency and Dynamic width
  •  Stacked Column chart in 3D using Dark and Tight width
  •  Stacked Column chart in 3D
  •  Stacked Column chart using TopRight and Dynamic width
  •  Stacked Column chart using Gradation and Tight width
  •  Stacked Column chart
  •  Column chart in 3D using Transparency and Dynamic width
  •  Column chart in 3D using AxisOrientation BottomRight
  •  Column chart in 3D using Gradation and Tight width
  •  Column chart in 3D using Dark and Dynamic width
  •  Column chart in 3D using Gradation
  •  Column chart in 3D
  •  Column chart in AxisOrientation TopLeft
  •  Column chart using Tight Width
  •  Column chart using Dark effect
  •  Column chart using Gradation effect
  •  Default Column chart
  •  


    2. 컬럼 차트란?
     히포차트에서 컬럼 차트는 Column 이 '기둥'이란 뜻이듯 아래와 같이 사각형의 기둥모양을 한 차트를 의미합니다. 비연속적인 항목 단위 데이터를 차트화 할 때 사용하고 대량의 데이터를 표시하기에는 적합하지 않습니다.

    (※주의 - 컬럼차트라는 용어는 여타의 차트 컴포넌트들과 그 의미가 다를 수 있으므로 히포차트에서 사용하는 용어를 정확히 인지하시기바랍니다. )



    3. 디자인 요소
     앞서 강좌에서 라인 차트를 디자인 하기 위해서 Line, Points 같은 객체들이 있었습니다. 그것들과 같이 컬럼 차트를 디자인 하기 위해서 필요한 객체가 있는데 Column 이라는 동일 이름의 객체가 그것입니다. 이 Column 이라는 객체는 같은 차트군(좌표 차트)의 동일 계열의 차트(컬럼차트, 원기둥차트, 콘차트) 에서 공통으로 적용이 되므로 이 점을 유념하셔야겠습니다. 

     그럼 Column 객체는 어떻게 접근하는가? 
     


     이 Column 이라는건 하나의 사각형(기둥)을 의미합니다. 위 차트 이미지에서 녹색의 사각형 하나, 빨간색의 사각형 하나를 의미하므로 우선 SeriesItem이 이 속성을 가지고 있습니다. 다만, 히포차트에서는 원칙적으로 시리즈아이템속성은 시리즈 레벨에서 상속을 받게 되어 있으므로 Series 역시 이 속성을 가지고 있게됩니다. 

     설명이 복잡했으나 설정하는 내용은 아래 두 가지만 아시면됩니다. 영역디자인타입(기둥의 면적에 관한) 4가지와 컬럼의 넓이타입 3가지를 조합하여 총 12가지 종류의 컬럼 차트를 만들 수 있습니다. 또한 여기에 3D입체와 투명도를 조합한다면 무려 48가지의 경우의 수가 나오게 됩니다.

     (1) AreaDesignType
     Default - 기본 모양
     Gradation - 그라데이션 효과
     Shadow - 그림자 효과
     Dark - 어두운 효과

     (2) ColumnWidthType
     Default - 기본 넓이
     Dynamic - 차트 넓이에 따라 유동적인 넓이
     Tight - 최대한 꽉차게 그린 넓이


    4. 컬럼 차트 디자인 예제
     위에서 설명했듯이 모두 48가지로 그릴 수 있는 컬럼 차트를 사용자가 모두 설정해보고 선택할 수 없으므로 몇 가지 추천되는 조합의 예제를 소개하겟습니다. 

     


    (1) 기본디자인 + Dynamic

     가장 무난난 조합입니다. 넓이를 기본으로 하면 차트 사이즈가 커지더라도 일정 넓이를 유지하게 되어 공간이 많이 남고 Tight를 사용하면 너무 넓어지므로 차트 사이즈가 크거나 변화할 경우라면 더욱 유용한 조합입니다. 

      sr.Column.WidthType = ColumnWidthType.Dynamic;

     


    (2) 그림자 효과 + 2D

     평면 디자인으로 했을 경우 가장 예쁜 방법이 아닐까 생각됩니다. 참고로 그림자 효과는 3D입체일 경우는 적용되지 않습니다. 



      sr.Column.DesignType = AreaDesignType.Shadow;

     


     (3) 그라데이션 + 입체

      컬럼 차트를 입체로 그릴 경우는 그라데이션 효과를 주면 일종의 명암효과를 주어 더욱 예쁘게 그릴 수 있습니다. 



     sList.IsShow3D = true;
     ...
     sr.Column.DesignType = AreaDesignType.Gradation;

     


     (4) 투명도 95 + 입체 + Tight

      입체를 멋지게 그리는 방법으로 투명도를 줄 경우는 Tight로 그려주는 것이 좋습니다. 투명한 면이 보다 넓어지므로 더욱 입체감을 줄 수가 있고 투명도는 55 ~ 95정도로 주는것이 가장 효과적입니다. 


     sList.IsShow3D = true;
     sList.Transparency = 95;
     ...
     sr.Column.WidthType = ColumnWidthType.Tight;

     


     (5) 투명도 65 + 입체 + Dynamic + Dark


      Dark 타입은 설정한 또는 자동 생성된 색상을 채도와 명도를 낮추어 어둡게 그려주는 기능인데 사용자가 개발하는 프로그램에 성격에 따라 특별한 경우에 사용할 수 있는 기능입니다. Dark 타입 으로 가장 예쁘게 그려주는 경우는 왼쪽과 같이 원기둥 차트의 입체형태입니다.

     sList.IsShow3D = true;
     sList.Transparency = 65;
     ...
     sr.Column.DesignType = AreaDesignType.Dark;
     sr.Column.WidthType = ColumnWidthType.Dynamic;


     예제는 이정도로 마치겠습니다. 대부분 기본 형태가 사용되겠지만 위 5가지 조합 또는 사용자가 임의로 설정한 조합들을 이용한다면 더욱 멋지게 차트를 그릴 수 있을 것으로 생각됩니다. 
     


    5. 하나의 항목 강조하기
     

     라인차트에서도 하나의 항목의 포인트를 크게 하거나 모양을 변경하거나 하여 강조 효과를 줄 수 있었는데 컬럼 차트 또한 이러한 기능이 가능합니다.

     왼쪽의 차트 이미지를 보시면 전체적으로 그림자 효과를 주고 있고 기본 넓이로 그렸으나 두번째 컬럼만 보다 넓고 그림자 효과가 없습니다. 이는 위에서 잠깐 설명했듯이 시리즈아이템의 Column 속성을 재 설정했기 때문입니다. 아래 코드를 보시면 이해가 되실겁니다.



     위 코드에 보이듯이 전체 시리즈에는 그림자 효과를 주고 기본 넓이로 그렸으나 인덱스가 1인 항목에 한해 Column 객체의 인스턴스를 다시 생성하여 상속 받은 값을 덮어 쓰고 있습니다.


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

    Posted by 리바이 병장
    ,


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