Diagram

TsgcHTMLComponent_Diagram — erzeugen Sie ein Knoten-und-Pfeil-Flussdiagramm als Inline-SVG, das Knoten an festen Koordinaten platziert und mit beschrifteten Pfeilen verbindet, in Delphi, C++ Builder und .NET.

Auf einen Blick

TsgcHTMLComponent_Diagram

Eine Flussdiagramm-Komponente, die ein eigenständiges Inline-<svg> ausgibt. Fügen Sie Knoten an X-/Y-Koordinaten hinzu, verbinden Sie sie mit Pfeilen und lesen Sie dann die HTML-Eigenschaft.

Komponentenklasse

TsgcHTMLComponent_Diagram

Rendert

Inline-<svg>-Knoten und -Pfeile

Familie

Diagramme & Visualisierung

Sprachen

Delphi, C++ Builder, .NET

QuickStart

Knoten hinzufügen, verbinden, rendern

Rufen Sie AddNode für jedes Kästchen auf (mit Position, Farbe und Form), verbinden Sie sie mit Connect und lesen Sie dann 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

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die Sie am häufigsten verwenden.

Nodes

Nodes (TsgcHTMLDiagramNodes) enthält die Kästchen; jeder TsgcHTMLDiagramNode stellt NodeID, Text, X, Y, Width, Height, Color und Shape bereit.

Knoten hinzufügen

AddNode(aID, aText, aX, aY, aColor, aShape) hängt einen Knoten an und gibt ihn zurück; aColor ist ein TsgcHTMLColor, aShape ein TsgcHTMLDiagramNodeShape.

Formen

TsgcHTMLDiagramNodeShape bietet nsRectangle, nsRoundedRect, nsCircle und nsDiamond.

Verbindungen

Connections (TsgcHTMLDiagramConnections) enthält die Pfeile; jede TsgcHTMLDiagramConnection hat FromNode, ToNode, Label_ und Color.

Knoten verbinden

Connect(aFromID, aToID, aLabel_) zeichnet einen beschrifteten Pfeil zwischen zwei Knoten, die über ihre NodeID referenziert werden.

Zeichenfläche & Ausgabe

DiagramWidth, DiagramHeight und DiagramID bemessen und identifizieren das SVG; HTML gibt das Inline-<svg> mit hinter den Knoten gezeichneten Pfeilen zurück.

Ressourcen

Weiter entdecken

	Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 60 Komponenten.	Öffnen
	Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.	Öffnen
	PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.	Öffnen