Devexpress Chartcontrol, Diagram 조작을 통한 x, y축 조절하는 방법에 대해서 포스팅합니다.
Chartcontrol에 원하는 차트를 그리고 나면, x, y축의 범위를 잘 설정해 주어야 차트가 한눈에 들어 올 수 있도록 세팅 할 수 있게 됩니다.
이포스트는 ChartControl에 Datasource를 연결 한 후 그려진 차트를 입맛에 맞게 변경 할 수 있도록 diagram을 조작하는 방법에 대해서 알아보도록 하겠습니다.
우선 diagram을 선언 해줍니다.(저는 주로 diagram을 한 form의 전역변수로 설정하여 사용합니다.)
전역변수 : XYDiagram diagram;(using DevExpress.XtraCharts안에 포함되어 잇는 것으로 알고 있습니다.)
차트에 데이터를(Series를) 매핑하는 부분을 간단히 보여드리겠습니다.(여기서 차트는 ViewType.Line으로 설정하도록 하겠습니다.)
Series series1 = new Series("라인차트", ViewType.Line);
chartControl1.Series.AddRange(new Series[] { series1 });
diagram을 매핑시키는 작업이 필요합니다. 전역변수로 설정해둔 diagram에 차트 diagram을 매핑시킵니다.
diagram = (XYDiagram)chartControl1.Diagram;
위작업이 되면 diagram변수를 통해 차트이 x,y축을 조작 할수있습니다.
우선 제 프로그램의 일부를 공개하고 주석을 통해 하나하나 알아보도록 하겠습니다.
TimeSpan ts = Convert.ToDateTime(toDateTime) - Convert.ToDateTime(fromDateTime); //두 날짜 사이의 간격을 구합니다.
diagram.AxisX.DateTimeScaleOptions.MeasureUnit = DateTimeMeasureUnit.Minute; // X축 측정단위를 분으로 합니다.
diagram.AxisX.DateTimeScaleOptions.GridAlignment = DateTimeGridAlignment.Hour; // X축 GRIDaLIGNMENT를 시간으로 합니다.
diagram.AxisX.DateTimeScaleOptions.GridSpacing = (ts.Days / 5)*2+ 5; // X축 의 표시 간격을 설정합니다.(X축 눈금을 의미합니다.)
if(ts.Days>30)
{
diagram.AxisX.DateTimeScaleOptions.GridSpacing = 24 * 7; // 30일 이상을 표현하면 간격을 넓게 해야 그래프가 지저분하지 않겠죠?
}
if (ts.Days > 180)
{
diagram.AxisX.DateTimeScaleOptions.GridSpacing = 24 * 30; // 180일 이상을 표현하면 간격을 더 넓게 해야 할 것입니다.
}
diagram.AxisX.Label.TextPattern = "{A: yyyy-MM-dd \n HH:mm}"; // X축의 시간 표시방법을 나타냅니다.(시간표시 방법은 별도 포스팅 하겠습니다.)
diagram.AxisX.Reverse = false; // X축 Reverse
//타이틀
diagram.AxisY.Title.Text = "mm/s"; // y축의 이름을 setting 합니다.
diagram.AxisY.Title.Font = new Font("Tahoma", 8, FontStyle.Bold); // y축 title의 font도 변경 가능합니다.
diagram.AxisY.Title.Alignment = StringAlignment.Center; // 딱봐도 아시겠죠?
diagram.AxisY.Title.Visibility = DevExpress.Utils.DefaultBoolean.True; // 사용자 입맛에 맞게 title을 보이고 안 보일 수 있습니다.
diagram.AxisY.GridLines.Visible = false; // gridline의 표시여부를 선택합니다.
diagram.AxisY.GridLines.LineStyle.Thickness = 1;
// y축 scale
diagram.AxisY.WholeRange.SetMinMaxValues(0, 6); // y축의 범위를 설정합니다.
diagram.AxisY.NumericScaleOptions.GridOffset = 0;
diagram.AxisY.NumericScaleOptions.GridSpacing = 0.5; // y축의 단위 표시 간격을 설정합니다.
diagram.AxisY.VisualRange.SideMarginsValue = 0;
//zoom
// X,Y축의 Zoom, Scroll 등의 사용여부를 세팅합니다.
diagram.EnableAxisXZooming = false; .
diagram.EnableAxisXScrolling = false;
diagram.EnableAxisYZooming = true;
diagram.EnableAxisYScrolling = false;
diagram.ZoomingOptions.UseKeyboardWithMouse = false;
결국 정리해드리면 X축을 조작하고 싶다면 diagram.AxisX. 를 Y축을 조작하고 싶다면 diagram.Axisy. 을 통해 조작 할 수 있습니다.
혹시 나 devexpress diagram에 대한 궁금증이 있으시면 댓글달아주세요. 함께 고민해 보도록 하겠습니다.
