WinForm使用DecExpress控件中的ChartControl插件繪制圖表

更新時間：2022年05月27日 11:18:03 作者：Tristans

這篇文章介紹了WinForm使用DecExpress控件中的ChartControl插件繪制圖表的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

1.繪制圖表基本步驟

準(zhǔn)備數(shù)據(jù)并綁定

這里從數(shù)據(jù)庫中取得數(shù)據(jù)，可以根據(jù)自己的需要修改。

DataTable dtData = BF<bll_ep_collection_data>.Instance.GetDataTable(sqlwhere, "data_time", parameters);
//建立新的datatable，用來存儲XY坐標(biāo)
DataTable dtXY = new DataTable();
//橫坐標(biāo)的值
dtXY.Columns.Add(new DataColumn("類型"));
var list = new List<object>();
//縱坐標(biāo)的值
list.Add("數(shù)值");
//這里是控制x軸顯示數(shù)據(jù)的數(shù)量，ArgumentScaleType類型設(shè)置為ScaleType.Qualitative時他不會自動控制x軸的數(shù)量
//如果得到數(shù)據(jù)小于X_COUNT，則x軸顯示全部得到的數(shù)據(jù)
if (X_COUNT < dtData.Rows.Count)
{
    for (int i = 0; i < X_COUNT; i++)
    {
        int index = (dtData.Rows.Count / X_COUNT) * i;
        DataRow item = dtData.Rows[index];
        dtXY.Columns.Add(new DataColumn(item["data_time"].ToString(), typeof(decimal)));
        list.Add(item["value"]);
    }
}
//如果得到數(shù)據(jù)大于X_COUNT，則x軸X_COUNT條數(shù)據(jù)
else
{
    for (int i = 0; i < dtData.Rows.Count; i++)
    {
        DataRow item = dtData.Rows[i];
        dtXY.Columns.Add(new DataColumn(item["data_time"].ToString(), typeof(decimal)));
        list.Add(item["value"]);
    }
}
var array = list.ToArray();
dtXY.Rows.Add(array);
this.chartControl1.DataSource = dtXY;

一個更直白的例子：

DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("類型"));
dt.Columns.Add(new DataColumn("2005-1月", typeof(decimal)));
dt.Columns.Add(new DataColumn("2005-2月", typeof(decimal)));
dt.Columns.Add(new DataColumn("2005-3月", typeof(decimal)));
dt.Columns.Add(new DataColumn("2005-4月", typeof(decimal)));
dt.Columns.Add(new DataColumn("2005-5月", typeof(decimal)));
dt.Columns.Add(new DataColumn("2005-6月", typeof(decimal)));

dt.Rows.Add(new object[] { "員工人數(shù)", 437, 437, 414, 397, 387, 378 });
dt.Rows.Add(new object[] { "人均月薪", 3964, 3961, 3979, 3974, 3967, 3972 });
dt.Rows.Add(new object[] { "成本TEU", 3104, 1339, 3595.8, 3154.5, 2499.8, 3026 });
dt.Rows.Add(new object[] { "人均生產(chǎn)率", 7.1, 3.06, 8.69, 7.95, 6.46, 8.01 });
dt.Rows.Add(new object[] { "占2005年3月人數(shù)比例", 1.06, 1.06, 1, 0.96, 0.93, 0.91 });

根據(jù)數(shù)據(jù)創(chuàng)建圖形展現(xiàn)

CreateSeries用于創(chuàng)建一個典型的圖形，這里展示創(chuàng)建一條曲線。

/// <summary>
/// 根據(jù)數(shù)據(jù)創(chuàng)建一個圖形展現(xiàn)
/// </summary>
/// <param name="caption">圖形標(biāo)題</param>
/// <param name="viewType">圖形類型</param>
/// <param name="dt">數(shù)據(jù)DataTable</param>
/// <param name="rowIndex">圖形數(shù)據(jù)的行序號</param>
/// <returns></returns>
private Series CreateSeries(string caption, ViewType viewType, DataTable dt, int rowIndex)
{
    Series series = new Series(caption, viewType);
    for (int i = 1; i < dt.Columns.Count; i++)
    {
        string argument = dt.Columns[i].ColumnName;//參數(shù)名稱
        decimal value = (decimal)dt.Rows[rowIndex][i];//參數(shù)值
        series.Points.Add(new SeriesPoint(argument, value));
    }
    //必須設(shè)置ArgumentScaleType的類型，否則顯示會轉(zhuǎn)換為日期格式，導(dǎo)致不是希望的格式顯示
    //也就是說，顯示字符串的參數(shù)，必須設(shè)置類型為ScaleType.Qualitative
    series.ArgumentScaleType = ScaleType.Qualitative;
    //series.ArgumentScaleType = ScaleType.DateTime;
    series.LabelsVisibility = DevExpress.Utils.DefaultBoolean.False;//顯示標(biāo)注標(biāo)簽
    return series;
}

根據(jù)圖形對象創(chuàng)建一個圖表并綁定到CharControl中

/// <summary>
/// 根據(jù)圖形對象創(chuàng)建一個圖表
/// </summary>
/// <param name="chartControl">圖表綁定控件</param>
/// <param name="list">圖表中的圖形展現(xiàn)</param>
/// <returns></returns>
private void CreateChart(ChartControl chartControl, List<Series> list)
{
    chartControl.Series.AddRange(list.ToArray());
    chartControl.Legend.Visible = false;
    chartControl.SeriesTemplate.LabelsVisibility = DefaultBoolean.False;
    //XYDiagram diagram = (XYDiagram)chartControl1.Diagram;
    //diagram.AxisX.DateTimeMeasureUnit = DateTimeMeasurementUnit.Second;
    //diagram.AxisX.DateTimeOptions.Format = DateTimeFormat.Custom;
    //diagram.AxisX.DateTimeOptions.FormatString = "yyyy-MM-dd HH:mm:ss";
}

調(diào)用函數(shù)繪制圖表

//清空ChartControl控件
chartControl1.Series.Clear();
//創(chuàng)建圖形對象的列表
List<Series> list = new List<Series>();
foreach (DataRowView item in listBox.Items)
{
    string str = item["key"].ToString();
    //通過LoadData返回一個DataTable
    DataTable dtXY = LoadData(str);
    //創(chuàng)建一個圖形對象
    Series series = CreateSeries(caption, type, dtXY, 0);;
    list.Add(series);
}
//根據(jù)圖形對象列表創(chuàng)建一個圖表
CreateChart(chartControl1, list);

小結(jié)：在繪制折線圖的時候我遇到的一個很大的問題就是沒辦法控制數(shù)據(jù)的顯示數(shù)量，因為數(shù)據(jù)庫中存儲的數(shù)據(jù)量過大，在一定時間段內(nèi)的數(shù)據(jù)都能達(dá)到上千條，所以不可能一次性全部顯示。我想到的解決辦法是固定顯示多少條數(shù)據(jù)，比如說20條，然后根據(jù)數(shù)據(jù)量每隔一段距離取一條數(shù)據(jù)顯示?！　?/p>

2.柱狀圖

繪制柱狀圖其實和繪制折線圖沒有什么區(qū)別，就是將new Series時的圖形類型改為ViewType.Bar即可，這里我想總結(jié)一下一個困擾我很久的問題，如何繪制上圖所示的一個橫坐標(biāo)對應(yīng)兩個或者多個柱子。

準(zhǔn)備數(shù)據(jù)

DataTable dtData = SqlHelper.GetDataSet(sql, parameters).Tables[0];
//建立新的datatable，用來存儲XY坐標(biāo)
DataTable dtXY_max = new DataTable();
DataTable dtXY_min = new DataTable();
dtXY_max.Columns.Add(new DataColumn("類型"));
dtXY_min.Columns.Add(new DataColumn("類型"));
var list_max = new List<object>();
list_max.Add("數(shù)值");
var list_min = new List<object>();
list_min.Add("數(shù)值");
for (int i = 0; i < dtData.Rows.Count; i++)
{
    DataRow item = dtData.Rows[i];
    string value = item["max"].ToString() + "|" + item["min"].ToString();
    //dtXY.Columns.Add(new DataColumn(item["data_time"].ToString(), typeof(string)));
    //list.Add(value);
    dtXY_max.Columns.Add(new DataColumn(item["data_time"].ToString(), typeof(decimal)));
    list_max.Add(item["max"]);
    dtXY_min.Columns.Add(new DataColumn(item["data_time"].ToString(), typeof(decimal)));
    list_min.Add(item["min"]);
}
var array_max = list_max.ToArray();
dtXY_max.Rows.Add(array_max);
var array_min = list_min.ToArray();
dtXY_min.Rows.Add(array_min);

創(chuàng)建圖形展現(xiàn)對象方法

/// <summary>
/// 根據(jù)數(shù)據(jù)創(chuàng)建一個圖形展現(xiàn)
/// </summary>
/// <param name="caption">圖形標(biāo)題</param>
/// <param name="viewType">圖形類型</param>
/// <param name="dt">數(shù)據(jù)DataTable</param>
/// <param name="rowIndex">圖形數(shù)據(jù)的行序號</param>
/// <returns></returns>
private Series CreateSeries(string caption, ViewType viewType, DataTable dt, int rowIndex)
{
    Series series = new Series(caption, viewType);
    for (int i = 1; i < dt.Columns.Count; i++)
    {
        string argument = dt.Columns[i].ColumnName;//參數(shù)名稱
        decimal value = (decimal) dt.Rows[rowIndex][i];
        series.Points.Add(new SeriesPoint(argument, value));
    }
    //柱狀圖柱子的寬度設(shè)置
    //BarSeriesView bsv = (BarSeriesView)series.View;
    //bsv.BarWidth = 0.1;
    //必須設(shè)置ArgumentScaleType的類型，否則顯示會轉(zhuǎn)換為日期格式，導(dǎo)致不是希望的格式顯示
    //也就是說，顯示字符串的參數(shù)，必須設(shè)置類型為ScaleType.Qualitative
    series.ArgumentScaleType = ScaleType.Qualitative;
    //series.ArgumentScaleType = ScaleType.DateTime;
    series.LabelsVisibility = DevExpress.Utils.DefaultBoolean.True;//顯示標(biāo)注標(biāo)簽
    return series;
}

根據(jù)圖形對象創(chuàng)建圖表

/// <summary>
/// 根據(jù)圖形對象創(chuàng)建一個圖表
/// </summary>
/// <param name="chartControl">圖標(biāo)綁定控件</param>
/// <param name="list">圖表中的圖形展現(xiàn)</param>
/// <returns></returns>
private void CreateChart(ChartControl chartControl, List<Series> series)
{
    chartControl.Series.AddRange(series.ToArray());
    //chartControl.Series.Add(series);
    chartControl.Legend.Visible = true;
    chartControl.SeriesTemplate.LabelsVisibility = DefaultBoolean.True;
    XYDiagram xydiagram = (XYDiagram)chartControl.Diagram;
    xydiagram.AxisX.MinorCount = 10;
}

3.餅狀圖

準(zhǔn)備數(shù)據(jù)

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;
}

創(chuàng)建一個餅狀圖

/// <summary>
/// 根據(jù)數(shù)據(jù)創(chuàng)建一個餅狀圖
/// </summary>
/// <returns></returns>
private void BuilderDevChart()
{
    Series _pieSeries = new Series("測試", ViewType.Pie);
    _pieSeries.ValueDataMembers[0] = "Value";
    _pieSeries.ArgumentDataMember = "Name";
    _pieSeries.DataSource = CreateChartData();
    chartControl1.Series.Add(_pieSeries);
    _pieSeries.SetPiePercentage();
    _pieSeries.LegendPointOptions.PointView = PointView.ArgumentAndValues;
}

設(shè)置餅狀圖顯示方式（數(shù)值/百分比）

public static class ExtensionClass
{
    /// <summary>
    /// 設(shè)置餅狀Series顯示方式（值/百分比）
    /// </summary>
    /// <param name="series">Series</param>
    public static void SetPiePercentage(this Series series)
    {
        if (series.View is PieSeriesView)
        {
            //設(shè)置為值
            //((PiePointOptions)series.PointOptions).PercentOptions.ValueAsPercent = false;
            //((PiePointOptions)series.PointOptions).ValueNumericOptions.Format = NumericFormat.Number;
            //((PiePointOptions)series.PointOptions).ValueNumericOptions.Precision = 0;
            //設(shè)置為百分比
            ((PiePointOptions)series.PointOptions).PercentOptions.ValueAsPercent = true;
            ((PiePointOptions)series.PointOptions).ValueNumericOptions.Format = NumericFormat.Percent;
            ((PiePointOptions)series.PointOptions).ValueNumericOptions.Precision = 0;
        }
    }
}

到此這篇關(guān)于WinForm使用DecExpress控件中的ChartControl插件繪制圖表的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: