Componente TreeMap — sgcHTML

De un vistazo

TsgcHTMLComponent_TreeMap

Añade elementos con una etiqueta y un valor (o vincula un dataset), elige un esquema de color, y luego lee la propiedad HTML.

Clase del componente

TsgcHTMLComponent_TreeMap

Renderiza

SVG en línea autocontenido, diseño squarified

Familia

Gráficos y Visualización

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Añade elementos, renderízalo

Llama a AddItem por cada rectángulo, elige un ColorScheme, y luego lee HTML. El diseño se calcula en el servidor y no necesita ninguna librería en el cliente.

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

Referencia

Propiedades y métodos clave

Los miembros que usarás con más frecuencia.

Items / AddItem

AddItem(aLabel, aValue, aColor) añade un rectángulo hoja; un aColor explícito sustituye al ColorScheme activo.

Jerarquía

Items admite un treemap de dos niveles: define ID / ParentID en los elementos padre e hijo para anidar los rectángulos hijos dentro de su padre atenuado.

Vinculación a dataset

LoadFromDataSet(aDataSet, aLabelField, aValueField) carga un elemento plano por cada fila.

Ayuda de un solo uso

La función de clase Build(aLabels, aValues) renderiza un treemap plano directamente a una cadena, sin instancia de componente que gestionar.

Tamaño y paleta

Width, Height, Padding y ColorScheme (default/blue/green/warm/cool/gray) controlan el lienzo y los colores de rectángulo asignados automáticamente.

Etiquetas

ShowLabels, ShowValues, MinLabelSize y FontSize deciden cuándo y cómo se dibuja el título de un rectángulo; HTML devuelve el <svg> en línea terminado.

Recursos

Sigue explorando

	Ayuda en líneaReferencia completa de la API y guía de uso para este componente.	Abrir
	Todos los componentes de sgcHTMLExplora la matriz completa de más de 80 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con código fuente completo.	Abrir

TreeMap