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

 
기본차트 시리즈 (1) - 라인 차트를 그려보자!


 지난 강좌에서 히포차트의 시리즈(Series) 개념에 대해 알아보았고, 차트를 그려주는 데이터로 가공해주는 히포엔진(HippoEngine) 클래스에 대해서도 알아보았습니다. 그리고 차트를 사용자가 원하는대로 디자인할 수 있는 여러가지 객체들을 알아보았습니다. 

기억이 안나시는 분은 아래 링크 참고하세요 ~  히포차트 시리즈(Series) 개념의 이해 히포 엔진(HippoEngine)으로 손쉽게 차트 데이터를 만들자! 히포차트 디자인하기 (1) - 바탕 디자인 히포차트 디자인하기 (2) - 테마 변경하기

 이번 강좌에서는 이를 바탕으로 실제 차트를 차근차근 그려보겠습니다. 먼저 기본 차트(라인, 컬럼, 파이)를 알아볼텐데요 오늘은 가장 많이 사용되는 차트 중에 하나인 라인 차트를 알아보겠습니다. 

 앞서 알아본 히포차트 시리즈의 개념에 나와있듯이, 차트를 완성하기 위해서는 최소한 한 개의 SeriesList 와 Series 가 존재합니다. 그리고, Line을 그리기 위해서 필요한 최소한의 두 개의 점(SeriesItem) 이 필요하겠습니다.

 코드를 작성하기에 앞서 위와 같이 Hippo NameSpace 를 using 키워드를 통해 논리적 참조합니다. 아래 Hippo.ChartControl NameSpace 는 히포차트 윈폼 컨트롤일 경우 참조해주시면 되겠습니다. 
 다음 가장 먼저 해주어야할 것은 SeriesList 를 생성하여 히포차트 객체에 추가해주는 코드입니다. Line 차트는 기본 값이기 때문에 생략 가능하고 아래와 같이 기본 형태를 만듭니다. 
 

※ 참고사항  위와 같은 상태에서 실행하면 아래와 같은 에러가 납니다. 빈 시리즈리스트를 추가해서 그런 것인데 폼 실행 후 백지상태의 차트를 보여주고 싶을 경우는 this.hHippoChart1.DrawChart(); 만 호출해주시면 되겠습니다.

 다음은 실질적인 차트를 만드는 요소인 시리즈(Series) 를 구성하는 일입니다. 시리즈에서는 차트군(SeriesList)에서 설정한 차트 타입을 변경할 수도 있고, 실제 그래프를 그리는데 필요한 여러 요소(라인 굵기, 포인트 크기 등) 등 을 설정할 수 있습니다. 

 위와 같이 시리즈 객체를 하나 생성을 하고 필요한 설정을 한 후에 시리즈리스트에 있는 시리즈 컬렉션 객체(SeriesCollection)에 추가를 해주면 됩니다. 설정 내용을 보면

• Name : 범례에 표시될 내용
• SeriesColor  : 그려질 그래프 색상(라인차트이므로 라인 색, 설정하지 않으면 자동으로 색상이 설정됩니다.)
• LineWidth : 그려질 라인 굵기
• Point Width : 각 데이터 포인트의 굵기
• FigureTextLocation : 포인트의 수치를 표시할 때 상대적 위치 조절
• ForeColor : 범례에 표시될 글자 색상

 와 같습니다. 자주 사용하는 속성들 위주로 알아보았구요, 이는 라인 차트를 어떻게 그리겠다는 특성을 정의한 것이지 데이터 값이 없으므로 실행 시 역시 위 참고사항 처럼 동일한 에러가 발생합니다. 자 그럼 이제 설정이 완료되었으니 데이터를 넣고 차트를 한 번 그려볼까요?
 

 위와 같이 시리즈아이템(SeriesItem) 3개를 정의하여 시리즈에 추가해보았습니다. 벌써 조금 복잡하시다구요? ^.^  코드의 가독성과 에러를 줄이기 위한 한 방법으로 마치 XML 엘리먼트를 열고 닫듯이 

 <SeriesList>
      <Series>
             <SeriesItem></SeriesItem>
             <SeriesItem></SeriesItem>
             <SeriesItem></SeriesItem>
      </Series>
      <Series>
             <SeriesItem></SeriesItem>
             <SeriesItem></SeriesItem>
             <SeriesItem></SeriesItem>
      </Series>
 </SeriesList>

와 같이 생각해주시면 좀 더 이해하기 쉬우실듯 합니다. 

 위에서 설정한 차트의 결과 이미지는 다음과 같습니다. 라인 굵기는 2정도로 그렸고 포인트는 8로 조금 크게 그렸습니다. 그리고 "라인" 이라는 범례 글자와 각 아이템 이름들도 잘 설정이 되었네요.

 
 그럼 이제 몇 가지 다른 구체적인 설정을 알아보겠습니다.

 ⑴ Line 설정
  위 코드에서는 라인 굵기를 정하는 코드가 삽입되어 있는데 Line 객체를 이용하면 Dash선, Dot선, 화살표 모양, 끝이 둥근 모양 등 다양한 라인 그래프를 그릴 수가 있습니다. (모양을 위해 Line 굵기는 4, Points 굵기는 0으로 처리했습니다.)

⑵ Points 설정
  시리즈에서의 포인트 설정은 items 컬렉션에 포함되어 있는 모든 SeriesItem 들에 적용이 됩니다. 하나의 시리즈아이템을 설정하기 위해서는 (예를 들어, item3 는 포인트를 조금 크게 그리는 경우) SeriesItem 에 있는 Points 속성을 이용해야되는 데요 그 부분은 아래에서 다시 알아보겠습니다. 
 Points 속성 중에 가장 자주 사용하는 속성은 PointType 이 될 것인데 이 속성의 기본 값은 Circle로, 최초에 그렸던 차트처럼 가운데가 하얗게 비어있는 형태의 원 모양의 포인트입니다. 이 값을 알맞게 설정하면 아래와 같이 다양한 모양의 포인트를 그릴 수 있습니다. 

 

 또한, Points는 사용자 지정 이미지를 사용할 수 있어 보다 예쁘고 사용자 목적에 부합되는 차트를 그릴 수 있습니다. (단, 이미지 포인트를 사용할 경우 3D 모양은 권장하지 않습니다.)
 

 ⑶ 3D 입체 
  히포차트에는 입체를 표시하기 위한 IsShow3D 라는 속성이 있는데 어떤 레벨에 있을까요? 그렇습니다. 입체라는 것은 한 차트군 전체에 반영되어야 하기 때문에 SeriesList 레벨에 있어야 겠죠? 

 ⑷ 수치 표시하기
  수치 표시하기란 각 포인트(시리즈아이템)에 값을 표시하는 것을 말하는데 아래와 같이 IsShowFigureText 라는 속성을 통해 각 시리즈아이템 별로 수치를 표시할 모든 객체에 적용해주어야합니다.

※ 여기서 잠깐!  데이터가 많을 경우 시리즈아이템을 아래 처럼 하나씩 다 생성해주어야하나요?   ==> 아닙니다. 아래는 예시를 든 것이구요, 히포엔진(HippoEngine) 이란 클래스를 통해 손쉽게 대량의 데이터를 설정할 수 있습니다.

 ⑸ 특정 포인트 강조하기 
   지금까지 3개의 데이터로 다양한 라인 차트를 그려보고 있습니다. 그런데 사용자의 요구사항에서 첫 번째 데이터는 조금 크게 강조를 하고 싶다면 어떻게 해야할까요? 이는 위에서 잠깐 설명했듯이 SeriesItem 에 있는 Points 객체를 이용하면 되겠습니다. (단, Line 객체는 SeriesItem 의 속성에 포함되지 않습니다.) 

 아래 코드를 보시면 item1 의 Font 와 Points 속성을 조절하여 강조를 하고 있습니다. 여기서 중요한 것은 모두 새롭게 인스턴스를 생성했다는 점입니다. 시리즈아이템의 대부분의 속성들은 null 인 상태이기 때문에 설정을 하기 위해서는 아래와 같이 인스턴스화를 반드시 해주어야합니다.

 ♣ 지금 까지 가장 기본이 되는 차트인 "라인차트" 그리는 법에 대해 알아보았습니다. 중요한 부분을 중심으로 설명이 되었구요 보다 자세한 내용은 아래 샘플 코드를 통해 습득하시기 바랍니다.

라인차트, 스플라인 차트 예제 보기