图表与可视化
Chart（Chart.js 折线图、柱状图、饼图、环形图、雷达图、极坐标图、气泡图、散点图）、Gauge、以内联 SVG 呈现的 Diagram，以及基于 Leaflet 的 Map。
查看该家族 →
精选 · sgcHTML
您的后端本来就会说 HTML
用 Pascal 构建整个 Web 应用。服务器端 HTML 组件渲染 Bootstrap 5 标记，htmx 让每一次点击保持交互，WebSockets 把实时更新推送到已打开的页面。无需 npm，无需 JavaScript 构建步骤。
- Bootstrap 5 + htmx
- 基于 WebSockets 的实时更新
- 无需 JavaScript
- Delphi · C++ Builder · .NET
uses
sgcHTML_Component_StatCard, sgcHTML_Component_Chart,
sgcHTML_Component_Grid, sgcHTMX_Engine_Server;
// 1. KPI row, three stat cards
FBody :=
TsgcHTMLComponent_StatCard.Build('Monthly Revenue', '$48,200',
scSuccess, stUp, '12.5%', 'kpiRevenue', sgBlueViolet) +
TsgcHTMLComponent_StatCard.Build('Orders Today', '1,284',
scSuccess, stUp, '4.1%', 'kpiOrders', sgBlueViolet) +
TsgcHTMLComponent_StatCard.Build('Live Users', '312',
scSuccess, stNeutral, 'live', 'kpiUsers', sgBlueViolet);
// 2. Chart
oChart.ChartType := ctBar;
oChart.AddLabel('Mon'); oChart.AddLabel('Tue'); oChart.AddLabel('Wed');
oChart.AddLabel('Thu'); oChart.AddLabel('Fri');
oChart.AddDataset('Orders', [42, 58, 51, 73, 66],
'#7C3AED', 'rgba(124,58,237,.25)', True);
FBody := FBody + oChart.HTML;
// 3. Grid, straight from a dataset
oGrid.ShowSort := True;
oGrid.ShowFilter := True;
oGrid.LoadFromDataSet(qryOrders);
FBody := FBody + oGrid.HTML;
oPage.BodyContent := FBody;
Response := oPage.GetHTML; // full Bootstrap page
// 4. Later, from any thread, push a live KPI
oHTMX.BroadcastFragment(
'<div id="kpiRevenue" hx-swap-oob="true">' +
CurrToStr(FRevenue) + '</div>');左侧是 Object Pascal，右侧是它所提供的页面，在浏览器中实时呈现。C++ Builder 和 C# 中使用相同的组件。