히포차트 디자인하기 (2) - 테마 변경하기

 테마변경 메소드를 통해 사용자가 원하는 색상의 테마로 손쉽게 변경해 봅시다.


 지난 강좌보기 >> 히포차트 디자인하기 (1) - 바탕 디자인

(1) 사용자 프로그램과 어울리게 디자인?

 지난 강좌에서 히포차트의 기본 디자인을 변경하는 방법을 알아보았는데 이번 강좌에서는 좌표축과 그리드 라인, 글자색 등 보다 세부적인 디자인을 변경하는 방법을 알아보겠습니다. 우선, 아래와 같은 컬럼 차트를 하나 그려보겠습니다. 
 

(참고 링크 :  Column Chart using Shadow )


 자~  위와 같은 Simple 형의 디자인 타입으로 설정된 그림자효과가 들어간 컬럼 차트를 그렸습니다. 그런데, 사용자가 개발 중인 프로그램이 Green 계열의 디자인이라면 아래와 같은 차트로 변경하는 것이 보다 보기 좋을 것입니다.

 이 그린 계열의 디자인은 아래의 요소들을 수정한 결과입니다.

• 타이틀 글자색
• 로고 글자색
• x축 라인색
• y축 라인색
• 그리드 라인색
• 배경색
• x축 글자색
• y축 글자색

코드를 보면

(복사용 코드 보기 - C#)

this.hHippoChart1.SeriesListDictionary[0].AxisFactor.XAxis.Line.LineColor = Color.YellowGreen;             this.hHippoChart1.SeriesListDictionary[0].AxisFactor.YAxis.Line.LineColor = Color.YellowGreen;             this.hHippoChart1.SeriesListDictionary[0].GraphArea.Grid.GridLine.LineColor = Color.FromArgb(100, Color.YellowGreen);             this.hHippoChart1.SeriesListDictionary[0].AxisFactor.XAxis.ForeColor = Color.YellowGreen;             this.hHippoChart1.SeriesListDictionary[0].AxisFactor.YAxis.ForeColor = Color.YellowGreen;             this.hHippoChart1.SeriesListDictionary[0].AxisFactor.XAxis.TitleLabel.ForeColor = Color.YellowGreen;             this.hHippoChart1.SeriesListDictionary[0].AxisFactor.YAxis.TitleLabel.ForeColor = Color.YellowGreen;             this.hHippoChart1.Designer.BackColor = Color.YellowGreen;             this.hHippoChart1.Titles.Label.ForeColor = Color.YellowGreen;             this.hHippoChart1.Logo.Label.ForeColor = Color.YellowGreen;

와 같은데 보시는 바와 같이 상당히 번거롭고 긴 코드가 들어가게 되어 코드 가독성과 모듈화를 저해하게 됩니다. 그래서 아래와 같은 유틸리티 메소드를 하나 만들어 소개합니다.


(2) 테마 변경 메소드 SetTheme

 - 아래와 같이 SetTheme() 라는 메소드를 하나 만들어 보았습니다. 조금 관심있으신 분들이라면 누구나 만들 수 있는 유틸리티 메소드입니다. 히포차트 객체와 시리즈 리스트 인덱스, 그리고 변경하고자 하는 테마 색상을 파라미터로 받아서 배경색 등에는 그냥 적용하고 각종 글자색은 조금 진하게 적용해주고 있습니다.  

(시리즈리스트 인덱스를 넘기는 이유를 모르시겠으면 히포차트 시리즈(Series) 개념의 이해 참고)

SetTheme() 메소드 복사용 코드 보기(윈폼컨트롤 용)

/// <summary>         /// [윈폼용] 차트의 전체적인 테마를 변경합니다.         /// </summary>         /// <param name="hippo">히포차트 윈폼 객체</param>         /// <param name="SeriesListIndex">시리즈리스트 인덱스</param>         /// <param name="ThemeColor">테마 색상</param>         private void SetTheme(ref hHippoChart hippo, int SeriesListIndex, Color ThemeColor)         {             hippo.Designer.BackColor = ThemeColor;             hippo.SeriesListDictionary[SeriesListIndex].AxisFactor.XAxis.Line.LineColor = ThemeColor;             hippo.SeriesListDictionary[SeriesListIndex].AxisFactor.YAxis.Line.LineColor = ThemeColor;             hippo.SeriesListDictionary[SeriesListIndex].GraphArea.Grid.GridLine.LineColor = Color.FromArgb(100, ThemeColor);             int R = ThemeColor.R;             int G = ThemeColor.G;             int B = ThemeColor.B;               R = (int)(R - R * (0.33));             G = (int)(G - G * (0.33));             B = (int)(B - B * (0.33));             hippo.SeriesListDictionary[SeriesListIndex].AxisFactor.XAxis.ForeColor = Color.FromArgb(R, G, B);             hippo.SeriesListDictionary[SeriesListIndex].AxisFactor.YAxis.ForeColor = Color.FromArgb(R, G, B);             hippo.SeriesListDictionary[SeriesListIndex].AxisFactor.XAxis.TitleLabel.ForeColor = Color.FromArgb(R, G, B);             hippo.SeriesListDictionary[SeriesListIndex].AxisFactor.YAxis.TitleLabel.ForeColor = Color.FromArgb(R, G, B);             hippo.Titles.Label.ForeColor = Color.FromArgb(R, G, B);             hippo.Logo.Label.ForeColor = Color.FromArgb(R, G, B);         }

* 웹 차트 컨트롤일 경우 위 첫번째 파라미터를 WHippoChart 로만 수정해주시면 되겠습니다.

- 적용 방법은 아래 코드에서 처럼 DrawChart() 를 호출하기 직전에 SetTheme() 메소드를 호출해주시면 되겠습니다. 이 메소드를 호출함과 동시에 그 전 라인에서 설정했던 타이틀 색상 등 디자인 설정들은 모두 테마 메소드에 의해 덮어쓰여지게 됩니다. 이 말은 동시에 이 메소드를 호출 한 후에 설정된 내용들은 그대로 반영이 된다는 말이 되겠습니다.
 예를 들어 녹색 계열로 테마를 설정했으나 차트 제목 색상은 검은색으로 하고 싶을 경우 SetTheme() 메소드 호출한 다음 라인에 타이틀 색상을 변경하는 코드를 넣어주시면 되겠습니다.

 특별히 어려운 내용은 없으리라 생각되구요, 그냥 소개한 메소드를 그대로 프로젝트에 옮겨놓고 호출해서 사용하시면 되겠습니다. 

 마지막으로 다음 사항을 다시 생각하면서 강좌를 마치겠습니다.

테마 변경 메소드(SetTheme) 사용에 대해 이해했는가?      *차트의 세부 디자인을 구성하는 각 요소들을 이해했는가?