当前位置：首页 > news >正文

C#实战：利用DevExpress的ChartControl实现动态数据可视化

news 2026/3/26 17:02:13

1. 从零开始：搭建C#图表开发环境

第一次接触DevExpress的ChartControl时，我完全被它强大的功能震撼到了。这个控件不仅能轻松绘制各种常见图表，还能实现动态数据绑定和丰富的样式自定义。对于需要做数据可视化的C#开发者来说，简直是神器级别的存在。

在开始之前，我们需要准备好开发环境。我推荐使用Visual Studio 2022社区版，这是完全免费的。安装时记得勾选".NET桌面开发"工作负载。DevExpress组件库需要单独安装，可以去官网下载试用版，安装过程就像装普通软件一样简单。

新建项目时选择"Windows窗体应用(.NET Framework)"，我习惯用.NET Framework 4.7.2版本，兼容性最好。项目创建完成后，在解决方案资源管理器中右键引用，添加DevExpress相关的DLL。核心需要引用的是：

DevExpress.Data.vXX.X.dll
DevExpress.XtraCharts.vXX.X.dll
DevExpress.XtraCharts.UI.vXX.X.dll

提示：XX.X代表你安装的DevExpress版本号，比如21.2就写21.2

安装完这些基础组件后，把ChartControl从工具箱拖到窗体上，一个空白的图表就出现了。这时候你可能会觉得界面平平无奇，但别急，接下来我会带你解锁它的全部潜力。

2. 数据准备：用Bogus生成逼真测试数据

实际项目中，我们通常是从数据库获取数据，但为了演示方便，我用Bogus这个库来生成模拟数据。这个库特别有意思，它能生成看起来非常真实的假数据，支持中文数据生成，对国内开发者特别友好。

首先通过NuGet安装Bogus包。在VS中右键项目选择"管理NuGet程序包"，搜索Bogus安装即可。我设计了一个简单的Demo类，用来模拟城市分布数据：

public class CityData { public int Id { get; set; } public string CityName { get; set; } public DateTime RecordDate { get; set; } }

用Bogus生成1000条测试数据的代码是这样的：

var cities = new[] { "北京", "上海", "广州", "深圳", "杭州", "成都" }; var testData = new Faker<CityData>("zh_CN") .RuleFor(c => c.Id, f => f.IndexGlobal) .RuleFor(c => c.CityName, f => f.PickRandom(cities)) .RuleFor(c => c.RecordDate, f => f.Date.Between(DateTime.Now.AddYears(-1), DateTime.Now)) .Generate(1000);

这里我特意加了日期字段，因为实际项目中经常需要按时间维度分析数据。生成的数据大概长这样：

Id: 自增序号
CityName: 随机城市名
RecordDate: 过去一年内的随机日期

3. 数据加工：LINQ统计与转换技巧

原始数据往往需要加工才能用于图表展示。比如我们要统计每个城市出现的次数，这就是典型的聚合操作。LINQ的GroupBy和Count组合能完美解决：

var cityStats = testData .GroupBy(c => c.CityName) .Select(g => new { City = g.Key, Count = g.Count(), LastRecord = g.Max(c => c.RecordDate) }) .OrderByDescending(x => x.Count) .ToList();

这个查询做了三件事：

按城市名分组
计算每组的记录数
找出每组最新的记录日期

为了让数据更适合图表展示，我创建了专门的视图模型类：

public class ChartDataPoint { public string Argument { get; set; } // X轴数据 public double Value { get; set; } // Y轴数据 public string SeriesName { get; set; } // 系列名 }

转换数据时有个小技巧：把枚举值转换为具体的ChartDataPoint对象列表，这样后面绑定图表时会非常方便：

var chartData = cityStats.Select(s => new ChartDataPoint { Argument = s.City, Value = s.Count, SeriesName = "城市分布" }).ToList();

4. 基础图表绘制：三大经典图表实战

终于到了最激动人心的部分 - 画图！DevExpress的ChartControl支持几十种图表类型，我们先从最常用的三种开始。

4.1 折线图：展示趋势变化

折线图特别适合展示数据随时间变化的趋势。创建折线图的代码如下：

// 创建Series并设置类型为折线图 Series lineSeries = new Series("城市分布", ViewType.Line); // 绑定数据 lineSeries.DataSource = chartData; lineSeries.ArgumentDataMember = "Argument"; lineSeries.ValueDataMembers.AddRange("Value"); // 添加到图表 chartControl1.Series.Add(lineSeries); // 调整线条样式 ((LineSeriesView)lineSeries.View).LineStyle.DashStyle = DashStyle.Dash; ((LineSeriesView)lineSeries.View).LineStyle.Thickness = 3;

几个实用的小技巧：

设置DashStyle可以改变线条样式（实线、虚线等）
调整Thickness改变线条粗细
通过MarkerVisibility控制是否显示数据点

4.2 柱状图：数据对比一目了然

柱状图是数据对比的最佳选择。创建柱状图与折线图类似，只需改变ViewType：

Series barSeries = new Series("城市分布", ViewType.Bar); barSeries.DataSource = chartData; chartControl2.Series.Add(barSeries); // 自定义柱子颜色 ((BarSeriesView)barSeries.View).FillStyle.FillMode = FillMode.Gradient; ((BarSeriesView)barSeries.View).ColorEach = true;

柱状图的自定义选项非常丰富：

ColorEach=true让每个柱子显示不同颜色
FillMode控制填充方式（纯色、渐变等）
通过BarWidth调整柱子宽度

4.3 饼图：比例分布直观展示

饼图能直观显示各部分占比，创建方式如下：

Series pieSeries = new Series("城市分布", ViewType.Pie); pieSeries.DataSource = chartData; chartControl3.Series.Add(pieSeries); // 显示百分比标签 ((PieSeriesView)pieSeries.View).ExplodedPoints.Add(0); ((PieSeriesView)pieSeries.View).ExplodeMode = PieExplodeMode.UsePoints; ((PieSeriesView)pieSeries.View).ExplodedDistancePercentage = 10;

饼图的几个实用功能：

ExplodedDistancePercentage让某块扇形突出显示
ToolTipEnabled=true启用悬浮提示
LegendTextPattern定义图例显示格式

5. 高级技巧：动态更新与样式美化

5.1 实时数据更新

实际项目中经常需要动态更新图表数据。我推荐使用BindingList作为数据源：

var bindingData = new BindingList<ChartDataPoint>(chartData); chartControl1.DataSource = bindingData; // 添加新数据时 bindingData.Add(new ChartDataPoint { Argument = "重庆", Value = 150 }); bindingData.ResetBindings(); // 通知图表刷新

5.2 图表样式深度定制

DevExpress提供了极其丰富的样式定制选项。比如这个渐变色背景的设置：

chartControl1.BackColor = Color.Transparent; chartControl1.BorderOptions.Visibility = DefaultBoolean.False; // 设置渐变背景 chartControl1.AppearanceName = "Light"; chartControl1.Appearance.BackColor = Color.White; chartControl1.Appearance.BackColor2 = Color.FromArgb(240, 240, 240);

坐标轴的美化也很重要：

XYDiagram diagram = (XYDiagram)chartControl1.Diagram; diagram.AxisX.Title.Text = "城市名称"; diagram.AxisX.Title.Visibility = DefaultBoolean.True; diagram.AxisY.Title.Text = "数量统计"; diagram.AxisY.Title.Visibility = DefaultBoolean.True; diagram.AxisY.GridLines.MinorVisible = true;

5.3 添加交互功能

让图表支持交互能大大提升用户体验：

// 启用十字线 diagram.DefaultPane.EnableAxisXScrolling = true; diagram.DefaultPane.EnableAxisXZooming = true; diagram.DefaultPane.EnableAxisYScrolling = true; diagram.DefaultPane.EnableAxisYZooming = true; // 添加十字线光标 chartControl1.CrosshairOptions.ShowArgumentLabels = true; chartControl1.CrosshairOptions.ShowValueLabels = true; chartControl1.CrosshairOptions.ShowValueLine = true;

6. 实战案例：城市数据多维度分析

现在我们把所有知识综合起来，做一个完整的城市数据分析案例。假设需求是：

展示各城市数据量分布（饼图）
按月统计变化趋势（折线图）
对比不同城市数据（柱状图）

首先准备多维度数据：

// 按月分组统计 var monthlyStats = testData .GroupBy(c => new { c.CityName, Month = c.RecordDate.ToString("yyyy-MM") }) .Select(g => new ChartDataPoint { Argument = g.Key.Month, Value = g.Count(), SeriesName = g.Key.CityName }) .ToList();

然后创建主从图表联动的界面：

// 主图表显示城市分布饼图 Series mainSeries = new Series("城市分布", ViewType.Pie); mainSeries.DataSource = chartData; mainSeries.SeriesPointsSorting = SeriesPointsSorting.Ascending; mainSeries.SeriesPointsSortingKey = SeriesPointKey.Value; // 从图表显示趋势折线图 Series detailSeries = new Series("月度趋势", ViewType.Line); detailSeries.DataSource = monthlyStats.Where(x => x.SeriesName == "北京"); detailSeries.ArgumentDataMember = "Argument"; detailSeries.ValueDataMembers.AddRange("Value"); // 添加图表联动事件 pieSeries.SelectionChanged += (s, e) => { var selectedCity = ((Series)s).SelectedPoints[0].Argument; detailSeries.DataSource = monthlyStats.Where(x => x.SeriesName == selectedCity); };

这个案例展示了如何将多个图表组合使用，实现数据的多维度分析。实际项目中，你还可以添加数据导出、打印等功能，让图表工具更加完善。

查看全文

http://www.jsqmd.com/news/539561/