企业官网建设流程全解析

做仪表盘项目这些年，我对图表控件的挑选一直很挑剔。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 的含义：它指的是“在两个主刻度之间补几条次刻度线”。比如主刻度间隔 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 为什么我一直强调整数对齐

刻度线是单像素级别的绘制对象，最怕的就是坐标落在浮点数上。假设一条刻度线理论位置是 X=100.4，在 100% 缩放时系统可能把它画到 100，在 125% 缩放时又落到 101，视觉上就会表现为刻度线在轻微抖动或变糊。

这个问题在低分辨率屏幕上还不明显，但在 Windows 150% 缩放下非常扎眼。旧版本里我经常看到次要刻度线的边缘出现半透明虚边，其实就是浮点坐标引发的抗锯齿混合。2026 版据我观察对刻度绘制做了像素对齐优化，刻度线边缘干净了许多。如果你在新版里依然看到模糊，优先检查两点：最小值最大值是否设成了很怪的小数，比如 0.0001；另一个是控件尺寸是否被布局系统拉伸成非整数宽高。

3.3 VCL 和 FMX 的平台行为差异

同一个刻度细节，两套框架的行为并不完全一致。VCL 运行在 Windows 上，坐标单位是真实像素，GDI 的缩放由系统 DPI 决定。FMX 是跨平台框架，坐标单位是 DIP，也就是逻辑单位，系统会自动按屏幕密度放大。这意味着同样的MinorWidth := 1，在 VCL 里是一条物理像素线，在 FMX 高分屏上可能只占半个逻辑单位，显示效果更细。

所以在 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始终是纯红。刻度这类小尺寸元素，颜色色偏一两度就容易被看出来，定死最稳妥。

下面是一张问题速查表，方便现场定位：

还有一个容易踩的坑：旧项目升级到 2026 后，如果直接把工程拿来编译，刻度相关属性可能没有自动映射。不要指望编译器一次性通过。我通常新建一个空窗体，从面板重新拖一个 TGauge，把属性重新设一遍，再对比旧的初始化代码。这样最省时间，也最容易确认新版本的属性路径。

6. 量规刻度设计上的一些个人偏好

最后聊点自己的习惯。看一个量规做得好不好，我一般截一张图，把屏幕亮度调低，然后看主刻度线、次刻度线、标签、指针这四层能否一眼分开。能分开，说明刻度细节到位；不能分开，就继续调 MajorLength、MinorLength 和颜色。

不考虑特殊场景，我偏好主刻度长度比次刻度至少多 60%，线宽多 1px，颜色加一点对比。深色背景仪表上，主刻度用亮度 240 的灰度，次刻度用 160，标签用 220，指针用高饱和橙色，这三层在强光下也认得出。刻度数量上，我一般把主刻度压到 6 到 12 个之间，太多会让读表变成数格子，太少又没有分段参考。次刻度一个主区间最多 4 条，超过 4 条视觉上就开始发毛。

最后还有一条：别为了“细”把刻度做到 1px 以下。现代高分屏和高刷屏对细线的还原并不友好，稍微模糊就会显得整个表盘廉价。宁可要 2px 的清晰边界，也不要 1px 的“精致”但发虚。这个原则在 VCL 和 FMX 里都适用，尤其是 FMX，浮点线宽听起来很灵活，实际用起来对渲染质量的要求比整数像素更高。