DevExpress ChartControl控件实现图表

1.饼状图图

1.1添加ChartControl控件

在工具箱中找到ChartControl控件,拖到窗口中,创建Pie;
DevExpress ChartControl控件实现图表_第1张图片

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", typeof(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根据数据创建饼状图

/// 
        /// 根据数据创建一个饼状图
        /// 
        /// 
        private void BuilderDevChart()
        {
            //清空ChartControl控件
            chartControl1.Series.Clear();
            Series _pieSeries = new Series("学生成绩饼状图", ViewType.Pie);
            _pieSeries.ArgumentDataMember = "Name";  //绑定图表的横坐标  
            _pieSeries.ValueDataMembers[0] = "Value";  //绑定图表的纵坐标坐标
            _pieSeries.DataSource = CreateChartData(CourseID);
            chartControl1.Series.Add(_pieSeries);
            chartControl1.AddTitle("学生成绩饼状图");
            _pieSeries.LegendPointOptions.PointView = PointView.ArgumentAndValues;
            ChartUtils.SetPieNumber(_pieSeries);
        }

1.4设置饼状Series显示方式(值/百分比)

/// 
        /// 饼状Series设置成百分比显示
        /// 
        /// Series
        public static void SetPiePercentage(this 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 = 0;
            }
        }

        /// 
        /// 饼状Series设置显示格式,是以数字还是百分号显示
        /// 
        /// Series
        public static void SetPieNumber(Series series)
        {
            if (series.View is PieSeriesView)
            {
                //设置为值
                ((PiePointOptions)series.PointOptions).PercentOptions.ValueAsPercent = false;
                ((PiePointOptions)series.PointOptions).ValueNumericOptions.Format = NumericFormat.Number;
                ((PiePointOptions)series.PointOptions).ValueNumericOptions.Precision = 0;
            }
        }

实现结果:
DevExpress ChartControl控件实现图表_第2张图片

2.柱状图

2.1添加ChartControl控件

在工具箱中找到ChartControl控件,拖到窗口中,创建Bar:
DevExpress ChartControl控件实现图表_第3张图片

2.2准备数据

/// 
        /// 创建数据
        /// 
        /// 
        private DataTable CreateBarData()
        {
            string sql = string.Format(@"
                            SELECT c.CollegeName,COUNT(*)
                                    FROM studentmanager.student 
                                    LEFT JOIN college AS c ON c.CollegeID=student.CollegeID
                                    GROUP BY c.CollegeID");
            DataSet ds = _db.GetResult(sql);
            if (ds != null)
            {
                DataTable dtData = ds.Tables[0];
                DataTable table = new DataTable("Table1");
                table.Columns.Add("Name", typeof(string));
                table.Columns.Add("Value", typeof(int));
                foreach (DataRow item in dtData.Rows)
                {
                    var array = new object[] { item["CollegeName"], item["COUNT(*)"] };
                    table.Rows.Add(array);
                }
                return table;
            }
            else
            {
                return null;
            }
        }

数据可以自定义,返回类型为DataTable即可。

2.3根据数据创建柱状图

private void BuilderDevBarChart()
        {
            chartControl2.Series.Clear();
            Series _barSeries = new Series("", ViewType.Bar);
            _barSeries.ArgumentDataMember = "Name";//x轴
            _barSeries.ValueDataMembers[0] = "Value";//Y轴
            _barSeries.DataSource = CreateBarData();
            _barSeries.SetColorEach(true);
            chartControl2.Series.Add(_barSeries);
            _barSeries.LegendPointOptions.PointView = PointView.ArgumentAndValues;
            chartControl2.SetXLableAngle(-35);
            chartControl2.SetCrosshair(true);
            chartControl2.Legend.Direction = LegendDirection.LeftToRight;
            chartControl2.Legend.AlignmentHorizontal = LegendAlignmentHorizontal.Center;
            chartControl2.Legend.AlignmentVertical = LegendAlignmentVertical.BottomOutside;
            chartControl2.AddTitle("学院学生数量柱状图");
        }

2.4用到的方法

public static class ChartUtils
    {
        /// 
        /// 增加数据筛选
        /// 
        /// Series
        /// 列名称
        /// 列名称对应的筛选数值
        /// DataFilterCondition枚举
        public static void AddDataFilter(this SeriesBase series, string columnName, object value, DataFilterCondition dataFilterCondition)
        {
            series.DataFilters.Add(new DataFilter(columnName, value.GetType().FullName, dataFilterCondition, value));
        }

        /// 
        /// 设置X轴Lable角度
        /// 
        /// ChartControl
        /// 角度
        public static void SetXLableAngle(this ChartControl chart, int angle)
        {
            XYDiagram _xyDiagram = (XYDiagram)chart.Diagram;
            if (_xyDiagram != null)
                _xyDiagram.AxisX.Label.Angle = angle;
        }
        /// 
        ///  设置Y轴Lable角度
        /// 
        /// ChartControl
        /// 角度
        public static void SetYLableAngle(this ChartControl chart, int angle)
        {
            XYDiagram _xyDiagram = (XYDiagram)chart.Diagram;
            _xyDiagram.AxisY.Label.Angle = angle;
        }

        /// 
        /// 设置ColorEach
        /// 
        /// ChartControl
        /// 是否设置成ColorEach
        public static void SetColorEach(this Series series, bool colorEach)
        {
            SeriesViewColorEachSupportBase colorEachView = (SeriesViewColorEachSupportBase)series.View;
            if (colorEachView != null)
            {
                colorEachView.ColorEach = colorEach;
            }
        }

        /// 
        /// 设置是否显示十字标线
        /// 
        /// ChartControl
        /// 是否显示十字标线
        public static void SetCrosshair(this ChartControl chart, bool crosshair)
        {
            chart.CrosshairEnabled = crosshair ? DefaultBoolean.True : DefaultBoolean.False;
            chart.CrosshairOptions.ShowArgumentLabels = crosshair;
            chart.CrosshairOptions.ShowArgumentLine = crosshair;
            chart.CrosshairOptions.ShowValueLabels = crosshair;
            chart.CrosshairOptions.ShowValueLine = crosshair;
        }

        /// 
        /// 新增ChartControl的Title文字
        /// 
        /// ChartControl
        /// Title文字
        public static void AddTitle(this ChartControl chart, string title)
        {
            chart.Titles.Clear();  //先清除以前的标题
            ChartTitle _title = new ChartTitle();
            _title.Text = title;
            chart.Titles.Add(_title);
        }

        /// 
        /// 饼状Series设置成百分比显示
        /// 
        /// Series
        public static void SetPiePercentage(this 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 = 0;
            }
        }

        /// 
        /// 饼状Series设置显示格式,是以数字还是百分号显示
        /// 
        /// Series
        public static void SetPieNumber(Series series)
        {
            if (series.View is PieSeriesView)
            {
                //设置为值
                ((PiePointOptions)series.PointOptions).PercentOptions.ValueAsPercent = false;
                ((PiePointOptions)series.PointOptions).ValueNumericOptions.Format = NumericFormat.Number;
                ((PiePointOptions)series.PointOptions).ValueNumericOptions.Precision = 0;
            }
        }

        /// 
        /// ChartControl设置标题
        /// 
        /// 
        /// 
        public static void SetHZTitle(ref ChartControl chartControl, string HTitle)
        {
            chartControl.Titles.Clear();                    //先清除以前的标题

            //横标题设置
            ChartTitle titles = new ChartTitle();            //声明标题

            titles.Text = HTitle;                            //名称
            titles.TextColor = System.Drawing.Color.Black;   //颜色
            titles.Indent = 5;                                //设置距离  值越小柱状图就越大
            titles.Font = new Font("Tahoma", 14, FontStyle.Bold);            //设置字体
            titles.Dock = ChartTitleDockStyle.Top;           //设置对齐方式
            titles.Alignment = StringAlignment.Center;       //居中对齐
            chartControl.Titles.Add(titles);                 //添加标题                    
        }
    }

实现结果:
DevExpress ChartControl控件实现图表_第4张图片

你可能感兴趣的:(DevExpress,控件)