Diagram

TsgcHTMLComponent_Diagram — renderize um diagrama de fluxo de nós e setas como SVG inline, posicionando nós em coordenadas fixas e conectando-os com setas rotuladas, em Delphi, C++ Builder e .NET.

Visão geral

TsgcHTMLComponent_Diagram

Um componente de fluxograma que emite um <svg> inline autossuficiente. Adicione nós em coordenadas X/Y, conecte-os com setas e então leia a propriedade HTML.

Classe do componente

TsgcHTMLComponent_Diagram

Renderiza

Nós e setas <svg> inline

Família

Gráficos & Visualização

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Adicione nós, conecte-os, renderize

Chame AddNode para cada caixa (com sua posição, cor e forma), conecte-as com Connect e então leia 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

Referência

Principais propriedades & métodos

Os membros que você usa com mais frequência.

Nós

Nodes (TsgcHTMLDiagramNodes) contém as caixas; cada TsgcHTMLDiagramNode expõe NodeID, Text, X, Y, Width, Height, Color e Shape.

Adicionar um nó

AddNode(aID, aText, aX, aY, aColor, aShape) adiciona um nó e o retorna; aColor é um TsgcHTMLColor, aShape um TsgcHTMLDiagramNodeShape.

Formas

TsgcHTMLDiagramNodeShape oferece nsRectangle, nsRoundedRect, nsCircle e nsDiamond.

Conexões

Connections (TsgcHTMLDiagramConnections) contém as setas; cada TsgcHTMLDiagramConnection tem FromNode, ToNode, Label_ e Color.

Conectar nós

Connect(aFromID, aToID, aLabel_) desenha uma seta rotulada entre dois nós referenciados por seu NodeID.

Canvas & saída

DiagramWidth, DiagramHeight e DiagramID dimensionam e identificam o SVG; HTML retorna o <svg> inline com as setas desenhadas atrás dos nós.

Recursos

Continue explorando

	Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 60 componentes.	Abrir
	Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.	Abrir
	PreçosLicenças Single, Team e Site com código-fonte completo.	Abrir