TreeMap-component — sgcHTML | eSeGeCe

TreeMap

TsgcHTMLComponent_TreeMap — render een squarified treemap als een zelfstandige, server-gegenereerde inline SVG, zonder dat een grafiekbibliotheek nodig is, in Delphi, C++ Builder en .NET.

In één oogopslag

TsgcHTMLComponent_TreeMap

Voeg items toe met een label en een waarde (of koppel een dataset), kies een kleurschema, en lees dan de HTML-eigenschap.

Componentklasse

TsgcHTMLComponent_TreeMap

Rendert

Zelfstandige inline SVG, squarified lay-out

Familie

Grafieken en visualisatie

Talen

Delphi, C++ Builder, .NET

QuickStart

Voeg items toe, render het

Roep AddItem aan voor elke rechthoek, kies een ColorScheme, en lees dan HTML. De lay-out wordt server-side berekend en heeft geen client-side bibliotheek nodig.

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 });

Referentie

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Items / AddItem

AddItem(aLabel, aValue, aColor) voegt een leaf-rechthoek toe; een expliciete aColor overschrijft het actieve ColorScheme.

Hiërarchie

Items ondersteunt een treemap met twee niveaus: stel ID / ParentID in op ouder- en kinditems om kindrechthoeken te nesten binnen hun vervaagde ouder.

Datasetbinding

LoadFromDataSet(aDataSet, aLabelField, aValueField) laadt één plat item per rij.

One-shot helper

De klassefunctie Build(aLabels, aValues) rendert een platte treemap rechtstreeks naar een string, zonder dat er een componentinstantie beheerd hoeft te worden.

Afmetingen en palet

Width, Height, Padding en ColorScheme (default/blue/green/warm/cool/gray) bepalen het canvas en de automatisch toegewezen rechthoekkleuren.

Labels

ShowLabels, ShowValues, MinLabelSize en FontSize bepalen wanneer en hoe het onderschrift van een rechthoek wordt getekend; HTML retourneert de voltooide inline <svg>.

Bronnen

Blijf ontdekken

	Online helpVolledige API-referentie en gebruikshandleiding voor dit onderdeel.	Open
	Alle sgcHTML-componentenBlader door de volledige functiematrix van 80+ componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen