DevExpress——ChartControl知多少（C＃）

目前在做的这个项目后端是使用.NET框架在做，前端是借助DevExpress框架做开发，由于是基于Winform的页面实现，于是DevExpress提供了全套的Winform的解决方案，弥补了Winform本身的工具箱不全且不再维护的弊端。DevExpress提供的表图控件叫做ChartControl，在其上面可以完成图表的制作，灵活易上手且文档完善，但是官方文档是全英文的，对于我们英语不好的人来说是很不友好的，所以直接的方式是看它提供每个控件的使用demo，为了以后开发方便，在此记录并分享ChartControl的使用，以及Series线条使用方式。

单面板ChartControl使用简介

我提前建好了一个winform，为了体现DevExpress的完整性，我们这里不使用VS自带的winform页面，而使用DevExpress自带的XtraForm，然后我们从ToolBox上拉一个ChartControl到页面上，设置其停靠方式为在父容器上停靠，代码控制为this.ChartContral1.Dock = DockStyle.Fill.

新建ChartControl

然后我们在代码里进行初始化Chart，单独一个Chart要成图是不够的，我们还需要一个XYDiagram来承载我们的图形，于是我们可以在Winform里面的设计器上添加一个XYDiagram，这样Series画在Chart上会显得更加直观。

直接上代码：

DevExpress.XtraCharts.XYDiagram xyDiagram1 = new      DevExpress.XtraCharts.XYDiagram();

DevExpress.XtraCharts.Series series1 = new DevExpress.XtraCharts.Series();

DevExpress.XtraCharts.LineSeriesView lineSeriesView1 = new DevExpress.XtraCharts.LineSeriesView();

在chartControl上进行添加：

初始化ChartControl

设置之后ChartControl就初始化成功了，接下来设置曲线列表，规定曲线X轴显示为日期，Y轴显示指标，初始化曲线列表以及Y轴指标数组：

private List _list = new List();private string[] selectItems = { "日配注水量(m³)", "日注水量(m³)", "油压(Mpa)", "套压(Mpa)" };

构建ChartControl代码如下，设置线条为光滑曲线，并且线条上有明确值实例显示，样式为小实圆，代码如下：

private void CreateChart(DataTable dt){   #region Series

this._list.Clear();

int index = 0;

foreach (var item in selectItems)

{    

   index++;    

   string seriesName = null;    

   seriesName = item;    

   if (seriesName != null)    

     {        

       Series series = dt.CreateSeries(seriesName, ViewType.Line, index, typeof(float));        

       ((LineSeriesView)series.View).MarkerVisibility = DevExpress.Utils.DefaultBoolean.True;        

       ((LineSeriesView)series.View).LineMarkerOptions.Kind = MarkerKind.Circle;        

       ((LineSeriesView)series.View).LineStyle.DashStyle = DashStyle.Solid;        

       this._list.Add(series);    

     }  

 }

#endregion  

 this.chartControl1.Series.Clear();

this.chartControl1.Series.AddRange(_list.ToArray());

}

接下来初始化XYDiagram，设置X轴显示日期，Y轴接收指标：

public virtual void UpdateDiagram(){

if (CurrentXYDiagam != null)

{    

 CurrentXYDiagam.AxisX.Title.Text = "日期";    

 CurrentXYDiagam.SetAxis();       //多坐标轴    

 #region 多坐标轴    

   CurrentXYDiagam.SecondaryAxesY.Clear();    

 foreach (var item in this.Serieslist)    

 {        

     if (ColorCenter.SeriesColors.ContainsKey(item.Name))              

       item.View.Color = ColorCenter.SeriesColors[item.Name];        

     int itemIndex = this.Serieslist.IndexOf(item);        

     if (itemIndex != 0)        

     {            

       SecondaryAxisY myAxis = new SecondaryAxisY();            

       myAxis.SetSecondaryAxisY(AxisAlignment.Far, StringAlignment.Center, item);            

       CurrentXYDiagam.SecondaryAxesY.Add(myAxis);            

       ((LineSeriesView)item.View).AxisY = myAxis;//绑定          

     }          

     else          

     {              

       CurrentXYDiagam.AxisY.SetAxisY(item);          

     }      

   }    

 #endregion

}

}

其中需要注意的是方面上面定义了虚方法，由于项目中重用了该方法，因此定义成父类，子类继承并且重写该方法

public void UpdateChart(){  

DataTable dt = new DataTable();  

this.chartControl1.DataSource = dt;  

this.CreateChart(dt);  

this.UpdateDiagram();}public void UpdateDiagram(){  

foreach (var item in selectItems)  

{    

 CurrentXYDiagam.SecondaryAxesY.Add(new SecondaryAxisY(item));  

}  

}

CurrentXYDiagam是事先定义好的，DataTabel将自己的数据传递进去，然后赋值给ChartControl的DataSource属性，这里由于数据隐私，没有给出方法，自己可以将自己的数据写进DataTable中。

接下来看最终效果：

ChartControl

今天就先分享到这里，ChartControl还算是比较强大的控件，研读官方文档真是一个苦恼的过程，但是交给我就好了。点进来的朋友麻烦一键三连，您的鼓励是我不断更新的动力！