WPF에서 MSCHAR를 이용한 막대 그래프 그리기

통계 페이지를 하나 만들어 막대 그래프로 데이터 값을 표현해 보고자 여러 방법에 대해 구글링해 본 결과, 히포차트와 MSCHART 두가지 방법으로 압축되었는데, 히포차는 유료이다보니 MS에서 무료로 배포해준 MSCHAR를 사용해 보기로 했다.

먼저, MSCHART가 윈도우 폼에서 작동하는 놈이라 WPF에 붙이기 위해서는 WindowsFormsHost를 사용해야 한다. 따라서 관련 DLL을 먼적 참조에 등록시켜 줘야 한다.

 

우선, 

  - MSCHART 다운로드 : www.microsoft.com/ko-kr/download/details.aspx?id=14422

Microsoft .NET Framework 3.5용 Microsoft Chart Controls

해서 설치한다.(MSCHART는 .NET Framework 3.5 이상을 지원하니 자신의 PC에 인스톨 되어 있는 버전을 확인해서 낮은 버전이 설치되어 있다면 .NET Framework 3.5를 먼저 설치해 줘야 한다.)

 

여기까지  되었다면,

VS에서 이하 두가지 DLL를 참조에 추가해 준다.

    1. System.Windows.Forms.DataVisualization.dll - MSCHART를 설치하게 되면 VS의 참조 관리자에서 보여지게 됨.

    2. WindowsFormsIntegration.dll - WindowsFormsHost를 사용하기 위해 추가

       -> 참조 : docs.microsoft.com/ko-kr/dotnet/api/system.windows.forms.integration.windowsformshost?view=netcore-3.1

WindowsFormsHost 클래스 (System.Windows.Forms.Integration)

그리고, WPF의 XAML에는 이하 코드와 같이 <WindowsFormsHost></WindowsFormsHost>로 지정만 해 두면 차트를 동적으로 붙일 수 있게 준비는 완료. - 윈폼 컨트롤 들을 WPF에서 사용할 수 있게 하려면 WindowsFormsHost로 Child에 해당 컨트롤 들을 등록해 주기만 하면 된다. (해당 컨트롤 들을 코드상에서 동적으로 구현해야 하기에 각 컨트롤 들의 속성값들을 코드로 하나하나 지정해야 하는 단점이 있음)

<Grid Grid.Row="1">
            <WindowsFormsHost x:Name="chartArea" Background="{x:Null}"
                              HorizontalAlignment="Stretch"
                              VerticalAlignment="Stretch">                
            </WindowsFormsHost>
</Grid>

 

여기까지 되었다면,

코드로 해당 그래프의 인스턴스를 생성하고 각 속성들을 정의한 후, 표현하고자 하는 데이터 값을 넣은 후 WindowsFormsHost의 Child에 해당 인스턴스를 등록해 주면 끝.

이하 코드 참조.

using System.Windows.Forms.DataVisualization.Charting;
.
.
.
.
private void BookGroupGraphDisplay()
{
            string queryStr = "select Item_name from codetable";
            string queryStrCont = _QueryStrCont;

            DataRow rowData;
            string gropName;

            // x축에 표시할 항목 가져오기
            DataTable dbData = dbcontrol.Select(queryStr);
            int rowCnt = dbData.Rows.Count;

            // wpf 컨트롤 null 초기화
            chartArea.Child = null;
            // List 변수값 누적되지 않도록 초기화
            items.Clear();
            
            // x축 항목 수 만큼 반복처리 : 각 x축항목에 대햔 y값을 List에 쌓아두기
            for (int loopCnt = 0; loopCnt < rowCnt; loopCnt++)
            {
                rowData = dbData.DefaultView[loopCnt].Row;
                gropName = rowData.ItemArray[0].ToString();

                queryStrCont += "'";
                queryStrCont += gropName;
                queryStrCont += "'";

                // List에 쌓기
                items.Add(new FeildBookGroup()
                {
                    // x축 항목 이름
                    GroupName = gropName,
                    // x축 항목에 대한 y축 값
                    t_cont = dbcontrol.Count(queryStrCont)

                }); ;

                // 초기화 : "select count(*) from booklisttable where Group_section="
                queryStrCont = _QueryStrCont;
            }

            // MSCHART 구성 - 막대그래프 그리기(Column)
            // Chart(차트 인스턴스) -> ChartArea(차트가 그려지는 영역) -> Series(표현하고자 하는 차트 종류 및 값)
            Chart charView = new Chart();
            Title title = new Title();
            title.Text = "도서분류별현황";
            title.Font = new System.Drawing.Font("G마켓 산스 TTF Light", 20);
            // 차트 타이틀 설정
            charView.Titles.Add(title);

            ChartArea area = new ChartArea("Total");
            area.BackColor = System.Drawing.Color.FromArgb(0, 255, 255, 255);
            area.AxisX.IntervalAutoMode = IntervalAutoMode.VariableCount;   // x축 간격표시 방법 : 값에 따라 자동 표시
            area.AxisY.IntervalAutoMode = IntervalAutoMode.VariableCount;   // y축 간격표시 방법 : 값에 따라 자동 표시
            area.AxisY.Minimum = 0; // y측 최소값
            area.AxisX.Interval = 1;    // x축 축간격
            area.AxisY.Enabled = AxisEnabled.False; // 차트 Y축 표시여부 : 비표시
            area.Area3DStyle.Enable3D = true;   // 그래프를 3D형태로 표시할지 유무 : 표시
            area.AxisX.MajorGrid.Enabled = false;   // x축 보조선 표시 유무 : 비표시
            area.AxisY.MajorGrid.Enabled = false;   // y축 보조선 표시 유무 : 비표시
            // 차트가 그려지는 영역에 대한 설정
            charView.ChartAreas.Add(area);

            Series series = new Series();
            series.ChartArea = "Total";
            series.BackGradientStyle = GradientStyle.TopBottom; // 그래프 그라디에션 표시 방법 설정 : 위쪽에서 아랴쪽으로 적용
            series.ChartType = SeriesChartType.Column;  // 차트 종류 설정 : 막대그래프(Column)
            series.XValueType = ChartValueType.String;  // x축에 표시할 값 타입 설정 : String
            series.YValueType = ChartValueType.Int32;   // y축에 표시할 값 타입 설정 : int
            series.IsValueShownAsLabel = true;  // 표시할 데이터 요소의 값을 표시할지 여부 : 표시
            // 차트 종류 및 속성설정
            charView.Series.Add(series);

            // wpf 영역에 표시할 차트를 등록
            chartArea.Child = charView;
            chartArea.Child.Refresh();

            // 차트에 표시할 데이터를 하나씩 등록
            for(int cnt = 0; cnt < items.Count; cnt ++)
            {
                charView.Series[0].Points.AddXY(items[cnt].GroupName, items[cnt].t_cont);
            }
}

<결과>