트레이닝 센터

데이터 분석 & 시각화

C1 Gauge:데이터 바인딩을 통한 날씨 표시

날씨 데이터나 메시지 센터 또는 KPI게시판을 만들고자 하는 경우, 일목요연하게 중요 데이터를 파악할 수 있어야 합니다. C1Gauge를 폼에 드래그하여 데이터 값만 입력하면 간단하게 완성할 수 있습니다.

본문에서는 어떻게 C1Gauge컨트롤을 사용하여 데이터와 게이지를 결합하여 날씨 데이터를 표시하는지 소개합니다.


1. C1Gauge를 폼에 드래그

툴바에서 C1Gauge를 폼에 드래그 합니다. 새로운 게이지라이브러리 다이얼로그창이 팝업 되면 그 속에서 원하는 게이지를 하나 선택합니다. 방사형 및 선형이 있습니다. 방사형 게이지는 원형, 나선형, 호선형, 폴딩식 또는 반원일 수 있으며 선형 게이지는 수평, 수직 또는 경사형입니다.

게이지 라이브러리 다이얼로그창은 다음과 같습니다. :


본문의 Demo에서는 C1Gauge컨트롤을 사용하여 많은 게이지 조합을 하나의 팩으로 구성합니다. 각 게이지 컨트롤은 겹치거나 배열을 설정할 수 있습니다. 또 임의의 방식으로 게이지 컨트롤의 크기를 조정할 수 있고 각 게이지 컨트롤마다 가로세로 비율과 상대위치를 유지할 수도 있습니다.


2. 데이터 바인딩 게이지

C1Gauge는 표준 .NET 데이터 바인딩 기술을 사용합니다. 즉, C1Gauge.DataSource로 C1Gauge컨트롤을 데이터소스에 바인딩 할 수 있습니다. 또 DataBindings로 각기 다른 지침을 각각의 데이터 필드에 바인딩 할 수도 있습니다. XML, Access, SQL Server, Oracle 내에서 Visual Studio .NET 데이터를 대상으로 IList, IList<T>및 IEnumerable<T> 포트를 실현합니다. C1Gauge는 모든 지원을 제공합니다.

각기 다른 지침을 각각의 데이터 필드에 바인딩하는 C1Gauge.DataBindings.Add방법은 다음과 같습니다. :

        // 변수:
        //   propertyName: 바인딩할 컨트롤 속성의 명칭
        //   dataSource: 데이터소스를 표시한 System.Object。
        //   dataMember: 바인딩 할 속성이나 리스트.
        //   formattingEnabled: 양식화로 데이터를 표시하는 경우라면 true;아니라면 false。
        //   updateMode: System.Windows.Forms.DataSourceUpdateMode 값 중 하나。
        //   nullValue: 데이터 소스 값이 System.DBNull 일 때, 바인딩에 사용되는 컨트롤 속성인System.Object。
        //   formatString: 하나 또는 여러 개 양식 설명부호가 표시 값을 어떻게 표시하는가
        //   formatInfo: 감춘 양식설정을 다시 기입하는 System.IFormatProvider 의 실현.
        //   binding: 추가할 System.Windows.Forms.Binding。

        // 적요: 지정한 System.Windows.Forms.Binding 을 집합에 추가합니다.
        public void Add(Binding binding);

public Binding Add(string propertyName, object dataSource, string dataMember);

        public Binding Add(string propertyName, object dataSource, string dataMember, bool formattingEnabled);
       
        public Binding Add(string propertyName, object dataSource, string dataMember, bool formattingEnabled, DataSourceUpdateMode updateMode);
        
	public Binding Add(string propertyName, object dataSource, string dataMember, bool formattingEnabled, DataSourceUpdateMode updateMode, object nullValue);
        
	public Binding Add(string propertyName, object dataSource, string dataMember, bool formattingEnabled, DataSourceUpdateMode updateMode, object nullValue, string formatString);
        
	public Binding Add(string propertyName, object dataSource, string dataMember, bool formattingEnabled, DataSourceUpdateMode updateMode, object nullValue, string formatString, IFormatProvider formatInfo);

3. 게이지 속성 설정

C1Gauge컨트롤의 아무 곳이나 더블 클릭하거나 한 번 클릭하면 에디터가 팝업 되어 속성을 빠르게 편집할 수 있습니다.


4. 바인딩 내용을 게이지 날씨 데이터로 전환

본문의 Demo 게이지가 표시하는 날씨는 바인딩 한 날씨 데이터를 전환해야 합니다. 예를 들어 맑은 날, 비 오는 날 등 적합한 수치로 전환합니다. 코드는 다음을 참고해 주시기 바랍니다.

//handle custom binding for Events gauge (sun, rain, thunderstorm, snow)
            string events = (weatherData1.Current as DataRowView)["events"].ToString();
            string[] eventsArray = events.Split('-');
            if (eventsArray.Length == 0)
            {
                eventsgauge.Value = 3;
                eventsgauge.MorePointersValue_0 = 3;
                eventsgaugeMorePointersValue_1 = 3;
            }
            else if (eventsArray.Length == 1)
            {
                Eventsgauge.Value = WeatherEventConverter(eventsArray[0]);
                eventsgauge.MorePointersValue_0 = WeatherEventConverter(eventsArray[0]);
                eventsgaugeMorePointersValue_1 = WeatherEventConverter(eventsArray[0]);
            }
            else if (eventsArray.Length == 2)
            {
                eventsgauge.Value = WeatherEventConverter(eventsArray[0]);
                eventsgauge.MorePointersValue_0 = WeatherEventConverter(eventsArray[1]);
                eventsgauge.MorePointersValue_1 = WeatherEventConverter(eventsArray[0]);
            }
            else if (eventsArray.Length == 3)
            {
                eventsgaege.Value = WeatherEventConverter(eventsArray[0]);
                eventsgaege.MorePointersValue_0 = WeatherEventConverter(eventsArray[1]);
                eventsgaege.MorePointersValue_1 = WeatherEventConverter(eventsArray[2]);
            }

Demo를 실행하면 아래 그림과 같은 날씨게이지를 확인할 있습니다. 바인딩 데이터의 다른 행을 선택하면 게이지가 바인딩 데이터에 따라 변화를 일으키게 됩니다.


본문 Demo의 소스코드는 다음과 같습니다. :


샘플 다운로드



한국 그레이프시티 공식카페에서 기술지원을 받으실 수 있습니다.
이메일을 통해서도 기술지원을 받으실 수 있습니다.