★ FEATURED ARTICLE 简介这份C#绘制曲线示例源码面向具备一定C#基础、希望掌握数据可视化与图形编程的开发者重点解决如何将SQL数据库中的数据读取后动态绘制成曲线图的问题。资源包共25个文件约50KB以cs源代码、csproj项目文件、sln解决方案、sql数据库脚本及resx资源文件为主另含exe可执行程序与pdb调试文件结构紧凑、便于直接运行调试。源码演示了通过ADO.NET连接数据库、执行查询获取数据点再借助GDI或WPF的Graphics类绘制曲线的完整流程并涉及窗体设计、资源与配置管理等环节。目前已有748人学习下载适合作为课程设计、数据监控界面或报表模块的参考范例帮助读者理解数据驱动绘图的核心思路并在此基础上扩展异步加载、动态刷新与鼠标交互等优化功能。1. 从一张实时曲线图说起C# 绘制曲线到底在解决什么问题工业上位机、实验室数据采集、设备状态监控这些场景里最刚需的一个界面元素就是实时曲线图。你手上有一台设备每隔几百毫秒吐一个扭矩值或者温度值你需要把这些点连成一条线让操作员一眼看出趋势是否异常。C# 绘制曲线图这件事本质上就是解决「数据怎么进来、曲线怎么画、历史怎么存」这三个问题。而标题里提到的 SQL 数据库说明这套方案不只是画个图看看还要把数据落盘支持回查和追溯。我见过太多人一开始用 Chart 控件拖一个上去跑起来发现数据一多就卡成幻灯片或者曲线刷新时整个界面闪得没法看。这不是控件不行是没搞清楚数据流和渲染节奏的关系。这套「C# 绘制曲线示例源码 SQL 数据库」的组合适合做设备监控上位机的开发者、需要快速搭出数据可视化原型的工程师以及想把采集数据持久化后做趋势分析的人。接下来我会把选型、建库建表、数据写入、曲线渲染、性能调优这条链路拆开讲清楚代码可以直接抄。2. 曲线绘制方案选型Chart 控件、GDI 手绘还是第三方库2.1 三种主流方案的能力边界对比在 C# 里画曲线常见做法无非三条路WinForms 自带的 Chart 控件、GDI 手动绘制、以及第三方图表库。很多人上来就问「哪个最好」这个问题没有统一答案得看你数据量、刷新频率和交互需求。Chart 控件是微软在 .NET Framework 时代就内置的拖到窗体上就能用Series 类型选 Line 或 Spline 就是曲线。它的优点是上手快、属性面板可视化配置、支持缩放和 Tooltip。缺点是数据点超过几千个之后刷新明显变慢因为每次更新都会触发完整的重绘流程而且默认开启了抗锯齿和渐变填充这些在实时场景下都是负担。GDI 手绘就是自己在 Paint 事件里用 Graphics.DrawCurve 或 DrawLines 画。灵活度最高你可以控制每一个像素可以做双缓冲、局部刷新、只重绘脏区域。代价是什么都要自己写坐标轴、刻度、图例、缩放、十字光标全是体力活。第三方库比如 OxyPlot、LiveCharts、ScottPlot这些在 NuGet 上都能直接装。它们对大数据量和实时刷新做了专门优化ScottPlot 官方说能流畅渲染百万级数据点。但引入第三方库意味着你要接受它的 API 风格、版本升级可能带来的破坏性变更以及在某些受限环境下的部署问题。方案上手难度万点级刷新自定义能力部署依赖Chart 控件低卡顿明显中等无GDI 手绘高取决于实现最高无ScottPlot低流畅较高NuGet 包LiveCharts中较好高NuGet 包2.2 我一般怎么选按数据量和刷新率分档如果数据点少于 2000 个、刷新间隔大于 500msChart 控件完全够用别折腾。如果数据点在 2000 到 50000 之间、刷新间隔 100ms 左右我建议用 ScottPlot它的 Render 方法可以指定只更新数据不重建图表结构。如果超过 50000 个点或者刷新间隔低于 50ms那就得上 GDI 手绘加双缓冲或者用 Direct2D 做硬件加速。这里有个容易被忽略的点曲线绘制的瓶颈往往不在画线本身而在数据结构的选取。用 List 存点每次 Add 都可能触发扩容和内存拷贝。实时场景下应该用环形缓冲区固定大小覆盖写入读取时按索引顺序取。下面这段代码是一个简单的环形缓冲区实现public class RingBuffer { private readonly double[] _buffer; private int _head; private int _count; public RingBuffer(int capacity) { _buffer new double[capacity]; _head 0; _count 0; } public void Add(double value) { _buffer[_head] value; _head (_head 1) % _buffer.Length; if (_count _buffer.Length) _count; } // 按时间顺序返回数据最旧的在前 public double[] ToArray() { var result new double[_count]; int start (_head - _count _buffer.Length) % _buffer.Length; for (int i 0; i _count; i) result[i] _buffer[(start i) % _buffer.Length]; return result; } }这段代码的关键参数是 capacity它决定了缓冲区能存多少个点。假设采样间隔 100ms你想在屏幕上显示最近 60 秒的数据那 capacity 设为 600 就够了。ToArray 方法每次调用会分配一个新数组如果刷新频率很高可以考虑复用一个预分配的数组把数据拷进去而不是新建。提示环形缓冲区的大小一旦确定就不应该频繁变动否则失去固定内存的优势。如果确实需要动态调整建议重建缓冲区而不是扩容。3. SQL 数据库落盘建库建表与批量写入的工程细节3.1 表结构设计时间戳、设备号与数值字段曲线数据存数据库最常见的坑是表结构设计得太随意。我见过有人用一张表存所有设备的采集数据字段就三个时间、设备名、值。数据量一上来查询慢得没法看。正确的做法是按设备或按时间段分表至少也要在时间戳和设备 ID 上建联合索引。下面是一个我常用的建表语句适用于 SQL Server其他数据库改一下类型就行CREATE TABLE DeviceCurveData ( Id BIGINT IDENTITY(1,1) PRIMARY KEY, DeviceId NVARCHAR(50) NOT NULL, SampleTime DATETIME2(3) NOT NULL, Value FLOAT NOT NULL, Quality TINYINT DEFAULT 0 ); CREATE NONCLUSTERED INDEX IX_DeviceCurve_Device_Time ON DeviceCurveData (DeviceId, SampleTime DESC) INCLUDE (Value);SampleTime 用 DATETIME2(3) 精确到毫秒很多采集卡的时标就是毫秒级。Quality 字段用来标记数据质量比如 0 表示正常、1 表示超量程、2 表示通讯中断画曲线时可以根据这个字段把异常段标红。索引的 INCLUDE 把 Value 带进去查询时不用回表这个细节在数据量上千万后差别很大。3.2 批量写入别用逐条 INSERT实时采集场景下数据是连续不断产生的。如果每来一个点就执行一次 INSERT数据库的压力会非常大而且每次插入都是一次网络往返和事务开销。正确的做法是攒一批再写比如每 500 个点或者每 2 秒写一次。public async Task BulkInsertAsync(ListCurvePoint points) { if (points null || points.Count 0) return; var dt new DataTable(); dt.Columns.Add(DeviceId, typeof(string)); dt.Columns.Add(SampleTime, typeof(DateTime)); dt.Columns.Add(Value, typeof(double)); dt.Columns.Add(Quality, typeof(byte)); foreach (var p in points) dt.Rows.Add(p.DeviceId, p.SampleTime, p.Value, p.Quality); using var conn new SqlConnection(_connectionString); await conn.OpenAsync(); using var bulk new SqlBulkCopy(conn); bulk.DestinationTableName DeviceCurveData; bulk.BatchSize 1000; bulk.BulkCopyTimeout 30; bulk.ColumnMappings.Add(DeviceId, DeviceId); bulk.ColumnMappings.Add(SampleTime, SampleTime); bulk.ColumnMappings.Add(Value, Value); bulk.ColumnMappings.Add(Quality, Quality); await bulk.WriteToServerAsync(dt); }SqlBulkCopy 是 SQL Server 里批量写入最快的方式之一BatchSize 设为 1000 表示每 1000 行提交一次。BulkCopyTimeout 单位是秒数据量特别大时要适当调大。ColumnMappings 必须显式指定否则列顺序不一致会写错数据。如果用的是 MySQL对应的是 MySqlBulkLoaderPostgreSQL 用 Npgsql 的 BeginBinaryImport。注意SqlBulkCopy 不触发触发器也不做约束检查除非指定 CheckConstraints所以数据质量要在写入前自己保证。3.3 查询回显按时间范围取数并降采样曲线回查时如果时间范围很大比如查一周的数据原始点可能有几百万个全取出来画图既慢又没必要。常见做法是在 SQL 里做降采样比如按分钟取平均值SELECT DATEADD(MINUTE, DATEDIFF(MINUTE, 0, SampleTime), 0) AS MinuteSlot, AVG(Value) AS AvgValue, MIN(Value) AS MinValue, MAX(Value) AS MaxValue FROM DeviceCurveData WHERE DeviceId DeviceId AND SampleTime StartTime AND SampleTime EndTime GROUP BY DATEADD(MINUTE, DATEDIFF(MINUTE, 0, SampleTime), 0) ORDER BY MinuteSlot;这样返回的点数就控制在合理范围内画出来的曲线趋势不变但渲染压力小很多。如果用户放大到某个时间段再按秒级精度去查原始数据。4. 把数据画到界面上Chart 控件与 GDI 的实操代码4.1 用 Chart 控件快速出图Series 配置与实时追加Chart 控件虽然在大数据量下表现一般但做原型和中小规模监控完全够用。关键配置有几个ChartArea 的 AxisX 和 AxisY 范围、Series 的 ChartType、以及是否开启双缓冲。private void InitChart() { chart1.Series.Clear(); var series new Series(Torque); series.ChartType SeriesChartType.FastLine; // 比 Line 快很多 series.BorderWidth 2; series.Color Color.DodgerBlue; chart1.Series.Add(series); var area chart1.ChartAreas[0]; area.AxisX.LabelStyle.Format HH:mm:ss; area.AxisX.MajorGrid.LineColor Color.FromArgb(40, 40, 40); area.AxisY.MajorGrid.LineColor Color.FromArgb(40, 40, 40); area.AxisX.ScrollBar.Enabled false; area.CursorX.IsUserSelectionEnabled true; // 开启双缓冲减少闪烁 typeof(Chart).GetProperty(DoubleBuffered, BindingFlags.Instance | BindingFlags.NonPublic) ?.SetValue(chart1, true, null); } private void AppendPoint(double value) { var series chart1.Series[0]; series.Points.AddY(value); // 只保留最近 600 个点 while (series.Points.Count 600) series.Points.RemoveAt(0); // 让 X 轴跟随滚动 chart1.ChartAreas[0].AxisX.Minimum double.NaN; chart1.ChartAreas[0].AxisX.Maximum double.NaN; chart1.Invalidate(); }SeriesChartType.FastLine 比普通 Line 快因为它跳过了很多装饰性绘制。Points.RemoveAt(0) 是 O(n) 操作点数多的时候会卡所以更推荐用环形缓冲区存数据然后整体替换 Series 的数据源。DoubleBuffered 是通过反射设置的Chart 控件没有公开这个属性但底层确实支持。4.2 GDI 手绘曲线双缓冲与局部刷新当 Chart 控件扛不住的时候就得自己上手画。核心思路是在内存里建一个和画布同样大小的 Bitmap所有绘制操作先画到这个 Bitmap 上最后一次性 DrawImage 到屏幕。这样不会闪烁。private Bitmap _backBuffer; private Graphics _bufferGraphics; private void OnPaint(object sender, PaintEventArgs e) { if (_backBuffer null || _backBuffer.Width ! Width || _backBuffer.Height ! Height) { _backBuffer?.Dispose(); _backBuffer new Bitmap(Width, Height); _bufferGraphics Graphics.FromImage(_backBuffer); _bufferGraphics.SmoothingMode SmoothingMode.AntiAlias; } _bufferGraphics.Clear(Color.Black); DrawGrid(_bufferGraphics); DrawCurve(_bufferGraphics); DrawAxisLabels(_bufferGraphics); e.Graphics.DrawImageUnscaled(_backBuffer, 0, 0); } private void DrawCurve(Graphics g) { var data _ringBuffer.ToArray(); if (data.Length 2) return; float xStep (float)Width / (data.Length - 1); var points new PointF[data.Length]; for (int i 0; i data.Length; i) { float y (float)(Height - (data[i] - _minValue) / (_maxValue - _minValue) * Height); points[i] new PointF(i * xStep, y); } using var pen new Pen(Color.Lime, 1.5f); g.DrawLines(pen, points); }DrawLines 比 DrawCurve 快因为 DrawCurve 会做样条插值计算。如果数据点足够密DrawLines 画出来已经很平滑了。_minValue 和 _maxValue 是 Y 轴范围可以固定也可以动态计算。动态计算时要注意加一点余量否则曲线会贴边。提示GDI 的 Graphics 对象用完要 Dispose否则内存泄漏很快。双缓冲的 Bitmap 在窗体 Resize 时要重建。5. 避坑与排查曲线绘制和数据库写入的 5 个血泪教训5.1 曲线刷新时界面闪烁严重现象每次追加新数据点整个图表区域闪一下操作员看久了眼睛疼。原因Chart 控件默认没有开启双缓冲每次 Invalidate 都会先擦背景再画前景中间有个短暂的白屏。解决用反射设置 DoubleBuffered 为 true或者把绘制逻辑放到自定义控件里用 SetStyle 开启双缓冲。如果用的是 GDI 手绘确保所有绘制都在内存 Bitmap 上完成最后只做一次 DrawImage。5.2 数据写入越来越慢最后卡死现象程序跑几个小时后写入数据库的耗时从几毫秒涨到几百毫秒最后界面完全卡住。原因逐条 INSERT 导致数据库日志膨胀或者事务没有及时提交锁等待越来越长。还有一种可能是 DataTable 无限增长内存被吃满。解决改成批量写入每 500 到 1000 条提交一次。DataTable 每次写完就清空或重建。数据库那边定期做索引重建和日志备份别让日志文件无限涨。5.3 查询历史曲线时返回几十万条数据现象用户选了一周的时间范围程序卡住不动内存飙升。原因SQL 没有做降采样直接把所有原始点查出来DataReader 逐条读UI 线程被阻塞。解决在 SQL 里按时间粒度聚合或者用分页查询。查询放在后台线程用 async/await 避免阻塞 UI。返回的数据量控制在几千条以内不够再让用户缩小时间范围。5.4 曲线 Y 轴范围固定导致异常值看不见现象设备偶尔出一个超量程的尖峰但曲线上完全看不出来因为 Y 轴范围是固定的。原因Y 轴 Min/Max 写死了超出范围的点被裁剪掉了。解决Y 轴范围动态计算取当前数据的最小值和最大值上下各留 10% 余量。如果数据中有明显的异常值可以考虑用对数坐标或者单独标记。5.5 多设备曲线颜色重复分不清哪条是哪条现象同时显示 4 台设备的扭矩曲线结果有两条颜色一样操作员分不清。原因颜色是随机分配的或者用了固定的调色板但设备数量超过了颜色数。解决预定义一组高对比度的颜色按设备 ID 哈希取模分配。同时在图例里显示设备名称和对应颜色。如果设备数量太多考虑用不同线型实线、虚线、点线辅助区分。6. 进阶技巧让曲线图从「能看」变成「好用」前面把基本链路跑通了但实际项目里还有一些细节能让曲线图好用很多。第一个技巧是十字光标和数值提示。用户把鼠标移到曲线上应该能显示当前点的精确数值和时间。Chart 控件可以用 CursorX 和 ToolTip 实现GDI 手绘就要自己算鼠标位置对应的数据索引。private void OnMouseMove(object sender, MouseEventArgs e) { if (_ringBuffer null) return; var data _ringBuffer.ToArray(); if (data.Length 2) return; int index (int)(e.X / ((float)Width / (data.Length - 1))); index Math.Max(0, Math.Min(data.Length - 1, index)); _cursorX e.X; _cursorValue data[index]; Invalidate(); // 触发重绘在 OnPaint 里画十字线 }这段代码的关键是索引计算用鼠标 X 坐标除以每个点占的像素宽度。注意边界处理别让索引越界。重绘时在 OnPaint 里画一条竖线和数值标签就行。第二个技巧是数据导出。操作员经常需要把某段曲线导出成 CSV 或图片发给主管或者存档。CSV 导出很简单把环形缓冲区里的数据按时间顺序写文件就行。图片导出用 Bitmap.Save 方法把当前画布存成 PNG。第三个技巧是报警阈值线。在曲线上画一条水平虚线表示上限或下限超过阈值的曲线段用红色高亮。这个在设备监控里非常实用操作员一眼就能看出什么时候超限了。实现方式是在 DrawCurve 里判断每个点的值超过阈值的用不同颜色的 Pen 分段绘制。最后一个建议曲线控件的刷新频率不要和采集频率绑死。采集可能是 10ms 一次但界面刷新 100ms 一次就够了。用一个定时器或者单独的渲染线程每 100ms 从缓冲区取最新数据重绘一次。这样既保证了数据的完整性又不会让 UI 线程被高频刷新拖垮。我自己在这个方向上踩过最大的坑就是一开始把所有逻辑都塞在 UI 线程里采集、写库、画图全在一起结果数据量一上来整个界面就假死。后来把采集和写库放到后台线程UI 只负责渲染问题才解决。希望帮到你。本文还有配套的精品资源点击获取
阅读完成 · 觉得有帮助？
