1.餅狀圖圖
1.1添加ChartControl控件
在工具箱中找到ChartControl控件,拖到窗口中,創建Pie;
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:
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