做仪表盘项目这些年我对图表控件的挑选一直很挑剔。Delphi 生态里TeeChart VCL/FMX 几乎是绕不开的名字。圆形仪表、线性仪表、进度环、实时曲线它都能很快搭起来。2026 版发布后我最先盯上的特性恰恰是官方更新日志里一笔带过的那条“为量规刻度添加更精细的细节”。很多老用户第一反应是刻度不就是几条短线吗能玩出什么花但真在 SCADA、车载仪表、工业设备面板上跑过项目的人都知道刻度承担的信息密度远比想象中高主刻度、次刻度、不等间距刻度、颜色状态标记要在窗口拉伸和多 DPI 环境下保持清晰对齐一点也不轻松。这篇内容我把自己的实际用法、配置逻辑和踩过的坑整理出来给同样在用 TeeChart VCL/FMX 做仪表的朋友参考。1. 先搞清楚量规刻度的“精细细节”到底指什么1.1 量规控件的组成部分一个量规控件在 TeeChart 里通常分两层看。第一层是系列本身圆形速度计、线性温度计、旋转角度盘它决定整体的几何形态和指针/数值表现方式。第二层是轴和刻度这一层几乎承载了使用者能看到的全部信息。做演示的时候值的变化往往很慢人眼并不会紧盯着数字跳变视觉焦点会长期停留在刻度上。所以刻度细节做得好不好直接决定这个仪表的“高级感”。我见过不少项目功能逻辑完全正确但最终评审时被一句“表盘看着不够专业”打回去。问题大多出在刻度线粗细不分、标签间距失控、次刻度密度和主刻度没有形成层级。所谓“精细细节”在 TeeChart VCL/FMX 2026 语境下指的是主刻度、次刻度的长度、宽度、颜色、内外侧偏移、数量密度以及标签和刻度线之间的相对位置这些维度现在可以独立调整而不是像旧版那样只能给一个统一的粗放参数。1.2 旧版本到底缺了什么旧版本其实也支持一定程度的刻度设置比如简单的 MajorTicks 和 MinorTicks 数量以及线条长度。可一旦数据范围复杂起来这些设置就不够用了。举个例子我曾经做一个恒温箱温度面板量程是 -40℃ 到 150℃。设计要求 0℃ 和 100℃ 两个刻度必须用不同颜色加粗低温区、常温区、高温区三段刻度密度还不一样。旧版要在 OnAfterDraw 里自己画线根据像素坐标去计算每一条刻度应该画在哪个位置再叠加绘制。这套代码难写更难的是在 VCL 和 FMX 两套框架里分别维护坐标变换不同、DPI 行为不同、画笔抗锯齿也不同每次改需求都要两头同步改一遍。TeeChart 2026 的更新思路就是把这些零散的覆盖逻辑收敛到刻度对象本身。主刻度、次刻度甚至单条自定义刻度都能配置颜色、长度、宽度、内外偏移。对做产品的人来说这意味着不用再靠“补丁式自绘”去实现刻度细节项目的维护成本能明显下降。1.3 谁最适合升级这个特性如果你做的是 PLC/SCADA 上位机要在屏幕上还原现场 HMI 的效果量规是主力控件。温度、压力、液位、流量、转速每一类参数对刻度的语义要求都不同。车载仪表盘项目同样需要它汽车速度表、油量表的刻度层次、红区警示都需要细腻控制。音频领域的电平表、医疗设备上的各类监测指标也都有类似需求。这些场景背后有一个共同点刻度不只是装饰而是承担了“区间语义”。比如压力表上0.6MPa 到 1.0MPa 是安全区1.0 到 1.2 是预警区超过 1.2 是危险区。用户一眼扫过去需要先从刻度密度和颜色判断出当前处于哪个区域再去读数字。新版刻度细节把这些语义门槛降低了不少。2. 5 分钟快速实现先跑通一版带精细刻度的仪表2.1 从组件面板开始打开 RAD Studio新建一个 VCL 应用或者 FMX 应用在组件面板找到 TeeChart 相关页。2026 的安装包自带仪表向导可以一键生成一个包含多个量规示例的窗体适合先跑起来看效果。手动方式也简单往窗体上放一个 TGauge设置最小值和最大值比如 0 到 100。接着看属性编辑器。在 TGauge 上找到 Axis 节点进入 Ticks 分支。这里就是新版刻度细节的集中区域。需要注意的是VCL 和 FMX 的属性树略有差异但 Ticks 分支的位置基本一致。如果有版本差异导致找不到某个属性直接在对象检查器右上角搜索 “Tick” 就能定位。我习惯先在可视化编辑器里调一组参数确认效果后再复制为代码。因为 TeeChart 版本较多不同年份版对旧项目有兼容别名直接在代码里写属性名容易踩编译坑。2.2 用代码配置一套标准刻度可视化操作方便但代码配置具备可复用性适合从一个项目复制到另一个项目。下面是一段结构示意2026 版把刻度细节聚合在 Ticks 子对象里重点是看主次刻度的语义。procedure TMainForm.SetupGauge; var G: TGauge; begin G : TGauge.Create(Self); G.Parent : Self; G.Align : TAlign.Client; G.Minimum : 0; G.Maximum : 100; G.Value : 42; // 2026 版刻度细节独立配置 with G.Axis.Ticks do begin MajorCount : 11; // 11 个主刻度0, 10, 20 ... 100 MinorCount : 4; // 每两个主刻度之间补 4 条次刻度 MajorLength : 16; // 主刻度线长 16 像素 MinorLength : 8; // 次刻度线长 8 像素 MajorWidth : 2; // 主刻度线宽 2 像素 MinorWidth : 1; // 次刻度线宽 1 像素 end; G.Axis.Labels.Font.Size : 9; G.Axis.Labels.Separation : 30; end;如果你在 IDE 里报错先到属性编辑器里看一眼当前版本的命名。TeeChart 历史上为兼容保留了不少别名同样一套属性可能出现在 Axis.Ticks 下也可能出现在 Series.Ticks 下。主刻度、次刻度的语义没有变化只要找到能编译通过的入口即可。2.3 参数选型速查不同仪表怎么配刻度刻度参数不是拍脑袋定的它和量程、主刻度间隔、次刻度间隔有明确的换算关系。我把几种常见仪表列成一张速查表方便直接套用仪表类型量程主刻度间隔主刻度数次刻度间隔MinorCount温度计-20℃ 到 40℃10℃72℃4车速表0 到 240km/h20km/h135km/h3压力表0 到 1.6MPa0.2MPa90.05MPa3液位计0 到 100%10%112%4我一直在强调 MinorCount 的含义它指的是“在两个主刻度之间补几条次刻度线”。比如主刻度间隔 10℃希望每个间隔再分成 5 小段每小段 2℃中间需要 4 条次刻度线所以 MinorCount 设成 4。这个“段数减一”的计算关系新人经常搞反实际调的时候要多留意。2.4 标签的取舍精细刻度不等于所有刻度都配上标签。标签只应该出现在主刻度上次刻度只画线不写字。如果每个次刻度都写数字量规会立刻变成一张无法快速阅读的网格表。还有单位问题。可以把单位放在标题或表盘中央而不是让每个标签都带上单位。比如温度计标签写“20”“40”就好标题栏写“℃”。这样能有效减少标签宽度避免相邻标签撞在一起。Labels.Separation这个属性控制两个标签之间的最小像素距离调大之后控件会自动跳过放不下的标签适配小尺寸表盘时非常有用。3. 刻度细节背后的几何逻辑VCL 和 FMX 的差异细节3.1 刻度位置怎么算出来的刻度线的本质是把数值映射到圆周上的一条短线。TeeChart 的圆形仪表默认从左侧下方开始扫过一个扇区比如开始角 -135 度结束角 135 度总角度范围是 270 度。角度的计算公式很简单Angle StartAngle (Value - Min) / (Max - Min) * (EndAngle - StartAngle)拿到角度之后刻度线外端坐标是X CenterX OuterRadius * Cos(Angle * PI / 180) Y CenterY OuterRadius * Sin(Angle * PI / 180)刻度内端把 OuterRadius 换成 InnerRadius再画一条线即可。这里有一个坐标系的坑VCL 的 Canvas 坐标原点在左上角Y 轴向下数学上常见的“角度逆时针增长”会被翻转。FMX 虽然也沿用类似坐标系但它在不同平台上的底层绘图方式不同。所以新旧版本在计算刻度位置时会出现某个平台刻度方向正确、另一个平台却镜像的问题。2026 版在这层上做了统一封装至少我实测下来同一套刻度配置在 Windows 和 macOS 上方向一致不再需要各写一份角度修正。3.2 为什么我一直强调整数对齐刻度线是单像素级别的绘制对象最怕的就是坐标落在浮点数上。假设一条刻度线理论位置是 X100.4在 100% 缩放时系统可能把它画到 100在 125% 缩放时又落到 101视觉上就会表现为刻度线在轻微抖动或变糊。这个问题在低分辨率屏幕上还不明显但在 Windows 150% 缩放下非常扎眼。旧版本里我经常看到次要刻度线的边缘出现半透明虚边其实就是浮点坐标引发的抗锯齿混合。2026 版据我观察对刻度绘制做了像素对齐优化刻度线边缘干净了许多。如果你在新版里依然看到模糊优先检查两点最小值最大值是否设成了很怪的小数比如 0.0001另一个是控件尺寸是否被布局系统拉伸成非整数宽高。3.3 VCL 和 FMX 的平台行为差异同一个刻度细节两套框架的行为并不完全一致。VCL 运行在 Windows 上坐标单位是真实像素GDI 的缩放由系统 DPI 决定。FMX 是跨平台框架坐标单位是 DIP也就是逻辑单位系统会自动按屏幕密度放大。这意味着同样的MinorWidth : 1在 VCL 里是一条物理像素线在 FMX 高分屏上可能只占半个逻辑单位显示效果更细。维度VCLFMX坐标基准像素DIP 逻辑单位缩放策略Windows DPI 虚拟化跨平台自适应缩放抗锯齿由 GDI/GDI 决定默认开启且更平滑刻度线宽建议整数像素支持浮点线宽如 1.2颜色一致性受系统主题影响跨平台更统一所以在 FMX 里做精细刻度我可以把次刻度线宽设成 0.8 或 1.2而不是只限定 1 和 2在 VCL 里则尽量用整数避免 GDI 渲染出半透明边。这个差异写在文档里可能没人注意但实际项目里经常是“VCL 调好了放到 FMX 就变细/变粗”的元凶。4. 把刻度细节用到真正的产品上4.1 不等间距刻度电机转速表的实现常规量规是等间距均分刻度但很多工业仪表并不是。比如电机转速表0 到 800 转是启动区刻度可以稀疏800 到 1600 转是工作区刻度要密1600 转以上是超速区不需要细分只需要警示。这种表不能靠均分刻度硬套必须用自定义刻度。TeeChart 的轴提供了 CustomTicks 集合可以完全接管刻度位置。下面这段代码基于常见命名var C: TTicksCollection; begin C : Gauge.Axis.CustomTicks; C.Clear; C.Add(0, 0); C.Add(800, 800); C.Add(1200, 1200); C.Add(1600, 1600); C.Add(2000, 2000); Gauge.Axis.CustomTicksOnly : True; // 关闭默认均分刻度 end;开启自定义刻度后2026 版还允许单独给某一条刻度设置更突出的样式。比如 1600 转这个点代表超速临界可以让它的刻度线更长、颜色变成红橙色。这样用户在实际操作时余光就能捕捉到指针是否越线不需要精确读数字。4.2 用颜色区让刻度表达状态刻度加颜色是仪表项目的常见需求。最直接的做法是在轴上添加颜色区让表盘背景在特定数值范围内变色。比如压力表 90 到 100 设为红色告警区域配合刻度颜色的变化视觉冲击力很强。颜色区相关属性在各版本中名字略有不同有的叫 ColorRanges有的叫 Zones本质上是一个集合。参考代码如下var Band: TColorBand; begin Band : Gauge.Axis.Bands.Add; Band.Start : 90; Band.EndValue : 100; Band.Color : clRed; Band.Transparency : 60; end;TeeChart 的 Transparency 数值和一般图像软件相反0 表示完全不透明100 表示完全透明。我建议放在 30 到 70 之间。太低会盖住刻度线太高则看不出警示效果。配合前面说的刻度独立配色可以让红色区域的次刻度也稍微偏红整个表盘的状态语义会非常清晰。4.3 几级刻度才够用看到新版支持更多刻度层级有人会想到“主刻度、次刻度、第三级刻度”全用上。我的建议是默认最多两级第三级只在极其特殊的情况下使用。原因不复杂人的视觉系统对线长、线宽、颜色、间距同时做区分的能力有限层次一旦超过两级信息层级就开始互相干扰。主刻度用来快速读数次刻度用来估算中间值。如果两个主刻度之间间隔小于 40 像素次刻度就应该直接关掉如果小于 25 像素连主刻度都要考虑减少几个。设计量规刻度不是把参数调满而是把信息密度控制在人类能一眼读出的范围内。5. 常见问题与排查技巧实录5.1 刻度线重绘时一抖一抖的很多仪表数据是定时刷新的比如每秒从 PLC 读取一次压力值。如果每读一次就设置一次 Value甚至每次都改了 Minimum 和 Maximum控件就会反复触发重绘刻度线看起来一直在抖。解决办法很简单批量更新时暂停自动重绘Gauge.AutoRepaint : False; try Gauge.Value : NewValue; Gauge.Minimum : NewMin; Gauge.Maximum : NewMax; finally Gauge.AutoRepaint : True; Gauge.Repaint; end;这段代码同时处理了值更新和量程动态切换的场景。2026 版对局部重绘做了裁剪优化但批量赋值依然是避免闪烁的正确姿势。5.2 刻度线全部挤成一团这类问题几乎都出在次刻度密度过高或者控件尺寸太小。设计方案时建议先量一下主刻度间距的实际像素再决定要不要保留次刻度。我自己的经验阈值是主刻度线之间至少能放下 35 个像素次刻度才有意义。如果你拖出来的表盘宽度只有 150 像素即使数据上需要次刻度视觉效果也会是黑色一坨。这时候宁可把表盘做大或者减少主刻度数量也别硬塞次刻度。5.3 标签和刻度对不上标签位置错位常见原因是字体变了或者标签的 Separation 设置太小。当刻度线外侧长度增加后标签如果还贴着内侧半径绘制就会互相重叠。把Axis.Labels.Separation适当调大或者把标签内容缩短。比如把“100.00”改成“100”效果会比强行调字体大小更明显。如果标签需要旋转我建议不要超过 45 度90 度旋转在量规里阅读体验非常差。5.4 跨平台颜色偏色FMX 项目在 Windows 上正常部署到 macOS 或 Android 后刻度颜色变了。这和平台的颜色管理机制有关不是 TeeChart 本身的问题。处理方式是颜色值不要依赖系统默认的 clXXX 常量尽量用十六进制写死。比如clRed在不同主题下可能被替换成系统强调色而$000000FF始终是纯红。刻度这类小尺寸元素颜色色偏一两度就容易被看出来定死最稳妥。下面是一张问题速查表方便现场定位现象常见原因处理方式刻度线抖动、出虚边坐标落在小数位DPI 缩放检查像素对齐用新版刻度绘制优化次刻度糊成一片MinorCount 过大或控件太小主刻度间距小于 40px 时关闭次刻度标签重叠Separation 太小或文本太长调大间距缩短显示文本重绘闪烁频繁赋值 Value/Min/MaxAutoRepaint 批量更新颜色和设计稿不一致使用了系统 clXXX 色用十六进制写死颜色升级后属性找不到版本间存在兼容别名用 IDE 搜索属性名按属性树路径设置还有一个容易踩的坑旧项目升级到 2026 后如果直接把工程拿来编译刻度相关属性可能没有自动映射。不要指望编译器一次性通过。我通常新建一个空窗体从面板重新拖一个 TGauge把属性重新设一遍再对比旧的初始化代码。这样最省时间也最容易确认新版本的属性路径。6. 量规刻度设计上的一些个人偏好最后聊点自己的习惯。看一个量规做得好不好我一般截一张图把屏幕亮度调低然后看主刻度线、次刻度线、标签、指针这四层能否一眼分开。能分开说明刻度细节到位不能分开就继续调 MajorLength、MinorLength 和颜色。不考虑特殊场景我偏好主刻度长度比次刻度至少多 60%线宽多 1px颜色加一点对比。深色背景仪表上主刻度用亮度 240 的灰度次刻度用 160标签用 220指针用高饱和橙色这三层在强光下也认得出。刻度数量上我一般把主刻度压到 6 到 12 个之间太多会让读表变成数格子太少又没有分段参考。次刻度一个主区间最多 4 条超过 4 条视觉上就开始发毛。最后还有一条别为了“细”把刻度做到 1px 以下。现代高分屏和高刷屏对细线的还原并不友好稍微模糊就会显得整个表盘廉价。宁可要 2px 的清晰边界也不要 1px 的“精致”但发虚。这个原则在 VCL 和 FMX 里都适用尤其是 FMX浮点线宽听起来很灵活实际用起来对渲染质量的要求比整数像素更高。