Devexpress 차트 사용

그래프 형태는 Series를 추가할 때 지정하면 됩니다.

다음번에 Xbar-R 관리도 그래프를 그리는 예제를 준비 중입니다.

 

그래프의 구성 요소를 알면, 프로그래밍에 훨씬 도움이 되겠죠?

Crosshair 라는 용어를 몰라 엄청 헤매고 나서, 혹시나 도움이 될까해서...

(근데... 크로스 헤어는 뭘로 번역하나요? 십자선 도움말... 말풍선... 팝업 메세지...)

 

  

// 새로 그리기 위해 차트를 클리어

    chartControl1.Series.Clear();

 

// 제목을 클리어 하고 새로 설정

    chartControl1.Titles.Clear();

    DevExpress.XtraCharts.ChartTitle chartTitle1 = new DevExpress.XtraCharts.ChartTitle();

    chartTitle1.Text = "Xbar-R 관리도";

    chartTitle1.Font = new System.Drawing.Font("Tahoma", 20F, FontStyle.Bold);

    chartControl1.Titles.AddRange(new DevExpress.XtraCharts.ChartTitle[] { chartTitle1 });

 

// Legend (범례) 표시 하기

    chartControl1.Legend.Visible = true;

 

// Crosshair 숨기기

// (디폴트는 Crosshair, 이를 지원하지 않는 2D/3D 등에서는 Tooltip 사용)

    chartControl1.CrosshairEnabled = DevExpress.Utils.DefaultBoolean.False;

 

// 차트 추가 및 차트 모양 설정(Bar/Line)

    chartControl1.Series.Add(new DevExpress.XtraCharts.Series("LINE", ViewType.Line));

    chartControl1.Series.Add(new DevExpress.XtraCharts.Series("BAR", ViewType.Bar));

 

// X축 눈금 디폴트 설정 해제 (날짜/숫자 등 내부적으로 자동 변경시키지 않고, 입력한 값으로 표시)

    chartControl1.Series["LINE"].ArgumentScaleType = ScaleType.Qualitative;

    chartControl1.Series["BAR"].ArgumentScaleType = ScaleType.Qualitative; 

 

// Label 표시 (그래프 위에 데이터 보여주기)

    chartControl1.Series["LINE"].LabelsVisibility = DevExpress.Utils.DefaultBoolean.True;

// Label 값을 소수점 2자리까지만 표시

    chartControl1.Series["LINE"].Label.TextPattern = "{V:N2}";

 

// 바 차트 라벨 위치 및 글자 크기 설정 

    (chartControl1.Series["BAR"].Label as SideBySideBarSeriesLabel).Position =

                                                        DevExpress.XtraCharts.BarSeriesLabelPosition.Center;  // 라벨을 막대 중간에

    (chartControl1.Series["BAR"].Label as SideBySideBarSeriesLabel).Font = new Font("Tahoma", 14f); // 글꼴 및 글자 크기 지정

 

// 바 차트 폭/색상 설정 

    (chartControl1.Series["BAR"].View as SideBySideBarSeriesView).BarWidth = 2;       // 1은 원래 사이즈, 2는 2배

    (chartControl1.Series["BAR"].View as SideBySideBarSeriesView).Color = Color.Red; // Bar 색상 지정

 

// 색깔 설정

    chartControl1.Series["LINE"].View.Color = Color.Red;

    chartControl1.Series["BAR"].View.Color = Color.Blue;

 

// 라인 스타일 설정 (두께/선 모양) 

    ((LineSeriesView)this.chartControl1.Series["XLCL"].View).LineStyle.Thickness = 1                         // 두께

    ((LineSeriesView)this.chartControl1.Series["XLCL"].View).LineStyle.DashStyle = DashStyle.DashDot;  // 점선

 

// Line 그래프에 Point 표시 (데이터가 있는 곳에 꼭지점/도트/마크 표시)

    (chartControl1.Series["LINE"].View as LineSeriesView).MarkerVisibility = DevExpress.Utils.DefaultBoolean.True;  // 마크 표시

    ((LineSeriesView)this.chartControl1.Series["XLCL"].View).LineMarkerOptions.Kind = MarkerKind.Cross;             // 마크 모양

 

// Y축 최대값/최소값 설정

    xyDiagram = (XYDiagram)chartControl1.Diagram;

    xyDiagram.AxisY.Title.Font = new Font("Tahoma", 9, FontStyle.Bold);

    xyDiagram.AxisY.WholeRange.SetMinMaxValues(70, 110);  // 70~110 범위의 그래프를 표시

 

// 데이터 테이블 값으로 그래프 그리기

    foreach (DataRow dr in dt.ResultDataSet.Tables[0].Rows)

    {

        chartControl1.Series["LINE"].Points.Add(new SeriesPoint(dr["DATE1"] + "", new double[] { Convert.ToDouble(dr["LINE"]) }));

        chartControl1.Series["BAR"].Points.Add(new SeriesPoint(dr["DATE1"] + "", new double[] { Convert.ToDouble(dr["BAR"]) }));

    }

 

// 이중축 그래프 그리기

// 먼저, Chart Wizard -> Diagram -> Elements 탭에서 Secondary Y-Axes 를 추가하고 사용해야 함

// (축의 최소값, 최대값 설정은 해당 축을 클릭 후 WholeRange를 변경하면 됨)

     

((LineSeriesView)chartControl1.Series["BAR"].View).AxisY = ((XYDiagram)chartControl1.Diagram).SecondaryAxesY[0];

 

// 라인 차트 데이터가 NULL일 때 표시하지 않기 (Empty Points)

     

    if (Empty Points 조건이면)

        chartControl1.Series["LINE"].Points.Add(new SeriesPoint(dr["DATE1"] + ""));  // X축 값만 지정하고 그린다

    else

        chartControl1.Series["LINE"].Points.Add(new SeriesPoint(dr["DATE1"] + "", new double[] { Convert.ToDouble(dr["LINE"]) }));

 

// X축 데이터가 아주 많을 때 (Axis Scale Types)

I-MR 차트 등 X축 값이 시간(분/초) 단위로 자동 측정된 많은 데이터를 보여주어야 하는 경우에는 

아래와 같이 스케일 스타일을 Numeric 이나 DateTime 으로 설정해 주면 된다.

 

    series.ArgumentScaleType = ScaleType.DateTime;

    series.ValueScaleType = ScaleType.DateTime;

 

 

[참고 사이트] 

1. 몇 가지 차트 유형별로, 그림을 곁들여 잘 설명해 주셨네요~

     https://shanael.tistory.com/17?category=795319

 

2. DevExpress 도움말 페이지를 빼놓을 순 없죠~

     https://documentation.devexpress.com/WindowsForms/8117/Controls-and-Libraries/Chart-Control

 

3. Devexpress XtraChart 차트 축 추가 하는 방법 (이중축/Secondary Axes)

     https://bigenergy.tistory.com/572

 

4. Empty Points (Line break, Hide Null or Zero value)

     https://documentation.devexpress.com/WindowsForms/6890/Controls-and-Libraries/Chart-Control/Data-Representation/Empty-Points