C#使用DevExpress中的XtraCharts控件實現(xiàn)圖表
更新時間：2022年05月27日 11:14:59 作者：springsnow
這篇文章介紹了C#使用DevExpress中的XtraCharts控件實現(xiàn)圖表的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
一、總體概述
官方文檔：
https://docs.devexpress.com/WindowsForms/8117/controls-and-libraries/chart-control
ChartControl控件主要包括Chart Title、Legend、Annotations、Diagram、Series五部分；如圖：
二、chartControl層\XYDiagram層
chartControl像DEV的其它控件一樣，這一層之相當于是一個殼子，我們平時在這里面設(shè)置的屬性也不多。而且都是些常規(guī)屬性，比如大小、?？糠绞降鹊取?/p>
XYDiagram這一層就比較關(guān)鍵了，主要是涉及到XY軸的顯示方式和滾動條顯示等。并且坐標軸的顯示方式和數(shù)據(jù)類型也有很大的關(guān)系，主要包括3種類型，數(shù)據(jù)類型是根據(jù)添加到Series中的數(shù)據(jù)類型決定的，主要屬性是ArgumentScaleType。所以涉及到3種不同的設(shè)置方式。
1.當坐標軸的數(shù)據(jù)類型是數(shù)字時
2. 當前數(shù)據(jù)類型是字符串時
其它設(shè)置同上，主要是要想出現(xiàn)滾動條，在設(shè)計面板中還不能實現(xiàn)，必須通過代碼設(shè)置
DevExpress.XtraCharts.XYDiagram xyDiagram1 = (XYDiagram)this.chartControl1.Diagram; xyDiagram1.AxisX.Range.MaxValueInternal = 3; //這個屬性在設(shè)計視圖里面是看不到的，只有代碼里面才可以設(shè)置。 xyDiagram1.AxisX.Range.MinValueInternal = -0.5D;
3.當前數(shù)據(jù)類型是時間
AxisX ax = (XYDiagram)chartControl1.Diagram; ax.GridSpacingAuto = false; ax.DateTimeMeasureUnit = DateTimeMeasurementUnit.Minute;//這個可以根據(jù)你自己的情況設(shè)置 ax.DateTimeGridAlignment = DateTimeMeasurementUnit.Second; //這個是間隔單位 ax.GridSpacing = 10; // 每10秒為一個間隔。
三、實例
1.餅狀圖
1.1、添加ChartControl控件
在工具箱中找到ChartControl控件，拖到窗口中，創(chuàng)建Pie；
1.2、準備數(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)建一個餅狀圖
/// </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、設(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;
}
}實現(xiàn)結(jié)果：
2.柱狀圖
2.1、添加ChartControl控件
在工具箱中找到ChartControl控件，拖到窗口中，創(chuàng)建Bar：
2.2、準備數(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("學院學生數(shù)量柱狀圖");
}2.4、用到的方法
public static class ChartUtils
{
/// <summary>
/// 增加數(shù)據(jù)篩選
/// </summary>
/// <param name="SeriesBase">Series</param>
/// <param name="columnName">列名稱</param>
/// <param name="value">列名稱對應的篩選數(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è)置是否顯示十字標線
/// </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設(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è)置標題
/// </summary>
/// <param name="chartControl"></param>
/// <param name="HTitle"></param>
public static void SetHZTitle(ref ChartControl chartControl, string HTitle)
{
chartControl.Titles.Clear(); //先清除以前的標題
//橫標題設(shè)置
ChartTitle titles = new ChartTitle(); //聲明標題
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); //添加標題
}
}實現(xiàn)結(jié)果：
四、事件
1、CustomDrawAxisLabel ： 接管此事件來獲得軸標簽。定制軸標簽
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：鼠標指針懸停位置
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：自定義繪制系列點
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);
}
}五、導出
1、導出為PDF：
圖表會被自動拆分，
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、導出為圖像文件：
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控件實現(xiàn)圖表的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
C#實現(xiàn)windows form限制文本框輸入的方法
這篇文章主要介紹了C#實現(xiàn)windows form限制文本框輸入的方法,涉及C#限制文本框輸入的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
今天又遇到這個問題了，問了問同事，他說最近面試的時候，也問道他了，于是給我講了講，現(xiàn)在大概是記住了，分享一下。2013-04-04
C#使用Free?Spire.PDF進行PDF打印的實現(xiàn)方案
在現(xiàn)代應用開發(fā)中,打印?PDF?文件是一個常見需求,C#?提供了多種庫來支持這一功能,其中?Free?Spire.PDF?for?.NET?是一個不錯的選擇,本文將深入解析如何使用?Free?Spire.PDF?進行?PDF?打印,需要的朋友可以參考下2025-08-08
Log4Net是從Java的log4j移植過來的,功能也與log4j類似,可以把日志信息輸出到文件、數(shù)據(jù)庫等不同的介質(zhì)或目標,下面我們就來學習一下如何使用log4net進行日志記錄吧2023-11-11
基于C#中IDisposable與IEnumerable、IEnumerator的應用
本篇文章小編為大家介紹，基于C#中IDisposable與IEnumerable、IEnumerator的應用，需要的朋友參考下2013-04-04
C# 2.0 中還引入了可空類型，可空類型也是值類型，只是可空類型是包括null的值類型的，下面就介紹下C#2.0中對可空類型的支持具體有哪些內(nèi)容2012-11-11
這篇文章主要詳細對比分析了C#單線程和多線程的端口掃描器應用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細介紹了Unity Shader實現(xiàn)2D游戲迷霧，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-04-04
這篇文章主要為大家詳細介紹了C#如何使用iTextSharp生成PDF的相關(guān)知識,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以了解下2024-03-03
這篇文章主要介紹了C# 從枚舉值獲取對應的文本描述詳解的相關(guān)資料,需要的朋友可以參考下2017-01-01