无需编写布局代码即可构建业务仪表盘。把磁贴放到 12 列网格上，在每个磁贴中放入 KPI 卡片、图表、地图或报表预览，只需一个属性即可把整个界面切换为深色主题，并让用户拖动、调整大小并保存自己的布局。
四个分组，十一项功能，附带真实的组件和属性名称以及每个帮助主题的链接。标有“注册版”的功能不包含在免费的 .NET 社区版中。
自动为您放置磁贴的网格，以及展示数字的卡片。
布局与内容
仪表盘是一个磁贴网格，在任何窗口大小和任何 DPI 下都必须保持整齐。把仪表盘放到窗体上，添加磁贴，并为每个磁贴指定列、行和跨度。网格根据可用宽度计算列宽，按显示器 DPI 缩放间距和行高，当磁贴所需行数超出可显示范围时垂直滚动。重叠的磁贴每次下移一行，绝不会叠在一起。由于布局集中在一个引擎中，相同的磁贴单元格在 VCL、FireMonkey 和 .NET 视图上给出相同的排列。
TsgcVCLDashboard，带 Columns（默认 12）、RowHeight（120）、Gap 和 Padding（12）TsgcVCLDashboardTile，带 Col、Row、ColSpan 和 RowSpanLayout.PlacedCell 和 Layout.Rect 读取
布局与内容
当仪表盘的内容取决于用户或数据时，您不会想去计算坐标。将磁贴的列和行保持为 -1，自动流式排列会把它放入第一个空闲位置，从上到下扫描行、从左到右扫描列。只固定列时，磁贴会落到该列的第一个空闲行。同一个仪表盘中可以混用固定磁贴和流式磁贴。
AutoFlow 默认开启；新磁贴的 Col 和 Row 为 -1，跨度为 3 乘 2TsgcDashboardLayout 驱动 VCL、FireMonkey 和 .NET
布局与内容
磁贴是带可选标题栏的容器，因此可以承载您界面需要的任何内容：图表、表格、地图、PDF 查看器、报表预览或普通备注框。把控件的父级设为该磁贴，并将其对齐到客户区。Suite 演示在一个仪表盘中承载了 sgcCharts、sgcMaps、sgcPDF 和 sgcReports，全部遵循仪表盘主题。磁贴可以去掉标题栏，呈现整洁的满铺图表，也可以保留标题栏作为标题。添加磁贴时，仪表盘按行增长并垂直滚动。
Title 和 ShowHeaderParentTheme 让磁贴跟随仪表盘，或保留自己的 ThemeTsgcFMXDashboardTile 效果相同
布局与内容
每个仪表盘开头都是一行重要的数字：收入、订单、流失率、响应时间。KPI 卡片在一个组件中以大字号显示数值、图标、带文字的趋势箭头、页脚行和近期数值的小型迷你图。新数据到达时调用 AddValue，迷你图随之滚动；MaxPoints 决定保留多少历史数据。AccentColor 可让您按所测量的内容为卡片着色，卡片会跟随所在仪表盘的浅色或深色主题。
TsgcVCLKPICard，带 Title、Value、Icon、FooterText 和 AccentColorTrend：ktUp、ktDown 或 ktNeutral，带 TrendValue 文本AddValue、ClearValues 和 MaxPointsAddValue 是线程安全的，因此可由工作线程提供数据让用户自行安排起始页并保存，再通过网络为其提供数据。
用户布局与实时数据 仅限注册版
在共享的起始页上，每位用户都希望把不同的数字放在最前面。开启拖动后，用户可通过标题栏移动磁贴；开启调整大小后，角落的手柄可改变其跨度。鼠标移动时，目标单元格绘制在磁贴下方，磁贴会吸附到网格。按 Esc 取消。标记为锁定的磁贴永远不会移动。再结合下面的保存布局，每位用户都保留自己安排的起始页，而您仍可决定存在哪些磁贴。
AllowDrag 和 AllowResizeLocked 使其固定不动OnLayoutChanged社区版通过代码构建固定布局；运行时拖动和调整大小属于注册版。
阅读帮助主题用户布局与实时数据 仅限注册版
用户安排好的布局必须在重启后恢复。一次调用即可将网格参数以及每个命名磁贴的单元格和可见性写成紧凑的 JSON，另一次调用则应用它。磁贴按名称匹配，未知名称会被忽略，文本中缺失的磁贴保留其单元格，因此在新版本中添加磁贴后，旧的已保存布局仍可加载。JSON 小巧易读，因此您可以随应用程序提供默认布局，并提供一个重置按钮来重新加载它。
SaveLayout 和 LoadLayout 返回并应用 JSON 字符串SaveLayoutToFile、LoadLayoutFromFile、SaveLayoutToStream、LoadLayoutFromStream用户布局与实时数据 仅限注册版
运营界面显示的数值每秒都在变化。sgcDashboardWS 桥接从 sgcWebSockets 客户端的每条 JSON 消息中读取一个数字，并推送到卡片中，迷你图也一并更新。趋势箭头会自动跟随前一个数值。在 Delphi 2010 及更高版本中，文本更新在主线程中运行，因此客户端可以使用任何线程模式。非有效 JSON 的消息，或其路径不是数字的消息会被忽略，因此嘈杂的数据流绝不会破坏界面。
TsgcDashboardSource_WebSocket、TsgcDashboardSource_MQTT（带 Topic）和 TsgcDashboardSource_SSEValuePath 例如 data.items[0].value，ValueFormat 默认为 %.2fTitlePath 和 TrendValuePath 可将更多字段复制到卡片中OnValue 事件该桥接需要 sgcWebSockets。在社区版中，请通过 Value 和 AddValue 用代码为卡片提供数据。
阅读帮助主题整个界面风格统一，同样的卡片可输出为图像，同样的设计适用于每个目标平台。
主题、图像与平台
深色的控制室和明亮的办公室需要同一个界面的两种外观。设置仪表盘主题后，它会作用于每个磁贴、每张 KPI 卡片以及其中的 sgcUI 控件，因此图表、仪表和表格一起切换。主题类型与每个 sgcUI 产品使用的相同，所以整个应用程序可以遵循同一个设置。需要突出显示的磁贴可以保留自己的主题，而仪表盘的其余部分则跟随全局主题。
Theme := utDark 或 utLightParentTheme 跟随，或保留自己的 Theme主题、图像与平台
仪表盘上的数字常常也需要用在别处：晨报邮件、内部网页面或 PDF。TsgcDashboardKPI 无需窗口，也无需 VCL 或 FireMonkey 即可渲染同一张卡片，因此控制台程序、Windows 服务或 Linux64 服务器都能生成。宽度和高度为逻辑像素，缩放系数可生成清晰的高 DPI 图像。可用于定时报表：用仪表盘所用的同样查询构建卡片，并把图像附加到邮件中。
SaveToPNG 保存到文件或流，例如 320 乘 160、缩放 2 得到 640 乘 320 的图像SaveToSVG 输出清晰的矢量图Card.KPI.SaveToPNG 保存屏幕上卡片所显示的内容主题、图像与平台
只需编写一次仪表盘，即可复用设计。FireMonkey 仪表盘、磁贴和 KPI 卡片可在 Windows、macOS、iOS 和 Android 上运行，.NET 移植版则为 WinForms、WPF 和 Avalonia 提供相同的类。由于同一个布局引擎在所有平台上计算单元格，已保存的布局在每个目标平台上含义相同。每个目标平台的演示集也相同：Delphi 和 C++ Builder 提供 Basic、LiveKPI、SaveLayout 和 Suite，.NET 则提供 WinForms、WPF 和 Avalonia 版本。
TsgcFMXDashboard、TsgcFMXDashboardTile、TsgcFMXKPICardTsgcWinFormsDashboard、TsgcWinFormsKPICard 及其 WPF 和 Avalonia 对应组件预览显示的内容与打印机和 PDF 得到的完全一致。
打印、预览和 PDF
仪表板以整个看板图片的形式打印在一页上：所有未隐藏的磁贴，包括已滚出视图的磁贴，布局与屏幕上一致。磁贴中的每个 sgcUI 控件都由各自的渲染器绘制，因此 KPI 卡片、图表、仪表、网格、数据透视网格、日程视图和图示都会被打印。磁贴中的其他控件（例如备注框或标签）则留空。
Print 显示打印对话框或直接打印到默认打印机，ShowPrintPreview 打开带有翻页、缩放、页面设置、打印和 PDF 导出的预览PrintSettings 保存纸张、方向、页边距、缩放以及页眉和页脚文字，打印机、预览和 PDF 都使用它ExportToPDF 把页面写成一张带标签的图片（默认 192 dpi），并附上按阅读顺序列出磁贴标题的替代文本TsgcUIPDFOptions 的 PDFALevel 可为归档加上 PDF/A-2a 或 PDF/A-3a，可单独使用，也可与 PDF/UA 同时使用打印和预览包含在每个版本中，包括免费的社区版，可用于 VCL、FireMonkey、WinForms、WPF 和 Avalonia。在 FireMonkey 中，打印在 Windows 和 macOS 上可用，预览和 PDF 导出则适用于所有平台。PDF 导出需要 sgcUIPDF 桥接和已获许可的 sgcPDF（在 .NET 中为 NuGet 包 esegece.sgcUICore.sgcPDF），因此不包含在社区版中。
面向屏幕阅读器的 UI Automation、键盘和高对比度，无需任何设置。
无障碍
sgcDashboard 将仪表板及其磁贴连同标题和位置、每个磁贴中承载的控件，以及带有标题、值、单位和趋势的 KPI 卡片向 Microsoft UI Automation 公开。
无障碍功能在每个版本中默认开启，包括免费的社区版，可用于 VCL（Delphi 和 C++Builder 从 Delphi 7 到 Delphi 13 的每个版本）、Windows 上的 FireMonkey，以及 WinForms、WPF 和 Avalonia。在 Delphi 和 C++Builder 中，AccessibleName 和 AccessibleDescription 设置向 UI Automation 公开的名称和说明，在 .NET 中，各框架标准的无障碍名称和帮助文本起同样的作用。请参见无障碍符合性报告。
sgcUI 套件演示中的 sgcDashboard：使用内置模拟数据、可离线运行的完整应用程序。
作为仪表板磁贴的带迷你趋势线的 KPI 卡片、告警磁贴、树状图和 VaR 仪表。
Altamira Markets →
工艺图周围带迷你趋势线的 OEE 卡片、瓶数计数器和告警磁贴。
Altamira Plant →
ERP 仪表板：带迷你趋势线的 KPI 卡片、收入图表、仪表和客户地图。
Altamira ERP →
同一页上的组合 KPI 卡片（带迷你趋势线）、健康度仪表和图表。
Altamira PMO →
ERP 的起始页以带趋势箭头的 KPI 卡片显示收入、未结订单、逾期发票和流失率，下方磁贴中是销售图表和重点客户表格。每晚服务会将同样的卡片渲染为 PNG，用于管理层邮件，数字和颜色与屏幕上完全一致。
工厂中的墙面屏幕显示产线吞吐量、温度和报警数量。MQTT 数据源在读数到达时将其推送到各自的卡片中，迷你图显示最近几分钟的变化，深色主题让房间在夜间保持安静。相邻磁贴中的仪表和图表遵循同一个主题。
在由多种角色使用的桌面客户端中，每位用户都把重要的磁贴拖到顶部，调整最常关注的图表大小，并隐藏其余内容。布局按用户保存为 JSON，并在下次登录时恢复，更新中新增的磁贴则会自动流入空闲空间。
Delphi、C++ Builder 和 C# 中使用相同的 API：网格上的磁贴、每个磁贴中带迷你图的 KPI 卡片、深色主题和已保存的布局。拖动和布局文件需要注册版。
12 列网格上的磁贴，每个磁贴中有一张 KPI 卡片，采用深色主题，布局保存到文件。拖动和布局文件需要注册版。
uses
SysUtils, Controls, sgcUICore_Theme, sgcDashboard_KPI, sgcDashboard_VCL, sgcDashboard_KPI_VCL;
procedure AddKPI(aDash: TsgcVCLDashboard; const aName, aTitle, aValue,
aChange: string; aCol: Integer; aTrend: TsgcDashboardKPITrend);
var
oTile: TsgcVCLDashboardTile;
oCard: TsgcVCLKPICard;
begin
oTile := TsgcVCLDashboardTile.Create(aDash.Owner);
oTile.Name := aName;
oTile.Parent := aDash;
oTile.Col := aCol;
oTile.ColSpan := 4;
oTile.Title := aTitle;
oCard := TsgcVCLKPICard.Create(aDash.Owner);
oCard.Parent := oTile;
oCard.Align := alClient;
oCard.Value := aValue;
oCard.Trend := aTrend;
oCard.TrendValue := aChange;
oCard.AddValue(47);
oCard.AddValue(52);
end;
procedure BuildDashboard(aOwner: TWinControl);
var
oDash: TsgcVCLDashboard;
begin
oDash := TsgcVCLDashboard.Create(aOwner);
oDash.Parent := aOwner;
oDash.Align := alClient;
// drag, resize and layout files need the Registered edition
oDash.AllowDrag := True;
AddKPI(oDash, 'tileRevenue', 'Revenue', '12,480 USD', '+4.2 %', 0, ktUp);
AddKPI(oDash, 'tileOrders', 'Orders', '1,284', '+8.1 %', 4, ktUp);
oDash.Theme := utDark;
if FileExists('layout.json') then
oDash.LoadLayoutFromFile('layout.json');
oDash.SaveLayoutToFile('layout.json');
end;C++ Builder 中的同一个仪表盘，使用生成的头文件。
#include <vcl.h>
#include "sgcUICore_Theme.hpp"
#include "sgcDashboard_KPI.hpp"
#include "sgcDashboard_VCL.hpp"
#include "sgcDashboard_KPI_VCL.hpp"
void AddKPI(TsgcVCLDashboard *aDash, const String aName, const String aTitle,
const String aValue, const String aChange, int aCol,
TsgcDashboardKPITrend aTrend)
{
TsgcVCLDashboardTile *oTile = new TsgcVCLDashboardTile(aDash->Owner);
oTile->Name = aName;
oTile->Parent = aDash;
oTile->Col = aCol;
oTile->ColSpan = 4;
oTile->Title = aTitle;
TsgcVCLKPICard *oCard = new TsgcVCLKPICard(aDash->Owner);
oCard->Parent = oTile;
oCard->Align = alClient;
oCard->Value = aValue;
oCard->Trend = aTrend;
oCard->TrendValue = aChange;
oCard->AddValue(47);
oCard->AddValue(52);
}
void BuildDashboard(TWinControl *aOwner)
{
TsgcVCLDashboard *oDash = new TsgcVCLDashboard(aOwner);
oDash->Parent = aOwner;
oDash->Align = alClient;
// drag, resize and layout files need the Registered edition
oDash->AllowDrag = true;
AddKPI(oDash, "tileRevenue", "Revenue", "12,480 USD", "+4.2 %", 0, ktUp);
AddKPI(oDash, "tileOrders", "Orders", "1,284", "+8.1 %", 4, ktUp);
oDash->Theme = utDark;
if (FileExists("layout.json"))
oDash->LoadLayoutFromFile("layout.json");
oDash->SaveLayoutToFile("layout.json");
}C# 中的 WinForms 版本，类名与 Delphi 相同。
using System.Windows.Forms;
using esegece.sgcDashboard;
using esegece.sgcUICore;
public static class KpiDashboard
{
// One KPI tile with a sparkline, placed on the dashboard grid.
static void AddKPI(TsgcWinFormsDashboard aDash, string aName, string aTitle,
string aValue, string aChange, int aCol, TsgcDashboardKPITrend aTrend)
{
var oTile = new TsgcWinFormsDashboardTile();
oTile.Name = aName;
oTile.Title = aTitle;
oTile.Col = aCol;
oTile.ColSpan = 4;
var oCard = new TsgcWinFormsKPICard();
oCard.Dock = DockStyle.Fill;
oCard.Value = aValue;
oCard.Trend = aTrend;
oCard.TrendValue = aChange;
oCard.AddValue(47);
oCard.AddValue(52);
oTile.Controls.Add(oCard);
aDash.Controls.Add(oTile);
}
public static void Build(Form aForm)
{
var oDash = new TsgcWinFormsDashboard();
oDash.Dock = DockStyle.Fill;
oDash.Theme = TsgcUITheme.utDark;
oDash.AllowDrag = true; // drag and layout files: Registered edition
AddKPI(oDash, "tileRevenue", "Revenue", "12,480 USD", "+4.2 %", 0, TsgcDashboardKPITrend.ktUp);
AddKPI(oDash, "tileOrders", "Orders", "1,284", "+8.1 %", 4, TsgcDashboardKPITrend.ktUp);
AddKPI(oDash, "tileChurn", "Churn", "2.4 %", "-0.3 %", 8, TsgcDashboardKPITrend.ktDown);
aForm.Controls.Add(oDash);
if (System.IO.File.Exists("layout.json"))
oDash.LoadLayoutFromFile("layout.json");
oDash.SaveLayoutToFile("layout.json");
}
}dotnet add package esegece.sgcDashboard.WinFormsDelphi 和 C++ Builder 各四个演示，.NET 六个，全部包含在预编译演示下载中。
12 列网格上的六个磁贴和四张 KPI 卡片，其他磁贴中有日志和列表。这是了解布局引擎和主题切换的最快方式。
由 sgcDashboardWS 桥接提供数据的 KPI 卡片，消息到达时数值跳动、迷你图增长。需要 sgcWebSockets。
通过标题栏拖动磁贴，通过手柄调整大小，将布局保存为 JSON，重启演示后即可看到布局已恢复。
在一个带主题的仪表盘中，集合了来自其他 sgcUI 产品的图表、地图、PDF 查看器、报表预览和 KPI 卡片。
适用于 WinForms、WPF 和 Avalonia 的 Basic、BasicWpf、BasicAvalonia、LiveKPI、SaveLayout 和 Suite。
sgcDashboard 包含在 sgcUI Professional 和 Enterprise 中，也可单独购买。sgcDashboard 还包含在 All-Access 套餐中。
免费的社区版（NuGet 上的 esegece.sgcDashboard.Community）包含网格、磁贴、带迷你图的 KPI 卡片、无界面 PNG 和 SVG 以及主题。它不包含运行时拖动与调整大小、SaveLayout 和 LoadLayout，以及 sgcDashboardWS 桥接。
| 功能 | 社区版（免费） | 注册版 |
|---|---|---|
| 带跨度和自动流式排列的磁贴网格 | ✓ | ✓ |
| 带趋势和迷你图的 KPI 卡片 | ✓ | ✓ |
| 浅色和深色主题 | ✓ | ✓ |
| 输出为 PNG 和 SVG 的无界面 KPI 卡片 | ✓ | ✓ |
| 运行时拖动并调整磁贴大小 | − | ✓ |
| SaveLayout 和 LoadLayout | − | ✓ |
| sgcDashboardWS 实时数据源（WebSocket、MQTT、SSE） | − | ✓ |
| 组件 | 说明 |
|---|---|
| TsgcVCLDashboard、TsgcFMXDashboard | 适用于 VCL 和 FireMonkey 的网格容器。 |
| TsgcVCLDashboardTile、TsgcFMXDashboardTile | 带标题、可承载任意控件的磁贴。 |
| TsgcVCLKPICard、TsgcFMXKPICard | 带趋势、页脚和迷你图的 KPI 卡片。 |
| TsgcDashboardKPI | 框架无关的无界面 KPI 卡片，支持 PNG 和 SVG 导出。 |
| TsgcDashboardLayout | 布局引擎，在 Linux64 上同样可用。 |
| TsgcDashboardSource_WebSocket、_MQTT、_SSE | sgcDashboardWS 桥接的实时 KPI 数据源（仅注册版）。 |
| 目标 | 组件 | 平台 |
|---|---|---|
| Delphi 7 到 13，VCL | TsgcVCLDashboard | Win32 与 Win64 |
| Delphi XE6 到 13，FireMonkey | TsgcFMXDashboard | Windows、macOS、iOS 和 Android |
| C++ Builder 2007 到 13 | TsgcVCLDashboard、TsgcFMXDashboard | 生成的 .hpp 头文件和静态库 |
| Delphi 10.2 到 13，框架无关 | TsgcDashboardLayout、TsgcDashboardKPI | Linux64，布局引擎和无界面 KPI 卡片 |
| .NET Framework 4.7.2、.NET 8、9 和 10 | TsgcWinFormsDashboard，以及 WPF 和 Avalonia 对应组件 | WinForms、WPF 和 Avalonia |
可以，在注册版中。AllowDrag 和 AllowResize 让用户通过标题栏移动磁贴并通过手柄调整大小，SaveLayoutToFile 或 SaveLayout 将结果存储为 JSON。LoadLayout 按磁贴名称恢复，因此布局在您的应用程序升级后依然有效。
任何控件。磁贴是一个容器：把控件的父级设为该磁贴，并将其对齐到客户区。Suite 演示承载了图表、地图、PDF 查看器和报表预览，磁贴中的 sgcUI 控件会遵循仪表盘主题。
通过代码设置 Value 并调用线程安全的 AddValue。使用注册版和 sgcWebSockets 时，sgcDashboardWS 数据源会按 ValuePath 从每条 WebSocket、MQTT 或 SSE 消息中读取一个数字，并为您更新卡片及其趋势。
仪表盘和磁贴、带自动流式排列的网格布局、带迷你图的 KPI 卡片、无界面 PNG 和 SVG 以及主题。它不包含运行时拖动与调整大小、SaveLayout 和 LoadLayout，以及 sgcDashboardWS 桥接。请参阅版本。
可以。TsgcFMXDashboard、其磁贴和 KPI 卡片自 Delphi XE6 起可在 Windows、macOS、iOS 和 Android 的 FireMonkey 上运行，使用与 VCL 仪表盘相同的布局引擎。尺寸与设备无关，并跟随窗体缩放。
可以。TsgcDashboardKPI 无需窗口，也无需 VCL 或 FireMonkey 即可绘制卡片，并将 PNG 或 SVG 写入文件或流。它可在所有平台构建，包括 Linux64，因此服务或 Web 服务器都可以生成这些图像。
支持。所有尺寸均为与设备无关的像素。VCL 仪表盘按显示器 PPI 除以 96 进行缩放，FireMonkey 仪表盘按窗体缩放比例缩放，因此磁贴、间距和行高在任何显示器上都保持比例。
