六个全新 sgcHTML 视觉组件：Heatmap、Sparkline、CandlestickChart、TreeMap、QRCode 和 Barcode

这是介绍 sgcHTML 新增 25 个组件系列文章中的第二篇。这一批组件的核心是像素：六个组件直接在服务器端渲染为内联 SVG，不需要 Chart.js，不需要二维码库，也完全不必加载或维护任何客户端 JavaScript。设置属性、调用 HTML，即可完成。其中三个是数据可视化组件 — Heatmap、Sparkline、CandlestickChart 和 TreeMap — 另外两个是可扫描代码组件 — QRCode 和 Barcode。

Heatmap — 颜色渐变网格图

TsgcHTMLComponent_Heatmap 接收一个行/列排列的数字网格，将其渲染为颜色渐变的 SVG：数值低对应一种颜色，数值高对应另一种颜色，并可选择显示图例。先填充 RowLabels 和 ColumnLabels，然后为每个数据点调用 SetCell。

uses
  sgcHTML_Component_Heatmap;

var
  oHeatmap: TsgcHTMLComponent_Heatmap;
begin
  oHeatmap := TsgcHTMLComponent_Heatmap.Create(nil);
  try
    oHeatmap.RowLabels.CommaText := 'Mon,Tue,Wed,Thu,Fri';
    oHeatmap.ColumnLabels.CommaText := '9h,12h,15h,18h';
    oHeatmap.ShowLegend := True;
    oHeatmap.ShowValues := True;

    oHeatmap.SetCell(0, 0, 12);
    oHeatmap.SetCell(0, 1, 48);
    oHeatmap.SetCell(1, 2, 76);
    oHeatmap.SetCell(4, 3, 92);

    WebModule.Response := oHeatmap.HTML;   // SVG grid, min->max colour scale
  finally
    oHeatmap.Free;
  end;
end;

// Or bind it straight to a dataset:
oHeatmap.LoadFromDataSet(qryTraffic, 'DayName', 'HourSlot', 'Visits');

按小时统计的流量、按星期几统计的活动、按接口统计的错误率 — 任何你原本会用颜色编码表格来呈现的场景，LoadFromDataSet 都能让你直接从查询结果得到它。

Sparkline — 微型内联趋势图

TsgcHTMLComponent_Sparkline 是一个小巧、无标签的折线/柱状/面积图，可以直接内联放在数字旁边 — 用作 KPI 卡片的趋势指示器，或表格单元格里的迷你历史记录。它还提供一个静态的 Build 辅助方法，在你不需要保留组件实例时，可以真正做到一行代码搞定。

uses
  sgcHTML_Component_Sparkline;

var
  oSpark: TsgcHTMLComponent_Sparkline;
  sHTML: string;
begin
  oSpark := TsgcHTMLComponent_Sparkline.Create(nil);
  try
    oSpark.ChartType := slArea;
    oSpark.Width := 160;
    oSpark.Height := 32;
    oSpark.ShowLastPoint := True;
    oSpark.SetData([14, 18, 12, 22, 30, 26, 34]);

    WebModule.Response := oSpark.HTML;   // inline SVG, no chart library
  finally
    oSpark.Free;
  end;
end;

// Or bind it straight to a dataset:
oSpark.LoadFromDataSet(qryRevenue, 'Amount');

// One-liner for inline use inside a bigger page:
sHTML := TsgcHTMLComponent_Sparkline.Build([5, 9, 4, 12, 7], slBar);

CandlestickChart — 无需图表库的 OHLC 蜡烛图

TsgcHTMLComponent_CandlestickChart 以内联 SVG 渲染一个真正的 OHLC 蜡烛图 — 包含影线、实体、涨跌配色，以及可选的成交量条。AddPoint 为每根 K 线接收一个标签，加上开盘价/最高价/最低价/收盘价（以及可选的成交量）。

uses
  sgcHTML_Component_CandlestickChart;

var
  oChart: TsgcHTMLComponent_CandlestickChart;
begin
  oChart := TsgcHTMLComponent_CandlestickChart.Create(nil);
  try
    oChart.Width := 800;
    oChart.Height := 400;
    oChart.ShowVolume := True;

    oChart.AddPoint('Mon', 101.2, 104.8, 100.1, 103.5, 125000);
    oChart.AddPoint('Tue', 103.5, 106.0, 102.8, 105.1, 98000);
    oChart.AddPoint('Wed', 105.1, 105.4, 101.0, 101.9, 154000);

    WebModule.Response := oChart.HTML;   // SVG candles + wicks + volume strip
  finally
    oChart.Free;
  end;
end;

// Or bind it straight to a dataset:
oChart.LoadFromDataSet(qryOHLC, 'TradeDate', 'OpenPrice', 'HighPrice',
  'LowPrice', 'ClosePrice', 'Volume');

TreeMap — 比例矩形图

TsgcHTMLComponent_TreeMap 将一组带名称的数值排布为一个方形化矩形树图 — 也就是经典的“按部门划分预算”或“按文件夹划分磁盘占用”可视化效果，每个矩形的面积都与其数值成比例。整个布局算法完全在服务器端运行。

uses
  sgcHTML_Component_TreeMap;

var
  oTreeMap: TsgcHTMLComponent_TreeMap;
begin
  oTreeMap := TsgcHTMLComponent_TreeMap.Create(nil);
  try
    oTreeMap.Width := 640;
    oTreeMap.Height := 360;
    oTreeMap.ColorScheme := tmCool;
    oTreeMap.ShowValues := True;

    oTreeMap.AddItem('Engineering', 420000);
    oTreeMap.AddItem('Sales', 260000);
    oTreeMap.AddItem('Marketing', 140000);
    oTreeMap.AddItem('Support', 90000, '#20c997');   // explicit colour overrides the scheme

    WebModule.Response := oTreeMap.HTML;   // <svg> squarified rectangles, no client-side library
  finally
    oTreeMap.Free;
  end;
end;

// Or bind it straight to a dataset:
oTreeMap.LoadFromDataSet(qryBudget, 'Department', 'Amount');

// One-shot helper, no instance to manage:
Response := TsgcHTMLComponent_TreeMap.Build(['Engineering', 'Sales'], [420000, 260000]);

QRCode 和 Barcode — 可扫描代码，零依赖

两者都是纯 Pascal 实现 — 不依赖任何外部编码库，也不调用任何图像服务。TsgcHTMLComponent_QRCode 是一个真正符合 ISO/IEC 18004 标准的编码器，可选择纠错级别；TsgcHTMLComponent_Barcode 生成 Code 128 条形码，并可在下方附加人类可读的说明文字。两者也都提供一个静态的 Build 辅助方法。

uses
  sgcHTML_Component_QRCode;

var
  oQR: TsgcHTMLComponent_QRCode;
begin
  oQR := TsgcHTMLComponent_QRCode.Create(nil);
  try
    oQR.Data := 'https://www.esegece.com';
    oQR.ECCLevel := qrHigh;
    oQR.ModuleSize := 6;
    oQR.Caption := 'Scan to open';
    oQR.CaptionVisible := True;

    WebModule.Response := oQR.HTML;   // SVG QR modules + optional caption
  finally
    oQR.Free;
  end;
end;

// One-liner for inline use inside a bigger page:
sHTML := TsgcHTMLComponent_QRCode.Build('https://www.esegece.com', qrHigh, 6);

uses
  sgcHTML_Component_Barcode;

var
  oBarcode: TsgcHTMLComponent_Barcode;
begin
  oBarcode := TsgcHTMLComponent_Barcode.Create(nil);
  try
    oBarcode.Data := 'ACME-00219841';
    oBarcode.Symbology := bsCode128;
    oBarcode.ModuleWidth := 2;
    oBarcode.Height := 60;
    oBarcode.ShowText := True;

    WebModule.Response := oBarcode.HTML;   // SVG bars + human-readable text
  finally
    oBarcode.Free;
  end;
end;

发票号码、资产标签、仓库货位、活动门票 — 任何你的应用已经在打印参考编码的地方，这两个组件都能把它变成手机摄像头或手持扫描枪可以读取的内容，而且不需要发起一次额外的外部资源请求。

立即体验

完整文档、关键属性参考以及 Delphi/C++Builder/.NET 代码示例都在各组件自己的页面上：Heatmap、Sparkline、CandlestickChart、TreeMap、QRCode 和 Barcode。本系列的下一篇文章将介绍更智能的表单输入组件。

有疑问、反馈，或需要迁移帮助？联系我们 — 回复你的将是编写这些代码的人。