WinForm DevExpress使用之ChartControl控件繪製圖表一——基礎

最近由於公司項目須要用到WinForm的DecExpress控件，在這裏把一些使用方法總結一下。

 DevExpress中有一個專門用來繪製圖表的插件ChartControl，能夠繪製折線圖、餅狀圖、柱狀圖等圖表。

1.繪製圖表基本步驟

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. 　　準備數據並綁定

   　　這裏從數據庫中取得數據，能夠根據本身的須要修改。

    1 DataTable dtData = BF<bll_ep_collection_data>.Instance.GetDataTable(sqlwhere, "data_time", parameters);
    2 //創建新的datatable，用來存儲XY座標
    3 DataTable dtXY = new DataTable();
    4 //橫座標的值
    5 dtXY.Columns.Add(new DataColumn("類型"));
    6 var list = new List<object>();
    7 //縱座標的值
    8 list.Add("數值");
    9 //這裏是控制x軸顯示數據的數量，ArgumentScaleType類型設置爲ScaleType.Qualitative時他不會自動控制x軸的數量
   10 //若是獲得數據小於X_COUNT，則x軸顯示所有獲得的數據
   11 if (X_COUNT < dtData.Rows.Count)
   12 {
   13     for (int i = 0; i < X_COUNT; i++)
   14     {
   15         int index = (dtData.Rows.Count / X_COUNT) * i;
   16         DataRow item = dtData.Rows[index];
   17         dtXY.Columns.Add(new DataColumn(item["data_time"].ToString(), typeof(decimal)));
   18         list.Add(item["value"]);
   19     }
   20 }
   21 //若是獲得數據大於X_COUNT，則x軸X_COUNT條數據
   22 else
   23 {
   24     for (int i = 0; i < dtData.Rows.Count; i++)
   25     {
   26         DataRow item = dtData.Rows[i];
   27         dtXY.Columns.Add(new DataColumn(item["data_time"].ToString(), typeof(decimal)));
   28         list.Add(item["value"]);
   29     }
   30 }
   31 var array = list.ToArray();
   32 dtXY.Rows.Add(array);
   33 this.chartControl1.DataSource = dtXY;                

   　　一個更直白的例子：

    1 DataTable dt = new DataTable();
    2 dt.Columns.Add(new DataColumn("類型"));
    3 dt.Columns.Add(new DataColumn("2005-1月", typeof(decimal)));
    4 dt.Columns.Add(new DataColumn("2005-2月", typeof(decimal)));
    5 dt.Columns.Add(new DataColumn("2005-3月", typeof(decimal)));
    6 dt.Columns.Add(new DataColumn("2005-4月", typeof(decimal)));
    7 dt.Columns.Add(new DataColumn("2005-5月", typeof(decimal)));
    8 dt.Columns.Add(new DataColumn("2005-6月", typeof(decimal)));
    9 
   10 dt.Rows.Add(new object[] { "員工人數", 437, 437, 414, 397, 387, 378 });
   11 dt.Rows.Add(new object[] { "人均月薪", 3964, 3961, 3979, 3974, 3967, 3972 });
   12 dt.Rows.Add(new object[] { "成本TEU", 3104, 1339, 3595.8, 3154.5, 2499.8, 3026 });
   13 dt.Rows.Add(new object[] { "人均生產率", 7.1, 3.06, 8.69, 7.95, 6.46, 8.01 });
   14 dt.Rows.Add(new object[] { "佔2005年3月人數比例", 1.06, 1.06, 1, 0.96, 0.93, 0.91 });

2.  　　根據數據建立圖形展示

   　  CreateSeries用於建立一個典型的圖形，這裏展現建立一條曲線。

    1 /// <summary>
    2 /// 根據數據建立一個圖形展示
    3 /// </summary>
    4 /// <param name="caption">圖形標題</param>
    5 /// <param name="viewType">圖形類型</param>
    6 /// <param name="dt">數據DataTable</param>
    7 /// <param name="rowIndex">圖形數據的行序號</param>
    8 /// <returns></returns>
    9 private Series CreateSeries(string caption, ViewType viewType, DataTable dt, int rowIndex)
   10 {
   11     Series series = new Series(caption, viewType);
   12     for (int i = 1; i < dt.Columns.Count; i++)
   13     {
   14         string argument = dt.Columns[i].ColumnName;//參數名稱
   15         decimal value = (decimal)dt.Rows[rowIndex][i];//參數值
   16         series.Points.Add(new SeriesPoint(argument, value));
   17     }
   18     //必須設置ArgumentScaleType的類型，不然顯示會轉換爲日期格式，致使不是但願的格式顯示
   19     //也就是說，顯示字符串的參數，必須設置類型爲ScaleType.Qualitative
   20     series.ArgumentScaleType = ScaleType.Qualitative;
   21     //series.ArgumentScaleType = ScaleType.DateTime;
   22     series.LabelsVisibility = DevExpress.Utils.DefaultBoolean.False;//顯示標註標籤
   23     return series;
   24 }

3. 　　根據圖形對象建立一個圖表並綁定到CharControl中

    1 /// <summary>
    2 /// 根據圖形對象建立一個圖表
    3 /// </summary>
    4 /// <param name="chartControl">圖表綁定控件</param>
    5 /// <param name="list">圖表中的圖形展示</param>
    6 /// <returns></returns>
    7 private void CreateChart(ChartControl chartControl, List<Series> list)
    8 {
    9     chartControl.Series.AddRange(list.ToArray());
   10     chartControl.Legend.Visible = false;
   11     chartControl.SeriesTemplate.LabelsVisibility = DefaultBoolean.False;
   12     //XYDiagram diagram = (XYDiagram)chartControl1.Diagram;
   13     //diagram.AxisX.DateTimeMeasureUnit = DateTimeMeasurementUnit.Second;
   14     //diagram.AxisX.DateTimeOptions.Format = DateTimeFormat.Custom;
   15     //diagram.AxisX.DateTimeOptions.FormatString = "yyyy-MM-dd HH:mm:ss";
   16 }

4. 　　調用函數繪製圖表

    1 //清空ChartControl控件
    2 chartControl1.Series.Clear();
    3 //建立圖形對象的列表
    4 List<Series> list = new List<Series>();
    5 foreach (DataRowView item in listBox.Items)
    6 {
    7     string str = item["key"].ToString();
    8     //經過LoadData返回一個DataTable
    9     DataTable dtXY = LoadData(str);
   10     //建立一個圖形對象
   11     Series series = CreateSeries(caption, type, dtXY, 0);;
   12     list.Add(series);
   13 }
   14 //根據圖形對象列表建立一個圖表
   15 CreateChart(chartControl1, list);

 　　小結：在繪製折線圖的時候我遇到的一個很大的問題就是沒辦法控制數據的顯示數量，由於數據庫中存儲的數據量過大，在必定時間段內的數據都能達到上千條，因此不可能一次性所有顯示。我想到的解決辦法是固定顯示多少條數據，好比說20條，而後根據數據量每隔一段距離取一條數據顯示。　　

2.柱狀圖

繪製柱狀圖其實和繪製折線圖沒有什麼區別，就是將new Series時的圖形類型改成ViewType.Bar便可，這裏我想總結一下一個困擾我好久的問題，如何繪製上圖所示的一個橫座標對應兩個或者多個柱子。

1. 　　準備數據

    1 DataTable dtData = SqlHelper.GetDataSet(sql, parameters).Tables[0];
    2 //創建新的datatable，用來存儲XY座標
    3 DataTable dtXY_max = new DataTable();
    4 DataTable dtXY_min = new DataTable();
    5 dtXY_max.Columns.Add(new DataColumn("類型"));
    6 dtXY_min.Columns.Add(new DataColumn("類型"));
    7 var list_max = new List<object>();
    8 list_max.Add("數值");
    9 var list_min = new List<object>();
   10 list_min.Add("數值");
   11 for (int i = 0; i < dtData.Rows.Count; i++)
   12 {
   13     DataRow item = dtData.Rows[i];
   14     string value = item["max"].ToString() + "|" + item["min"].ToString();
   15     //dtXY.Columns.Add(new DataColumn(item["data_time"].ToString(), typeof(string)));
   16     //list.Add(value);
   17     dtXY_max.Columns.Add(new DataColumn(item["data_time"].ToString(), typeof(decimal)));
   18     list_max.Add(item["max"]);
   19     dtXY_min.Columns.Add(new DataColumn(item["data_time"].ToString(), typeof(decimal)));
   20     list_min.Add(item["min"]);
   21 }
   22 var array_max = list_max.ToArray();
   23 dtXY_max.Rows.Add(array_max);
   24 var array_min = list_min.ToArray();
   25 dtXY_min.Rows.Add(array_min);

2. 　　建立圖形展示對象方法

    1 /// <summary>
    2 /// 根據數據建立一個圖形展示
    3 /// </summary>
    4 /// <param name="caption">圖形標題</param>
    5 /// <param name="viewType">圖形類型</param>
    6 /// <param name="dt">數據DataTable</param>
    7 /// <param name="rowIndex">圖形數據的行序號</param>
    8 /// <returns></returns>
    9 private Series CreateSeries(string caption, ViewType viewType, DataTable dt, int rowIndex)
   10 {
   11     Series series = new Series(caption, viewType);
   12     for (int i = 1; i < dt.Columns.Count; i++)
   13     {
   14         string argument = dt.Columns[i].ColumnName;//參數名稱
   15         decimal value = (decimal) dt.Rows[rowIndex][i];           
   16         series.Points.Add(new SeriesPoint(argument, value));
   17     }
   18     //柱狀圖柱子的寬度設置
   19     //BarSeriesView bsv = (BarSeriesView)series.View;
   20     //bsv.BarWidth = 0.1;
   21     //必須設置ArgumentScaleType的類型，不然顯示會轉換爲日期格式，致使不是但願的格式顯示
   22     //也就是說，顯示字符串的參數，必須設置類型爲ScaleType.Qualitative
   23     series.ArgumentScaleType = ScaleType.Qualitative;
   24     //series.ArgumentScaleType = ScaleType.DateTime;
   25     series.LabelsVisibility = DevExpress.Utils.DefaultBoolean.True;//顯示標註標籤
   26     return series;
   27 }

3. 　　根據圖形對象建立圖表

    1 /// <summary>
    2 /// 根據圖形對象建立一個圖表
    3 /// </summary>
    4 /// <param name="chartControl">圖標綁定控件</param>
    5 /// <param name="list">圖表中的圖形展示</param>
    6 /// <returns></returns>
    7 private void CreateChart(ChartControl chartControl, List<Series> series)
    8 {
    9     chartControl.Series.AddRange(series.ToArray());
   10     //chartControl.Series.Add(series);
   11     chartControl.Legend.Visible = true;
   12     chartControl.SeriesTemplate.LabelsVisibility = DefaultBoolean.True;
   13     XYDiagram xydiagram = (XYDiagram)chartControl.Diagram;
   14     xydiagram.AxisX.MinorCount = 10;
   15 }

3.餅狀圖

1. 　　準備數據

    1 private DataTable CreateChartData()
    2 {
    3     DataTable dtData = SqlHelper.GetDataSet(sql, parameters).Tables[0];
    4     DataTable table = new DataTable("Table1");
    5     table.Columns.Add("Name", typeof(String));
    6     table.Columns.Add("Value", typeof(Double));
    7     foreach (DataRow item in dtData.Rows)
    8     {
    9         var array = new object[] { item["value_num"], item["count"] };
   10         table.Rows.Add(array);
   11     }
   12     return table;
   13 }

    

2. 　　建立一個餅狀圖

    1 /// <summary>
    2 /// 根據數據建立一個餅狀圖
    3 /// </summary>
    4 /// <returns></returns>
    5 private void BuilderDevChart()
    6 {
    7     Series _pieSeries = new Series("測試", ViewType.Pie);
    8     _pieSeries.ValueDataMembers[0] = "Value";
    9     _pieSeries.ArgumentDataMember = "Name";
   10     _pieSeries.DataSource = CreateChartData();
   11     chartControl1.Series.Add(_pieSeries);
   12     _pieSeries.SetPiePercentage();
   13     _pieSeries.LegendPointOptions.PointView = PointView.ArgumentAndValues;
   14 }

    

3. 　　設置餅狀圖顯示方式（數值/百分比）

    1 public static class ExtensionClass
    2 {
    3     /// <summary>
    4     /// 設置餅狀Series顯示方式（值/百分比）
    5     /// </summary>
    6     /// <param name="series">Series</param>
    7     public static void SetPiePercentage(this Series series)
    8     {
    9         if (series.View is PieSeriesView)
   10         {
   11             //設置爲值
   12             //((PiePointOptions)series.PointOptions).PercentOptions.ValueAsPercent = false;
   13             //((PiePointOptions)series.PointOptions).ValueNumericOptions.Format = NumericFormat.Number;
   14             //((PiePointOptions)series.PointOptions).ValueNumericOptions.Precision = 0;
   15             //設置爲百分比
   16             ((PiePointOptions)series.PointOptions).PercentOptions.ValueAsPercent = true;
   17             ((PiePointOptions)series.PointOptions).ValueNumericOptions.Format = NumericFormat.Percent;
   18             ((PiePointOptions)series.PointOptions).ValueNumericOptions.Precision = 0;
   19         }
   20     }
   21 } 

 原文： https://mrlrf.github.io/2016/12/07/DevExpress-ChartControl/