目前在做的这个项目后端是使用.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还算是比较强大的控件,研读官方文档真是一个苦恼的过程,但是交给我就好了。点进来的朋友麻烦一键三连,您的鼓励是我不断更新的动力!
领取专属 10元无门槛券
私享最新 技术干货