TreeMap
TsgcHTMLComponent_TreeMap — 将方形化矩形树图渲染为独立的、服务器端生成的内联 SVG,无需任何图表库,适用于 Delphi、C++ Builder 和 .NET。
TsgcHTMLComponent_TreeMap — 将方形化矩形树图渲染为独立的、服务器端生成的内联 SVG,无需任何图表库,适用于 Delphi、C++ Builder 和 .NET。
添加带有标签和数值的条目(或绑定数据集),选择配色方案,然后读取 HTML 属性。
为每个矩形调用 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(aLabel, aValue, aColor) 追加一个叶子矩形;显式指定的 aColor 会覆盖当前的 ColorScheme。
Items 支持两级树图:在父条目和子条目上设置 ID / ParentID,即可将子矩形嵌套在其淡化的父矩形内。
LoadFromDataSet(aDataSet, aLabelField, aValueField) 为每一行加载一个扁平条目。
类函数 Build(aLabels, aValues) 直接将扁平树图渲染为字符串,无需管理任何组件实例。
Width、Height、Padding 和 ColorScheme(default/blue/green/warm/cool/gray)控制画布及自动分配的矩形颜色。
ShowLabels、ShowValues、MinLabelSize 和 FontSize 决定矩形标题何时以及如何绘制;HTML 返回完成的内联 <svg>。