히포차트 마커와 틱(marker and tick) 에 대한 고찰

 

히포차트 마커와 틱

 

최근 많은 개발자분들께서 라인마커와 틱(눈금) 의 개발 방법에 대해 어려워하시는듯 하여 전반적으로 한 번 정리를 해봅니다.

 

1. 마커(Axismarker) - 라인이나 영역을 나타냄

 

히포차트에서 마커는 라인마커와 영역마커로 분류를 하며 보통 라인마커를 많이 사용합니다. 그럼 마커란 무슨 객체를 의미할까요?

마커란, Y축, X축을 기준으로 라인 혹은 영역을 좌표평면에 표시를 하는 객체입니다.

 

(1) Y축 마커

 - Y축 마커의 대표적인 케이스는

http://www.hippochart.com/gallery/galcategory.aspx?cate=feature&type=linemk

 

위와 같은 상한선, 하한선을 들 수 있습니다. 가장 기본 적인 예시입니다.

코드를 보면

 

AxisMarker mk2 = new AxisMarker("상한선", 178);

 

와 같이 표시될 이름과 그 값을 주면 끝입니다. (178 이라는 값 위치에 상한선이라는 이름으로 라인을 그어라)

 

 

(2) X축 마커

 

 - 다음 X축입니다. X축은 다소 복잡한 경우의 수를 가지는데요

 

 A. X축이 문자형일때 - X축이 문자형일 때는 단순 순차적 그래프이기 때문에 특별한 수치를 입력하여 마커를 줄 수 없습니다. 예를 들어, X축이 미국, 영국, 프랑스... 와 같이 되어 있다면 그 사이 어딘가에 라인을 그릴 수는 없는 일이지요 미국.5 와 같은 수는 없으니까요;;; 하지만, 구현상 필요한 케이스가 있을 수 있으므로 히포차트에서는 아래와 같은 특별한 기능을 가지고 있습니다.

 

http://www.hippochart.com/gallery/galcategory.aspx?cate=feature&type=linemk&idx=180

 

실제 픽셀의 간격을 통해 구현하는 방법으로 코드를 보면

 

 AxisTick tk2 = new AxisTick(new PointF(
this.hHippoChart1.SeriesListDictionary[0].AxisFactor.Zero.X + this.hHippoChart1.SeriesListDictionary[0].AxisFactor.XAxis.UnitPixel * 104,
this.hHippoChart1.SeriesListDictionary[0].AxisFactor.Zero.Y));
tk2.IsShowGridLine = true;

 

 

자... 써놓고 보니 뭔가 이상하지요?? 네 맞습니다. 이건 마커객체가 아니라 틱입니다. 왜 마커처럼 쓰이느냐??

바로 isShowGridLine 이라는 속성때문인데요... 틱을 만들어 놓고 라인을 그릴 수 있는 기능이 있으므로 이렇게 사용이 가능합니다.

 

 

 B. X축이 숫자형일때

 

숫자형일 경우는 Y와 마찬가지로 기본적인 내용이 됩니다.

 

http://www.hippochart.com/gallery/galcategory.aspx?cate=feature&type=linemk&idx=72 

 

 

 C. X축이 날짜형일때

 

날짜형일 경우도 역시 숫자형과 같은 형식이지만 조금 복잡합니다.

먼저, 기본형일 경우를 보면

 

 

 

http://www.hippochart.com/gallery/galcategory.aspx?cate=feature&type=linemk&idx=226 

 

를 들 수 있습니다.

시간형일 경우에는

 

http://www.hippochart.com/gallery/galcategory.aspx?cate=feature&type=linemk&idx=227 

 

를 참고하시면 됩니다. 유사한 형태입니다.

 

 

 

2. 틱(AxisTick)  - 한 개의 눈금을 의미함.

 

(1) Y축 틱

 

틱이란, 하나의 눈금을 말한다고 했습니다. 즉, 차트를 그리는데 Y축에 표시되는 스케일 눈금을 다른 특정한 어떤것으로 (문자, 이미지, 다른 숫자) 로 바꾸고 싶을 경우 Axistick 객체를 하나 생성해서 그 눈금에 할당하는 작업이 필요합니다.

 

http://www.hippochart.com/gallery/galcategory.aspx?cate=feature&type=AxisTick&idx=77

 

위 샘플을 보시면 Y축에는 엄연한 숫자가 있지만 Good 과 Bad 라는 보다 명확한 의미로 교체를 한 케이스입니다. 사용자에게 공개할 경우 100, 200이라고 되어 있는 것보다는 좋은 경우 나쁜 경우라는 명확한 표식이 더 좋을 수 있기 때문입니다.

 

 

 

(2) Y축 엑스트라 틱

 

틱의 개념을 생성할 경우 같이 따라다니는 것이 또한 Extra Tick 입니다. 이 것은 실제 차트에 보여지는 눈금은 아니지만 추가로 새로운 눈금을 나타내고 싶다고 할 경우 유용한 객체입니다.

 

 

 

http://www.hippochart.com/gallery/galcategory.aspx?cate=feature&type=AxisTick&idx=75

 

대표적인 "추가눈금"의 샘플입니다. 바로 이해가 되시죠??

 

 

 

(3) X축 틱

 

자 ~ 다음은 X축의 틱입니다. X축은 마커때와 마찬가지로 3가지 경우로 나뉘는데요 우선 틱의 기본 개념인 눈금을 바꿔치기? 하는 기본 코드를 먼저 보시기 바랍니다.

 

http://www.hippochart.com/gallery/galcategory.aspx?cate=feature&type=AxisTick&idx=76

 

위 코드를 보면 X축의 나라 이름을 국기 아이콘으로 바꿨습니다. 훨씬 보기가 수훨하고 명확한 효과를 냅니다. 아주 기본적인 틱의 개념이라고 볼 수 있습니다.

 

 

다음으로는

 

 

 

http://www.hippochart.com/gallery/galcategory.aspx?cate=feature&type=AxisTick&idx=225

 

주식차트 날짜형 X축일 경우의 샘플인데요... 특정 날짜에는 시간을 붙여넣고 싶다는 요구사항이 있을 경우 이와 같이 틱으로 처리가 가능합니다. 물론 위에서 알아본대로 그리드 라인을 그려넣을 수도 있습니다.

 

 

 

(4) X축 엑스트라 틱

 

 

 

 

이제 이해가 잘 되실 것으로 봅니다.

X축의 기본 설정된 눈금 말고 다른 새로운 눈금을 표시하는 엑스트라틱의 기본 샘플코드입니다.

 

http://www.hippochart.com/gallery/galcategory.aspx?cate=feature&type=linemk&idx=228