DevExpress20:XtraCharts控件实现图表
一、总体概述官方文档: https://docs.devexpress.com/WindowsForms/8117/controls-and-libraries/chart-control ChartControl控件主要包括Chart Title、Legend、Annotations、Diagram、Series五部分;如图: 二、chartControl层\XYDiagram层chartControl像DEV的其它控件一样,这一层之相当于是一个壳子,我们平时在这里面设置的属性也不多。而且都是些常规属性,比如大小、停靠方式等等。 XYDiagram这一层就比较关键了,主要是涉及到XY轴的显示方式和滚动条显示等。并且坐标轴的显示方式和数据类型也有很大的关系,主要包括3种类型,数据类型是根据添加到Series中的数据类型决定的,主要属性是ArgumentScaleType。所以涉及到3种不同的设置方式。
2. 当前数据类型是字符串时其它设置同上,主要是要想出现滚动条,在设计面板中还不能实现,必须通过代码设置 DevExpress.XtraCharts.XYDiagram xyDiagram1 = (XYDiagram)this.chartControl1.Diagram; xyDiagram1.AxisX.Range.MaxValueInternal = 3; //这个属性在设计视图里面是看不到的,只有代码里面才可以设置。 xyDiagram1.AxisX.Range.MinValueInternal = -0.5D; 3.当前数据类型是时间AxisX ax = (XYDiagram)chartControl1.Diagram; ax.GridSpacingAuto = false; ax.DateTimeMeasureUnit = DateTimeMeasurementUnit.Minute;这个可以根据你自己的情况设置 ax.DateTimeGridAlignment = DateTimeMeasurementUnit.Second; 这个是间隔单位 ax.GridSpacing = 10; 每10秒为一个间隔。 三、实例1.饼状图1.1、添加ChartControl控件 在工具箱中找到ChartControl控件,拖到窗口中,创建Pie;
private DataTable CreateChartData() { DataTable dtData = SqlHelper.GetDataSet(sql,parameters).Tables[0]; DataTable table = new DataTable("Table1"); table.Columns.Add(Name",typeof(String)); table.Columns.Add(Value(Double)); foreach (DataRow item in dtData.Rows) { var array = new object[] { item[value_num"],item[count] }; table.Rows.Add(array); } return table; } 数据可以自定义,返回类型为DataTable即可。 1.3、根据数据创建饼状图 /// <summary> /// 根据数据创建一个饼状图 </summary> <returns></returns> private void BuilderDevChart() { 清空ChartControl控件 chartControl1.Series.Clear(); Series _pieSeries = new Series(学生成绩饼状图,ViewType.Pie); _pieSeries.ArgumentDataMember = "; 绑定图表的横坐标 _pieSeries.ValueDataMembers[0] = 绑定图表的纵坐标坐标 _pieSeries.DataSource = CreateChartData(CourseID); chartControl1.Series.Add(_pieSeries); chartControl1.AddTitle(); _pieSeries.LegendPointOptions.PointView = PointView.ArgumentAndValues; ChartUtils.SetPieNumber(_pieSeries); } 1.4、设置饼状Series显示方式(值/百分比) 饼状Series设置成百分比显示 <param name="series">Series</param> public static void SetPiePercentage( Series series) { if (series.View is PieSeriesView) { ((PiePointOptions)series.PointOptions).PercentOptions.ValueAsPercent = true; ((PiePointOptions)series.PointOptions).ValueNumericOptions.Format = NumericFormat.Percent; ((PiePointOptions)series.PointOptions).ValueNumericOptions.Precision = ; } } 饼状Series设置显示格式,是以数字还是百分号显示 SetPieNumber(Series series) { PieSeriesView) { 设置为值 ((PiePointOptions)series.PointOptions).PercentOptions.ValueAsPercent = NumericFormat.Number; ((PiePointOptions)series.PointOptions).ValueNumericOptions.Precision = ; } } 实现结果:2.柱状图2.1、添加ChartControl控件 在工具箱中找到ChartControl控件,拖到窗口中,创建Bar: (编辑:ASP站长网) |