DevExpress ChartControl控件实现图表【转】

1.饼状图图

1.1添加ChartControl控件

在工具箱中找到ChartControl控件,拖到窗口中,创建Pie;
Pie ChartControl控件

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

/// <summary>
/// 根据数据创建一个饼状图 /// </summary> /// <returns></returns> 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显示方式(值/百分比)

/// <summary> /// 饼状Series设置成百分比显示 /// </summary> /// <param name="series">Series</param> 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; } } /// <summary> /// 饼状Series设置显示格式,是以数字还是百分号显示 /// </summary> /// <param name="series">Series</param> 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; } }

实现结果:
饼状图实现结果

2.柱状图

2.1添加ChartControl控件

在工具箱中找到ChartControl控件,拖到窗口中,创建Bar:
Bar ChartControl控件

2.2准备数据

/// <summary>
        /// 创建数据 /// </summary> /// <returns></returns> 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
    {
        /// <summary> /// 增加数据筛选 /// </summary> /// <param name="SeriesBase">Series</param> /// <param name="columnName">列名称</param> /// <param name="value">列名称对应的筛选数值</param> /// <param name="dataFilterCondition">DataFilterCondition枚举</param> public static void AddDataFilter(this SeriesBase series, string columnName, object value, DataFilterCondition dataFilterCondition) { series.DataFilters.Add(new DataFilter(columnName, value.GetType().FullName, dataFilterCondition, value)); } /// <summary> /// 设置X轴Lable角度 /// </summary> /// <param name="chart">ChartControl</param> /// <param name="angle">角度</param> public static void SetXLableAngle(this ChartControl chart, int angle) { XYDiagram _xyDiagram = (XYDiagram)chart.Diagram; if (_xyDiagram != null) _xyDiagram.AxisX.Label.Angle = angle; } /// <summary> /// 设置Y轴Lable角度 /// </summary> /// <param name="chart">ChartControl</param> /// <param name="angle">角度</param> public static void SetYLableAngle(this ChartControl chart, int angle) { XYDiagram _xyDiagram = (XYDiagram)chart.Diagram; _xyDiagram.AxisY.Label.Angle = angle; } /// <summary> /// 设置ColorEach /// </summary> /// <param name="chart">ChartControl</param> /// <param name="colorEach">是否设置成ColorEach</param> public static void SetColorEach(this Series series, bool colorEach) { SeriesViewColorEachSupportBase colorEachView = (SeriesViewColorEachSupportBase)series.View; if (colorEachView != null) { colorEachView.ColorEach = colorEach; } } /// <summary> /// 设置是否显示十字标线 /// </summary> /// <param name="chart">ChartControl</param> /// <param name="crosshair">是否显示十字标线</param> 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; } /// <summary> /// 新增ChartControl的Title文字 /// </summary> /// <param name="chart">ChartControl</param> /// <param name="title">Title文字</param> public static void AddTitle(this ChartControl chart, string title) { chart.Titles.Clear(); //先清除以前的标题 ChartTitle _title = new ChartTitle(); _title.Text = title; chart.Titles.Add(_title); } /// <summary> /// 饼状Series设置成百分比显示 /// </summary> /// <param name="series">Series</param> 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; } } /// <summary> /// 饼状Series设置显示格式,是以数字还是百分号显示 /// </summary> /// <param name="series">Series</param> 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; } } /// <summary> /// ChartControl设置标题 /// </summary> /// <param name="chartControl"></param> /// <param name="HTitle"></param> 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); //添加标题 } }

实现结果:
柱状图

https://blog.csdn.net/Gary_888/article/details/70153872?locationNum=7&fps=1

猜你喜欢

转载自www.cnblogs.com/mazhenyu/p/9123172.html
今日推荐