企业官网建设流程全解析

简介：面向 Delphi/C++Builder 开发者的 TeeChart Pro 2023.38 完整源代码包，聚焦 VCL 与 FMX 两套框架，适合需要深度定制、跨平台数据可视化的工程师与技术学习者。压缩包共 2000 个文件、约 21.02 MB，以 pas 源码为核心，覆盖 fmx/dfm 界面定义、res 资源、dpk/bpk 工程文件等，可清晰查看各模块的完整实现并重新编译。2023.38 表示 2023 年第 38 次更新，版本内置折线、柱状、饼图、雷达、热力图等丰富图表类型，支持缩放、平移、触控等交互，在 Windows、macOS、iOS、Android 上保持一致的体验。已有 280 人浏览学习。通过这份完整源码，不仅能深入理解 TeeChart 组件的事件结构与绘图机制，还能针对具体场景裁剪功能、修复缺陷或扩展业务图表样式，节省从零搭建图表引擎的时间，大幅提升桌面端和移动端数据展示项目的开发效率。

1. 源码版 TeeChart Pro 2023.38：图表库为什么值得选带源码的版本

TeeChart Pro 是 Delphi/C++Builder 生态里用得最广的商业图表控件，Steema 出品的这套库在 VCL 和 FMX 两个框架下都有完整实现，而标题里的 Source Code 这三个字母意味着你拿到的不是编译好的黑匣子运行库，而是整套能断点调试的 Delphi 源码。2023.38 对应 2023 年的发布版本，Windows 桌面和 macOS、iOS、Android 跨平台工程可以跑同一套出图代码。

源码版值在哪？图表行为不对、性能上不去、想加官方没提供的细节时，你能直接翻源码看实现，改完重编译自己的包，不用等官方排期。被实时曲线卡顿、坐标轴精度和跨平台渲染差异折磨过的上位机、桌面应用开发者，基本都在这个选择上折返过；如果只是画静态折线图，开源库就够，数据量上来、序列类型复杂之后，TeeChart Pro 源码版才是那条贵但值的路。

下面按我实际落地的路径写：安装注册、最小出图、参数调优、五个高频坑和一组进阶技巧。新手顺着步骤跑通，熟手直接拿走参数。

2. 源码版的核心价值：调试、定制与 VCL/FMX 选型

2.1 源码版和安装版的本质区别：断点、补丁和版本兼容

先分清手里的牌。TeeChart Pro 的常见交付形式有两种：带 IDE 安装向导的编译版，装完直接用，但库里是 .bpl 和 .dcu，看不到内部实现；另一种就是标题里的 Source Code 版，把 VCL 和 FMX 两套源码都给你。价格差一截，差的就是「可调试」三个字。

我一般会建议团队至少持有一份源码版，理由有三个。第一，断点能进内部。图表画得不对时，编译版只能靠猜，源码版直接进 TChart 的绘制方法打断点，看它怎么走绘图管线，是数据问题还是渲染问题一眼分清。第二，能打自己的补丁。官方修复有周期，遇到确定是库的 bug，源码版可以自己改、自己编译，等官方新版本出来再 diff 合并回去。第三，编译器兼容。Delphi 每年升级，老版本编译好的运行时在新 IDE 下经常装不上，源码在手，用当前编译器重编一份才是根治。

2.2 VCL 与 FMX 的真实差异：渲染后端、高 DPI 与移动端

VCL 版只跑 Windows，TeeChart 在 VCL 下走传统 GDI 渲染，也支持 Direct2D 加速；FMX 版跑在 FireMonkey 的抽象 Canvas 上，Windows、macOS、iOS、Android 共用绘图接口，但各平台实际渲染后端不同，这带来两个直接影响。

第一个影响是抗锯齿和字体指标。同一个折线图，VCL 在 Windows 上画出来线条更锐，FMX 在 macOS 走 Quartz、在 Android 走对应的平台后端，线条平滑度、字体行高、文本测量都有差异。你没法要求两套框架像素级一致，能做的是把字号、边距这类度量参数在应用里统一配置，别依赖默认值。第二个影响是高 DPI。VCL 需要自己在 DPI 变化时处理缩放，FMX 多数情况由框架接管，但 TeeChart 里的字体和画笔宽度如果写死绝对值，高分屏下照样糊。我的习惯是：凡涉及屏幕像素的常量，用当前 Canvas 的 DPI 做一次换算，不信任何写死的默认值。

2.3 源码包目录结构与 IDE 路径配置：先认清手里的牌

拿到源码包后先别急着拖控件。源码版的目录一般按 VCL 和 FMX 分成两棵子树，公共运行时（坐标轴、序列基类、数据访问）和平台渲染层分开存放。装完之后最重要的一件事，是把源码路径按正确顺序加进 IDE 的 Library 路径：先公共目录，再平台目录，最后才是你的项目目录。顺序错了，IDE 可能捡到旧版本的同名单元，后面调试时断点进的源码和你实际跑的不是同一份，这是源码版最典型的翻车现场。

路径配好后，建议做一次全量编译验证：打开运行时包和设计期包，全部 Build 一遍，成功后 IDE 组件面板会出现 TChart、TLineSeries 这一组控件。这一步能跑通，说明源码、路径、编译器三者匹配，可以进下一章的最小出图了。

3. 把 TeeChart Pro 装进项目：最小可运行的三条路径

3.1 源码编译与组件注册：先让 IDE 认识这套库

首次使用源码版，最稳的路径不是把 .pas 拖进项目，而是把源码里组织好的包编译一遍。用 IDE 打开 VCL 和 FMX 各一套运行时包（.dproj），菜单里 Build，生成 .bpl；随后打开设计期包，Build 后 Install，组件面板里出现 TeeChart 页签。两步都成功，再把源码目录按 2.3 的顺序加进 Search Path。

提示：Build 时报 File not found，多半是 Search Path 没配全，先把源码目录本身加进去再编译，别急着加自己项目的路径。

3.2 拖控件出图：序列编辑器的最小用法

组件面板里放一个 TChart 到窗体上，双击打开图表编辑器，Series 页签里新增一条 Line 类型序列，运行期往序列里塞数据就能出图。这个编辑器本身就是源码版的一部分，你点哪个页签，就是在调哪个属性。

// VCL 下最简运行期赋值 Chart1.Series[0].AddXY(1, 10, 'A', clRed); Chart1.Series[0].AddXY(2, 20, 'B', clBlue);

AddXY 四个参数是 X 值、Y 值、标签和颜色，标签显示在序列 Marks 里，颜色只影响对应标记。这一行就能出图，但有个新手常踩的坑：用序号取 Series 依赖创建顺序，代码一多就乱，建议后面用别名变量持有序列引用。

3.3 纯代码创建图表：FMX 下的一条龙流程

拖控件适合原型，正式项目尤其是跨平台项目，我习惯纯代码创建。FMX 窗体在不同设备上的对齐规则和 VCL 不同，拖出来的布局经常在高分屏上变形。纯代码完整流程如下：

uses System.UIConsts, FMXTee.Chart, FMXTee.Series; procedure TFormMain.ShowChart; var Chart1: TChart; Line1: TLineSeries; I: Integer; begin Chart1 := TChart.Create(Self); Chart1.Parent := Self; Chart1.Align := TAlignLayout.Client; Line1 := TLineSeries.Create(Chart1); Chart1.AddSeries(Line1); for I := 0 to 99 do Line1.AddXY(I, Sin(I / 10) * 100, '', TAlphaColorRec.Blue); Chart1.Title.Text.Clear; Chart1.Title.Text.Add('Sin 波形'); Chart1.Margins.Left := 12; Chart1.Margins.Right := 12; end;

组装顺序是固定的：先创建 Chart1 并接管布局，再创建序列并 AddSeries，最后塞数据。顺序倒过来会出问题——序列还没有宿主时 AddXY，数据进空序列，界面出来序列是断的。TAlphaColorRec 是 FMX 的颜色体系，跟 VCL 的 clRed 互不相通，跨平台代码别混用。

注意：FMX 下 Create 的组件记得传 Owner（这里是 Self），否则生命周期不受窗体管理，切页面后可能泄漏。

3.4 序列类型怎么选：折线、快速线与面积

TeeChart Pro 自带几十种序列类型，日常项目 90% 也就用四五种：TLineSeries 管普通折线，TFastLineSeries 管大数据量折线，TAreaSeries 管面积，TBarSeries 和 TPieSeries 管统计展示。选型只看两个指标：数据点数量级和是否需要逐点样式。

数据点几百以内且需要逐点样式（颜色、标记、值），用 TLineSeries；数据点成千上万且只关心趋势，换 TFastLineSeries。FastLine 不做逐点样式渲染，画线直接连点，CPU 占用差一个数量级。面积图本质是折线加填充，API 和 TLineSeries 基本一致，AddXY 照用。后面第 5 章的大数据卡顿，也围绕 TLineSeries 展开。

4. 坐标轴、序列与数据源：把图表调成自己要的样子

4.1 坐标轴自动范围为什么抖动：Automatic 与 SetMinMax 的取舍

坐标轴是图表最容易看出业余感的地方。默认情况下左右轴和下轴都开着 Automatic，数据变化时范围跟着变，这是实时图的基本体验。但这个默认有坑：数据小幅度来回波动时，上下限跟着来回跳，图看起来在呼吸。专业图表一般会把范围固定，或只留一个合理缓冲。

// VCL 与 FMX 通用：固定左轴范围 Chart1.Axes.Left.Automatic := False; Chart1.Axes.Left.AutomaticMinimum := False; Chart1.Axes.Left.AutomaticMaximum := False; Chart1.Axes.Left.SetMinMax(-120, 120); Chart1.Axes.Left.Increment := 30; Chart1.Axes.Bottom.Automatic := False; Chart1.Axes.Bottom.SetMinMax(0, 100);

SetMinMax 是同时设置上下限的标准入口，比分别赋 Minimum/Maximum 更安全，因为它一次性触发坐标轴重算。Increment 不设时，TeeChart 会自己挑一个漂亮步长（1、2、5 的倍数），但漂亮步长在实时图里会让刻度位置每次都在变，视觉上更乱，固定步长才是实时波形的常见做法。如果只是不想让范围跳太狠，也可以保留 Automatic，打开 Margin 参数，让上下限各自留 5%~10% 余量，效果柔和很多。

4.2 序列数据源：把业务数据喂给图表的三条路线

序列数据来源有三条路线，复杂度递进，灵活度也递进。手写 AddXY 适合临时数据和测试脚本；绑定数据集适合报表型图表，TeeChart 支持直接把数据集指定为 DataSource；运行时内存数组适合高频数据。

// 路线一：手动逐点 Line1.Clear; Line1.AddXY(Time, Value, '', Chart1.GetDefaultColor(0)); // 路线二：绑定数据集（VCL 常见做法） Line1.DataSource := DataSource1; // 指定数据集 Line1.XValues.ValueSource := 'TimeField'; // X 字段名 Line1.YValues.ValueSource := 'ValueField'; // Y 字段名

路线二的 ValueSource 是字符串属性，运行时解析字段名，字段写错不会编译报错，只会让数据全变 0，写完务必看数据量而不是只看线形。路线三配合 6.1 一起看，这里先记住结论：高频场景下，绝不一次数据一次 AddXY 加自动重绘，那是把性能往死里打。

4.3 外观配置：颜色、字体和图例的跨平台差异

图表外观集中在 Chart 和序列两级。Chart 级调 Title、Legend、Margins 和全局 Font，序列级调线宽、点样式、颜色和 Marks。新手最容易忽略图例，默认开，但位置、字号、透明度在平台上默认值差距很大。

Chart1.Legend.Visible := True; Chart1.Legend.Alignment := laTop; Chart1.Legend.Font.Size := 9; Chart1.Font.Size := 10; // 全局字体，刻度文字跟随 Chart1.Title.Font.Size := 14; Line1.SeriesColor := TAlphaColorRec.Coral; // FMX 写法 Line1.LinePen.Width := 2; Line1.Marks.Visible := False; // 点值标签默认关，打开拖性能

这里有个跨平台细节：VCL 下序列颜色是 TColor（clCoral），FMX 下是 TAlphaColor（TAlphaColorRec.Coral），类型完全不通。跨平台项目要共享配色，建议自建一个颜色映射函数，输入业务语义输出各平台颜色类型，界面代码不碰具体色值，换肤也方便。Marks 是另一个性能点，每画一个点就做一次文本布局计算，数据上千还开着 Marks 基本等于自杀。

5. TeeChart 源码版避坑现场：五个高频问题与排查路径

5.1 FMX 下中文标题变方块

现象：VCL 下中文标题正常，同一份代码切到 FMX 后，Android 和 iOS 上中文全变方块，部分 Windows FMX 程序中文发虚。

原因：FMX 的 Canvas 走平台字体管理，默认字体族里不一定包含中文字形；VCL 下 GDI 字体回退处理得好，FMX 则坚持用拿到的字体名，没有字形就直接画豆腐块。

解决：创建图表后第一时间显式设置字体族，Windows 用 Microsoft YaHei，Android 用系统无衬线中文字体，iOS 最稳妥是不设、让系统回退。

Chart1.Font.Name := 'Microsoft YaHei'; // Windows FMX

5.2 数据量上千后实时刷新卡死

现象：往 TLineSeries 循环 AddXY，每秒 50 个点，跑两三分钟界面明显卡顿，CPU 居高不下。

原因：AutoRepaint 默认为 True，每 AddXY 一次触发一次全图重绘；数据量上来后，重绘耗时超过数据到达间隔，队列积压就卡死。叠加 Marks 后更严重。

解决：关自动重绘、开双缓冲、批量提交；数据量大换 TFastLineSeries；Marks 必须关。这条配置是我被卡顿折磨过后的血泪经验，优先级最高。

Chart1.AutoRepaint := False; Chart1.BufferDisplay := True; for I := Low(Buf) to High(Buf) do FastLine1.AddXY(X[I], Y[I], '', clRed); Chart1.Repaint; // 这一行才真正绘制

5.3 坐标轴范围呼吸不停、刻度乱跳

现象：实时波形图，Y 轴上下限每隔几十毫秒变化一次，刻度线和网格线不断跳动。

原因：Automatic 全开，TeeChart 按当前数据窗口内的最大最小值重新算范围，数据一动范围就动。

解决：固定业务范围，或只开单向自动；需要动态范围时，把 SetMinMax 的调用频率压到每秒一次，而不是每数据点一次。

5.4 序列颜色每次运行都不一样

现象：同一张图，今天跑是蓝色，明天变橙色，加载保存的图表文件后颜色对不上。

原因：序列没显式设置 SeriesColor，TeeChart 创建时按序列序号从调色板取色；调色板样式不同、序列创建顺序变了，取到的颜色就变了。这种问题最玄学，但原因其实很机械。

解决：凡是需要稳定的序列，创建后立刻显式赋颜色；再固定 Chart.PaletteStyle，不依赖默认色板。

Line1.SeriesColor := clNavy; // VCL Chart1.PaletteStyle := psRainbow; // 固定调色板

5.5 源码包全量编译后 IDE 报 EAccessViolation

现象：按第 3 章步骤 Build 并 Install 成功，新建窗体拖入 TChart 后 IDE 无响应，或运行时报找不到某个 .bpl；断点进的源码和实际行为对不上。

原因：绝大多数是混合版本问题——旧版本 TeeChart 还在搜索路径里，或旧 .dcu/.identcache 缓存没清，新包旧包打架。

解决：卸载旧组件，把 TeeChart 相关目录从 Search Path 清干净，删缓存、重开 IDE，再全量 Build。排查顺序：先看 IDE Packages 列表是否只有一份 TeeChart，再看 Search Path 顺序，最后才怀疑源码本身。

提示：源码版最大的优势和最大的陷阱是同一件事——编译环境里任何残留旧包都会导致源码对不上行为。遇到诡异问题先做干净环境验证，别直接怀疑库有 bug。

6. 进阶技巧：实时波形模板、导出与自定义叠加层

6.1 实时波形的高性能模板

实时图表的本质是滚动窗口、批量提交、固定坐标轴。初始化时把 AutoRepaint 设 False、BufferDisplay 设 True、用 TFastLineSeries、固定左右轴范围；数据到达时维护一个滑动窗口，超出窗口就裁剪。三个参数组合正确，每秒几百个点很宽松；默认配置下每秒 50 个点就是极限，这个差距就是源码版调试能直接看见的优化空间。

6.2 导出图片与 AfterDraw 自定义叠加

导出图片两个入口：直接调保存方法，或走 TeeExport 流程带分辨率、透明背景参数。服务器端生成报表时，导出前先把 Width/Height 设成目标尺寸，别依赖窗体尺寸。

Chart1.SaveToBitmapFile('chart.bmp'); // 高分辨率导出：TeeSaveToFile(Chart1, 'chart.png')

最后给一个源码版才用得顺的技巧：Chart.AfterDraw 事件里自己画东西。这个事件发生在 TeeChart 绘制完成后，坐标已对齐，可以直接画阈值线、标注区域。核心是 CalcXPosValue 和 CalcYPosValue 这两个坐标转换函数，把业务值转成屏幕像素，所有自定义绘制都靠它们定位。FMX 下 Canvas 类型和颜色体系不同，我现在的习惯是把绘图代码隔离在一个方法里，跨平台只保留参数差异，这个习惯帮我躲过了不少次重复调试的坑。希望帮到你。

本文还有配套的精品资源，点击获取