C#使用DevExpress中的XtraCharts控件實(shí)現(xiàn)圖表

更新時(shí)間：2022年05月27日 11:14:59 作者：springsnow

這篇文章介紹了C#使用DevExpress中的XtraCharts控件實(shí)現(xiàn)圖表的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、總體概述

官方文檔：

https://docs.devexpress.com/WindowsForms/8117/controls-and-libraries/chart-control

ChartControl控件主要包括Chart Title、Legend、Annotations、Diagram、Series五部分；如圖：

二、chartControl層\XYDiagram層

chartControl像DEV的其它控件一樣，這一層之相當(dāng)于是一個(gè)殼子，我們平時(shí)在這里面設(shè)置的屬性也不多。而且都是些常規(guī)屬性，比如大小、?？糠绞降鹊取?/p>

XYDiagram這一層就比較關(guān)鍵了，主要是涉及到XY軸的顯示方式和滾動(dòng)條顯示等。并且坐標(biāo)軸的顯示方式和數(shù)據(jù)類型也有很大的關(guān)系，主要包括3種類型，數(shù)據(jù)類型是根據(jù)添加到Series中的數(shù)據(jù)類型決定的，主要屬性是ArgumentScaleType。所以涉及到3種不同的設(shè)置方式。

1.當(dāng)坐標(biāo)軸的數(shù)據(jù)類型是數(shù)字時(shí)

2. 當(dāng)前數(shù)據(jù)類型是字符串時(shí)

其它設(shè)置同上，主要是要想出現(xiàn)滾動(dòng)條，在設(shè)計(jì)面板中還不能實(shí)現(xiàn)，必須通過代碼設(shè)置

DevExpress.XtraCharts.XYDiagram xyDiagram1 = (XYDiagram)this.chartControl1.Diagram;          
xyDiagram1.AxisX.Range.MaxValueInternal = 3; //這個(gè)屬性在設(shè)計(jì)視圖里面是看不到的，只有代碼里面才可以設(shè)置。
xyDiagram1.AxisX.Range.MinValueInternal = -0.5D;

3.當(dāng)前數(shù)據(jù)類型是時(shí)間

AxisX ax = (XYDiagram)chartControl1.Diagram;
ax.GridSpacingAuto = false;
ax.DateTimeMeasureUnit = DateTimeMeasurementUnit.Minute;//這個(gè)可以根據(jù)你自己的情況設(shè)置
ax.DateTimeGridAlignment = DateTimeMeasurementUnit.Second; //這個(gè)是間隔單位
ax.GridSpacing = 10; // 每10秒為一個(gè)間隔。

三、實(shí)例

1.餅狀圖

1.1、添加ChartControl控件

在工具箱中找到ChartControl控件，拖到窗口中，創(chuàng)建Pie；

1.2、準(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;
 }

數(shù)據(jù)可以自定義，返回類型為DataTable即可。

1.3、根據(jù)數(shù)據(jù)創(chuàng)建餅狀圖

/// <summary>
/// 根據(jù)數(shù)據(jù)創(chuàng)建一個(gè)餅狀圖
/// </summary>
/// <returns></returns>
private void BuilderDevChart()
{
    //清空ChartControl控件
    chartControl1.Series.Clear();
    Series _pieSeries = new Series("學(xué)生成績餅狀圖", ViewType.Pie);
    _pieSeries.ArgumentDataMember = "Name";  //綁定圖表的橫坐標(biāo)  
    _pieSeries.ValueDataMembers[0] = "Value";  //綁定圖表的縱坐標(biāo)坐標(biāo)
    _pieSeries.DataSource = CreateChartData(CourseID);
    chartControl1.Series.Add(_pieSeries);
    chartControl1.AddTitle("學(xué)生成績餅狀圖");
    _pieSeries.LegendPointOptions.PointView = PointView.ArgumentAndValues;
    ChartUtils.SetPieNumber(_pieSeries);
}

1.4、設(shè)置餅狀Series顯示方式（值/百分比）

/// <summary>
/// 餅狀Series設(shè)置成百分比顯示
/// </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設(shè)置顯示格式，是以數(shù)字還是百分號顯示
/// </summary>
/// <param name="series">Series</param>
public static void SetPieNumber(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í)現(xiàn)結(jié)果：

2.柱狀圖

2.1、添加ChartControl控件

在工具箱中找到ChartControl控件，拖到窗口中，創(chuàng)建Bar：

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

/// <summary>
/// 創(chuàng)建數(shù)據(jù)
/// </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;
    }
}

數(shù)據(jù)可以自定義，返回類型為DataTable即可。

2.3、根據(jù)數(shù)據(jù)創(chuàng)建柱狀圖

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("學(xué)院學(xué)生數(shù)量柱狀圖");
}

2.4、用到的方法

public static class ChartUtils
{
    /// <summary>
    /// 增加數(shù)據(jù)篩選
    /// </summary>
    /// <param name="SeriesBase">Series</param>
    /// <param name="columnName">列名稱</param>
    /// <param name="value">列名稱對應(yīng)的篩選數(shù)值</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>
    /// 設(shè)置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>
    ///  設(shè)置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>
    /// 設(shè)置ColorEach
    /// </summary>
    /// <param name="chart">ChartControl</param>
    /// <param name="colorEach">是否設(shè)置成ColorEach</param>
    public static void SetColorEach(this Series series, bool colorEach)
    {
        SeriesViewColorEachSupportBase colorEachView = (SeriesViewColorEachSupportBase)series.View;
        if (colorEachView != null)
        {
            colorEachView.ColorEach = colorEach;
        }
    }

    /// <summary>
    /// 設(shè)置是否顯示十字標(biāo)線
    /// </summary>
    /// <param name="chart">ChartControl</param>
    /// <param name="crosshair">是否顯示十字標(biāo)線</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();  //先清除以前的標(biāo)題
        ChartTitle _title = new ChartTitle();
        _title.Text = title;
        chart.Titles.Add(_title);
    }

    /// <summary>
    /// 餅狀Series設(shè)置成百分比顯示
    /// </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設(shè)置顯示格式，是以數(shù)字還是百分號顯示
    /// </summary>
    /// <param name="series">Series</param>
    public static void SetPieNumber(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;
        }
    }

    /// <summary>
    /// ChartControl設(shè)置標(biāo)題
    /// </summary>
    /// <param name="chartControl"></param>
    /// <param name="HTitle"></param>
    public static void SetHZTitle(ref ChartControl chartControl, string HTitle)
    {
        chartControl.Titles.Clear();                    //先清除以前的標(biāo)題

        //橫標(biāo)題設(shè)置
        ChartTitle titles = new ChartTitle();            //聲明標(biāo)題

        titles.Text = HTitle;                            //名稱
        titles.TextColor = System.Drawing.Color.Black;   //顏色
        titles.Indent = 5;                                //設(shè)置距離  值越小柱狀圖就越大
        titles.Font = new Font("Tahoma", 14, FontStyle.Bold);            //設(shè)置字體
        titles.Dock = ChartTitleDockStyle.Top;           //設(shè)置對齊方式
        titles.Alignment = StringAlignment.Center;       //居中對齊
        chartControl.Titles.Add(titles);                 //添加標(biāo)題                    
    }
}

實(shí)現(xiàn)結(jié)果：

四、事件

1、CustomDrawAxisLabel ：接管此事件來獲得軸標(biāo)簽。定制軸標(biāo)簽

private void chartControl1_CustomDrawAxisLabel(object sender, CustomDrawAxisLabelEventArgs e)
{
    AxisBase axis = e.Item.Axis;
    if (axis is AxisY || axis is AxisY3D || axis is RadarAxisY)
    {
        double axisValue = (double)e.Item.AxisValue;
        if (axisValue < 0)
        {
            e.Item.TextColor = Color.Red;
        }
        else if (axisValue > 0)
        {
            e.Item.Text = "+" + e.Item.Text;
            e.Item.TextColor = Color.Green;
        }
        else if (axisValue == 0)
        {
            e.Item.Text = "Zero";
        }
    }
}

2、ObjectHotTracked：鼠標(biāo)指針懸停位置

private void chartControl1_ObjectHotTracked(object sender, HotTrackEventArgs e)
{
    if (e.AdditionalObject is AxisTitle)
    {
        MessageBox.Show(e.AdditionalObject.GetType().ToString());
    }
}

3、CustomDrawSeries ：自定義繪制系列

private void chartControl1_CustomDrawSeries(object sender, CustomDrawSeriesEventArgs e)
{
    // Find all Bar Series by their view type,and fill them with Aqua color.
    if (e.Series.View is BarSeriesView)
        e.SeriesDrawOptions.Color = Color.Aqua;

    // Find the series by its name,  and change its line style to dash-dot-dot. (Here it's assumed that the series view type is LineSeriesView).
    if (e.Series.Name == "Line Series")
        ((LineDrawOptions)e.SeriesDrawOptions).LineStyle.DashStyle = DevExpress.XtraCharts.DashStyle.DashDotDot;

    // Find all Point Series by the type of its DrawOptions, and change their marker kind to diamond.
    if (e.SeriesDrawOptions.GetType() == typeof(PointDrawOptions))
        ((PointDrawOptions)e.SeriesDrawOptions).Marker.Kind =
        MarkerKind.Diamond;
}

4、CustomDrawSeriesPoint：自定義繪制系列點(diǎn)

private void chartControl1_CustomDrawSeriesPoint(object sender, CustomDrawSeriesPointEventArgs e)
{
    // These changes will be applied to Bar Series only.
    BarDrawOptions drawOptions = e.SeriesDrawOptions as BarDrawOptions;
    if (drawOptions == null)
        return;

    // Get the fill options for the series point.
    drawOptions.FillStyle.FillMode = DevExpress.XtraCharts.FillMode.Gradient;
    RectangleGradientFillOptions options = drawOptions.FillStyle.Options as RectangleGradientFillOptions;
    if (options == null)
        return;

    // Get the value at the current series point.
    double val = e.SeriesPoint[0];
    // If the value is less than 1, hide the point's label.
    if (e.SeriesPoint[0] < 1)
    {
        e.LabelText = "";
    }
    // If the value is less than 2.5, then fill the bar with green colors.
    if (val < 2.5)
    {
        options.Color2 = Color.FromArgb(154, 196, 84);
        drawOptions.Color = Color.FromArgb(81, 137, 3);
        drawOptions.Border.Color = Color.FromArgb(100, 39, 91, 1);
    }
    // ... if the value is less than 5.5, then fill the bar with yellow colors.
    else if (val < 5.5)
    {
        options.Color2 = Color.FromArgb(254, 233, 124);
        drawOptions.Color = Color.FromArgb(249, 170, 15);
        drawOptions.Border.Color = Color.FromArgb(60, 165, 73, 5);
    }
    // ... if the value is greater, then fill the bar with red colors.
    else
    {
        options.Color2 = Color.FromArgb(242, 143, 112);
        drawOptions.Color = Color.FromArgb(199, 57, 12);
        drawOptions.Border.Color = Color.FromArgb(100, 155, 26, 0);
    }
}

五、導(dǎo)出

1、導(dǎo)出為PDF：

圖表會(huì)被自動(dòng)拆分，

if (chartControlidx.IsPrintingAvailable) //是否能被打印或輸出
   {
     // Exports to a PDF file.
     chartControlidx.ExportToPdf(path);
     // Exports to a stream as PDF.
     System.IO.FileStream pdfStream = new System.IO.FileStream(path, System.IO.FileMode.Create);
     chartControlidx.ExportToPdf(pdfStream);
      //...
      pdfStream.Close();
    }

2、導(dǎo)出為圖像文件：

if (chartControlidx.IsPrintingAvailable) //是否能被打印或輸出
  {
    // Create an image in the specified format from the chart and save it to the specified path.
    chartControlidx.ExportToImage(path, System.Drawing.Imaging.ImageFormat.Png);   //png格式
  }

六、參考

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

到此這篇關(guān)于C#使用XtraCharts控件實(shí)現(xiàn)圖表的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

C#使用DevExpress中的XtraCharts控件實(shí)現(xiàn)圖表

目錄

一、總體概述

二、chartControl層\XYDiagram層

1.當(dāng)坐標(biāo)軸的數(shù)據(jù)類型是數(shù)字時(shí)

2. 當(dāng)前數(shù)據(jù)類型是字符串時(shí)

3.當(dāng)前數(shù)據(jù)類型是時(shí)間

三、實(shí)例

1.餅狀圖

1.1、添加ChartControl控件

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

1.3、根據(jù)數(shù)據(jù)創(chuàng)建餅狀圖

1.4、設(shè)置餅狀Series顯示方式（值/百分比）

2.柱狀圖

2.1、添加ChartControl控件

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

2.3、根據(jù)數(shù)據(jù)創(chuàng)建柱狀圖

2.4、用到的方法

四、事件

1、CustomDrawAxisLabel ： 接管此事件來獲得軸標(biāo)簽。定制軸標(biāo)簽

2、ObjectHotTracked：鼠標(biāo)指針懸停位置

3、CustomDrawSeries ：自定義繪制系列

4、CustomDrawSeriesPoint：自定義繪制系列點(diǎn)

五、導(dǎo)出

1、導(dǎo)出為PDF：