Devexpress 그래프 그리기 (chart 범례/crosshair/계열/시리즈/이중축)

그래프 형태는 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));

 

// 이중축 그래프 그리기

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

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

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

 

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

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

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

 

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

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

 

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

(chartControl1.Series["LINE"].View as LineSeriesView).MarkerVisibility = DevExpress.Utils.DefaultBoolean.True;

 

// 색깔 설정

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;  // 점선

 

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

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"]) }));

}

 

[참고 사이트] 

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