DevExpress20：XtraCharts控件实现图表

发布时间：2021-01-07 01:10 所属栏目：52 来源：网络整理

导读：一、总体概述官方文档： https://docs.devexpress.com/WindowsForms/8117/controls-and-libraries/chart-control ChartControl控件主要包括Chart Title、Legend、Annotations、Diagram、Series五部分；如图：二、chartControl层\XYDiagram层 chartControl

一、总体概述

官方文档：

https://docs.devexpress.com/WindowsForms/8117/controls-and-libraries/chart-control

ChartControl控件主要包括Chart Title、Legend、Annotations、Diagram、Series五部分；如图：

DevExpress20：XtraCharts控件实现图表

二、chartControl层\XYDiagram层

chartControl像DEV的其它控件一样，这一层之相当于是一个壳子，我们平时在这里面设置的属性也不多。而且都是些常规属性，比如大小、停靠方式等等。

XYDiagram这一层就比较关键了，主要是涉及到XY轴的显示方式和滚动条显示等。并且坐标轴的显示方式和数据类型也有很大的关系，主要包括3种类型，数据类型是根据添加到Series中的数据类型决定的，主要属性是ArgumentScaleType。所以涉及到3种不同的设置方式。

当坐标轴的数据类型是数字时

DevExpress20：XtraCharts控件实现图表

　　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；

DevExpress20：XtraCharts控件实现图表

1.2、准备数据

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 = ; } } 实现结果：

DevExpress20：XtraCharts控件实现图表