Diagram

TsgcHTMLComponent_Diagram — affichez un diagramme de flux à nœuds et flèches en SVG en ligne, en plaçant les nœuds à des coordonnées fixes et en les reliant par des flèches étiquetées, en Delphi, C++ Builder et .NET.

En bref

TsgcHTMLComponent_Diagram

Un composant d'organigramme qui émet un <svg> en ligne autonome. Ajoutez des nœuds à des coordonnées X/Y, reliez-les par des flèches, puis lisez la propriété HTML.

Classe du composant

TsgcHTMLComponent_Diagram

Produit

Nœuds et flèches en <svg> en ligne

Famille

Graphiques & Visualisation

Langages

Delphi, C++ Builder, .NET

QuickStart

Ajoutez des nœuds, reliez-les, affichez-le

Appelez AddNode pour chaque boîte (avec sa position, sa couleur et sa forme), reliez-les avec Connect, puis lisez 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

Référence

Propriétés & méthodes clés

Les membres que vous utilisez le plus souvent.

Nœuds

Nodes (TsgcHTMLDiagramNodes) contient les boîtes ; chaque TsgcHTMLDiagramNode expose NodeID, Text, X, Y, Width, Height, Color et Shape.

Ajouter un nœud

AddNode(aID, aText, aX, aY, aColor, aShape) ajoute un nœud et le renvoie ; aColor est un TsgcHTMLColor, aShape un TsgcHTMLDiagramNodeShape.

Formes

TsgcHTMLDiagramNodeShape propose nsRectangle, nsRoundedRect, nsCircle et nsDiamond.

Connexions

Connections (TsgcHTMLDiagramConnections) contient les flèches ; chaque TsgcHTMLDiagramConnection possède FromNode, ToNode, Label_ et Color.

Relier les nœuds

Connect(aFromID, aToID, aLabel_) dessine une flèche étiquetée entre deux nœuds référencés par leur NodeID.

Canevas & sortie

DiagramWidth, DiagramHeight et DiagramID dimensionnent et identifient le SVG ; HTML renvoie le <svg> en ligne avec les flèches dessinées derrière les nœuds.

Ressources

Continuez l'exploration

	Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 60 composants.	Ouvrir
	Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML.	Ouvrir
	TarifsLicences Single, Team et Site avec code source complet.	Ouvrir