WPF - telerik 차트 다루기

WPF GUI 툴킷으로 Telerik 제품을 사용하고 있다. (텔레릭으로 읽어야 하는지 떼레릭읽어야 하는지 아직도 궁금함.) 다양한 기능이 있는듯 하지만 아무래도 자주 쓰게되는 건 차트 컨트롤이다. Telerik의 차트는 제품 내부적으로 X,Y축을 두고 그리는 일반적인 형태의 RadCartesianChart와 방사형의 RadPolarChart로 큰 구분을 두고 있다. 방사형의 RadPolarChart는 아직 써보지 못했으나 RadCartesianChart를 표현하는 방식과 크게 다른 점은 없을거라 생각한다.

이 글은 RadCartesianChart에 대한 정리글인데 최근 차트 관련 컨트롤을 사용하게 될때마다 기억이 잘 안나서 자료 써칭하다가 허비하는 시간을 줄이기 위함이다. RadCartesianChart의 골격은 Axis를 정의하고, Series에 데이터 컬렉션을 지정해 그리는 방식으로 다른 라이브러리에서 제공하는 형태와 매우 유사하다.

Chart
 - Axes (Horizontal, Vertical)
 - Series
* 기타 Annotation, Grid 등이 있다.

Axis

Axis는 세로 축을 담당하는 VerticalAxis와 가로 축을 담당하는 HorizontalAxis가 있는데 세세한 표현을 위해 각 축이 갖는 속성을 잘 알아둘 필요가 있다. 속성을 잘못 지정하게될 경우 축의 특정 Label이 다른 Label을 덮어버리거나 축의 Step 값이 너무 크거나 세밀해서 데이터를 한 눈에 파악하기 어려운 경우가 생긴다. Axis엔 수치 값을 표시하는데 적합한 LinearAxis와 Category를 구분하는데 적합한 CategoricalAxis, 그리고 DateTimeAxis가 있다.

Axis의 주요 속성.
1. PlotMode (for CategoricalAxis, DateTimeAxis) : 데이터를 표시할 때 데이터의 Tick와 Label 표시 방식에 대한 것으로 기본값은 BetweenTicks이다. 그리고 OnTicks와 OnTicksPadded가 있다. (https://docs.telerik.com/devtools/wpf/controls/radchartview/axes/plotmode#plot-mode)
2. LabelInterval : Label이 표시되는 간격을 지정할 수 있다.
3. Minimum, Maximum, MajorStep (for LinearAxis) : 최소값, 최대값, 주-표시선 간격에 대한 설정. 값을 지정해주지 않아도 자동으로 계산되지만 지저분한 결과물이 나오기 마련이라 이 값들은 직접 지정해주는 것이 좋다.
4. LabelFitMode : Label이 서로 겹치지 않도록 Label 표시 방법을 지정할 수 있다. Label을 여러 행으로 표시하는 MultiLine과 Label을 회전해서 표시하는 Rotate가 있는데 MultiLine의 경우 차트를 지저분하게 만드므로 LabelInterval과 Rotate를 적절히 사용하는 방식이 나은 것 같다. (내부 알고리즘 방식으로 동작하는 SmartLabelsMode 속성도 확인해볼 필요가 있다. https://docs.telerik.com/devtools/wpf/controls/radchartview/axes/axis-smart-labels)

Series

실제 표현하려는 데이터 컬렉션이 담길 개체.
자주 쓰게되는 것은 아무래도 Line, Scatter Point, Scatter Line 시리즈. 주식 차트를 그리는데 쓰이는 CandleStick도 제공한다.
https://docs.telerik.com/devtools/wpf/controls/radchartview/series-and-axes

GridLine Annotation

차트 데이터 내부의 특이구간을 표시하거나 Limit 값을 표시하는 용도로 GridLine Annotation을 사용할 수 있다. Axis 방향과 값, 그리고 Stroke를 지정하는 방식이다. Annotation에 대한 Label도 붙일 수 있고, Annotation Label의 Definition 정의를 통해 Label 표시 위치 또한 설정할 수 있다.
<telerikChart:RadCartesianChart.Annotations>
<telerikChart:CartesianGridLineAnnotation Axis={Binding ElementName=#ChartYAxis}" Value="..." Label="..." DashArray="..."/>
http://docs.telerik.com/help/windows-8-xaml/chart-annotations-gridline-types.html
http://docs.telerik.com/help/windows-8-xaml/chart-annotations-labels.html

Grid

차트 Background의 X, Y 보조 표시선을 긋는 용도로 쓰인다.
<telerikChart:RadCartesianChart.Grid>
<telerikChart:CatesianChartGrid MajorLinesVisibility="XY"/>
</telerikChart:RadCartesianChart.Grid>
와 같이 해주면 무난하다.

No data to plot

차트에 정의한 Series에 담긴 데이터가 하나도 없으면 기본 값으로 No data to plot이 출력된다. 실제 쓰다보면 데이터가 나중에 바인딩 되는 경우가 잦은데 그럴 때마다 보이는 No data to plot 문구는 꽤나 거슬리는 부분이다. 다행히 이 문구는 새롭게 정의할 수 있다. 차트 속성 중 EmptyContent라는게 있는데 단순히 EmptyContent=""와 같이 빈 값으로 지정해주면 표시를 막을 수 있다. 빈 데이터 셋에 대해 출력되는 문구를 이미지로 대체한다던가 하는 작업이 필요한 경우엔 차트 하위 속성은 EmptyContentTemplate를 다시 정의하는 방법을 사용할 수도 있다.
https://docs.telerik.com/devtools/wpf/controls/radchartview/features/empty-content