TreeMap 组件 — sgcHTML | eSeGeCe

TreeMap

TsgcHTMLComponent_TreeMap — 将方形化矩形树图渲染为独立的、服务器端生成的内联 SVG,无需任何图表库,适用于 Delphi、C++ Builder 和 .NET。

TsgcHTMLComponent_TreeMap

添加带有标签和数值的条目(或绑定数据集),选择配色方案,然后读取 HTML 属性。

组件类

TsgcHTMLComponent_TreeMap

渲染为

独立的内联 SVG,方形化布局

语言

Delphi, C++ Builder, .NET

添加条目,渲染它

为每个矩形调用 AddItem,选择 ColorScheme,然后读取 HTML。布局在服务器端计算完成,无需任何客户端库。

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]);
// includes: sgcHTML_Component_TreeMap.hpp

TsgcHTMLComponent_TreeMap *oTreeMap = new TsgcHTMLComponent_TreeMap(NULL);
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

  String html = oTreeMap->HTML;   // <svg> squarified rectangles, no client-side library
}
__finally
{
  delete oTreeMap;
}
using esegece.sgcWebSockets;

var treeMap = new TsgcHTMLComponent_TreeMap();
treeMap.Width = 640;
treeMap.Height = 360;
treeMap.ColorScheme = TsgcHTMLTreeMapScheme.tmCool;
treeMap.ShowValues = true;

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

string html = treeMap.HTML;   // <svg> squarified rectangles, no client-side library

// One-shot helper, no instance to manage:
string quick = TsgcHTMLComponent_TreeMap.Build(new[] { "Engineering", "Sales" }, new[] { 420000d, 260000d });

关键属性与方法

您最常使用的成员。

条目 / AddItem

AddItem(aLabel, aValue, aColor) 追加一个叶子矩形;显式指定的 aColor 会覆盖当前的 ColorScheme

层级结构

Items 支持两级树图:在父条目和子条目上设置 ID / ParentID,即可将子矩形嵌套在其淡化的父矩形内。

数据集绑定

LoadFromDataSet(aDataSet, aLabelField, aValueField) 为每一行加载一个扁平条目。

一次性辅助方法

类函数 Build(aLabels, aValues) 直接将扁平树图渲染为字符串,无需管理任何组件实例。

尺寸与配色

WidthHeightPaddingColorScheme(default/blue/green/warm/cool/gray)控制画布及自动分配的矩形颜色。

标签

ShowLabelsShowValuesMinLabelSizeFontSize 决定矩形标题何时以及如何绘制;HTML 返回完成的内联 <svg>

继续探索

在线帮助此组件的完整 API 参考和使用指南。
所有 sgcHTML 组件浏览 80 多个组件的完整功能矩阵。
下载免费试用版30 天试用版附带 60.HTML 演示项目。
价格Single、Team 和 Site 授权,均含完整源代码。

准备好开始了吗?

下载免费试用版,开始在 Delphi、C++ Builder 和 .NET 中构建 Web 界面。