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.

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

直接上代码：

1. DevExpress.XtraCharts.XYDiagram xyDiagram1 = new DevExpress.XtraCharts.XYDiagram();
2. DevExpress.XtraCharts.Series series1 = new DevExpress.XtraCharts.Series();
3. DevExpress.XtraCharts.LineSeriesView lineSeriesView1 = new DevExpress.XtraCharts.LineSeriesView();

在chartControl上进行添加：

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

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

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

1. private void CreateChart(DataTable dt)
2. #region Series
3. this._list.Clear();
4. int index = 0;
5. foreach (var item in selectItems)
6. index++;
7. string seriesName = null;
8. seriesName = item;
9. if (seriesName != null)
10. Series series = dt.CreateSeries(seriesName, ViewType.Line, index, typeof(float));
11. ((LineSeriesView)series.View).MarkerVisibility = DevExpress.Utils.DefaultBoolean.True;
12. ((LineSeriesView)series.View).LineMarkerOptions.Kind = MarkerKind.Circle;
13. ((LineSeriesView)series.View).LineStyle.DashStyle = DashStyle.Solid;
14. this._list.Add(series);
15. }
16. }
17. #endregion
18. this.chartControl1.Series.Clear();
19. this.chartControl1.Series.AddRange(_list.ToArray());
20. }

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

1. public virtual void UpdateDiagram()
2. {
3. if (CurrentXYDiagam != null)
4. {
5. CurrentXYDiagam.AxisX.Title.Text = "日期";
6. CurrentXYDiagam.SetAxis();
7. //多坐标轴
8. #region 多坐标轴
9. CurrentXYDiagam.SecondaryAxesY.Clear();
10. foreach (var item in this.Serieslist)
11. {
12. if (ColorCenter.SeriesColors.ContainsKey(item.Name))
13. item.View.Color = ColorCenter.SeriesColors[item.Name];
14. int itemIndex = this.Serieslist.IndexOf(item);
15. if (itemIndex != 0)
16. {
17. SecondaryAxisY myAxis = new SecondaryAxisY();
18. myAxis.SetSecondaryAxisY(AxisAlignment.Far, StringAlignment.Center, item);
19. CurrentXYDiagam.SecondaryAxesY.Add(myAxis);
20. ((LineSeriesView)item.View).AxisY = myAxis;//绑定
21. else
22. CurrentXYDiagam.AxisY.SetAxisY(item);
23. #endregion

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

1. public void UpdateChart()
2. DataTable dt = new DataTable();
3. this.chartControl1.DataSource = dt;
4. this.CreateChart(dt);
5. this.UpdateDiagram();
6. public void UpdateDiagram()
7. foreach (var item in selectItems)
8. CurrentXYDiagam.SecondaryAxesY.Add(new SecondaryAxisY(item));

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

接下来看最终效果：

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