Diagram

TsgcHTMLComponent_Diagram — renderizza un diagramma di flusso con nodi e frecce come SVG inline, posizionando i nodi a coordinate fisse e collegandoli con frecce etichettate, in Delphi, C++ Builder e .NET.

In sintesi

TsgcHTMLComponent_Diagram

Un componente flowchart che emette un <svg> inline autonomo. Aggiungi i nodi a coordinate X/Y, collegali con frecce, quindi leggi la proprietà HTML.

Classe del componente

TsgcHTMLComponent_Diagram

Renderizza

Inline <svg> nodes and arrows

Famiglia

Grafici e Visualizzazione

Linguaggi

Delphi, C++ Builder, .NET

QuickStart

Aggiungi i nodi, collegali, renderizzalo

Chiama AddNode per ogni riquadro (con la sua posizione, colore e forma), collegali con Connect, quindi leggi HTML.

uses
  sgcHTML_Enums, sgcHTML_Component_Diagram;

var
  oDiagram: TsgcHTMLComponent_Diagram;
begin
  oDiagram := TsgcHTMLComponent_Diagram.Create(nil);
  try
    oDiagram.DiagramWidth := 600;
    oDiagram.DiagramHeight := 300;

    oDiagram.AddNode('start', 'Start', 240, 20, hcSuccess, nsCircle);
    oDiagram.AddNode('work', 'Process', 240, 120, hcPrimary, nsRoundedRect);
    oDiagram.AddNode('done', 'Finish', 240, 220, hcDanger, nsDiamond);

    oDiagram.Connect('start', 'work', 'begin');
    oDiagram.Connect('work', 'done', 'commit');

    WebModule.Response := oDiagram.HTML;   // inline <svg> flow diagram
  finally
    oDiagram.Free;
  end;
end;

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Diagram.hpp

TsgcHTMLComponent_Diagram *oDiagram = new TsgcHTMLComponent_Diagram(NULL);
try
{
  oDiagram->DiagramWidth = 600;
  oDiagram->DiagramHeight = 300;

  oDiagram->AddNode("start", "Start", 240, 20, hcSuccess, nsCircle);
  oDiagram->AddNode("work", "Process", 240, 120, hcPrimary, nsRoundedRect);
  oDiagram->AddNode("done", "Finish", 240, 220, hcDanger, nsDiamond);

  oDiagram->Connect("start", "work", "begin");
  oDiagram->Connect("work", "done", "commit");

  String html = oDiagram->HTML;   // inline <svg> flow diagram
}
__finally
{
  delete oDiagram;
}

using esegece.sgcWebSockets;

var diagram = new TsgcHTMLComponent_Diagram();
diagram.DiagramWidth = 600;
diagram.DiagramHeight = 300;

diagram.AddNode("start", "Start", 240, 20, TsgcHTMLColor.hcSuccess, TsgcHTMLDiagramNodeShape.nsCircle);
diagram.AddNode("work", "Process", 240, 120, TsgcHTMLColor.hcPrimary, TsgcHTMLDiagramNodeShape.nsRoundedRect);
diagram.AddNode("done", "Finish", 240, 220, TsgcHTMLColor.hcDanger, TsgcHTMLDiagramNodeShape.nsDiamond);

diagram.Connect("start", "work", "begin");
diagram.Connect("work", "done", "commit");

string html = diagram.HTML;   // inline <svg> flow diagram

Riferimento

Proprietà e metodi principali

I membri che utilizzerai più spesso.

Nodi

Nodes (TsgcHTMLDiagramNodes) contiene i riquadri; ogni TsgcHTMLDiagramNode espone NodeID, Text, X, Y, Width, Height, Color e Shape.

Aggiungere un nodo

AddNode(aID, aText, aX, aY, aColor, aShape) aggiunge un nodo e lo restituisce; aColor è un TsgcHTMLColor, aShape un TsgcHTMLDiagramNodeShape.

Forme

TsgcHTMLDiagramNodeShape offre nsRectangle, nsRoundedRect, nsCircle e nsDiamond.

Connessioni

Connections (TsgcHTMLDiagramConnections) contiene le frecce; ogni TsgcHTMLDiagramConnection ha FromNode, ToNode, Label_ e Color.

Collegare i nodi

Connect(aFromID, aToID, aLabel_) disegna una freccia etichettata tra due nodi indicati dal loro NodeID.

Canvas e output

DiagramWidth, DiagramHeight e DiagramID dimensionano e identificano l’SVG; HTML restituisce l’<svg> inline con le frecce disegnate dietro i nodi.

Risorse

Continua a esplorare

	Tutti i componenti sgcHTMLEsplora la matrice completa delle funzionalità di oltre 60 componenti.	Apri
	Scarica la Prova GratuitaLa prova di 30 giorni include i progetti demo 60.HTML.	Apri
	PrezziLicenze Single, Team e Site con codice sorgente completo.	Apri