Diagram コンポーネント — sgcHTML

概要

TsgcHTMLComponent_Diagram

自己完結型のインライン <svg> を出力するフローチャートコンポーネントです。X/Y 座標にノードを追加し、矢印で接続してから、HTML プロパティを読み取ります。

コンポーネントクラス

TsgcHTMLComponent_Diagram

レンダリング内容

インライン <svg> のノードと矢印

ファミリー

チャート & 可視化

言語

Delphi, C++ Builder, .NET

クイックスタート

ノードを追加し、接続し、レンダリングする

各ボックスについて AddNode を呼び出し（位置、色、形状を指定）、Connect で配線してから、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

リファレンス

主なプロパティとメソッド

最もよく使うメンバーです。

Nodes

Nodes（TsgcHTMLDiagramNodes）はボックスを保持します。各 TsgcHTMLDiagramNode は NodeID、Text、X、Y、Width、Height、Color、Shape を公開します。

Add a node

AddNode(aID, aText, aX, aY, aColor, aShape) はノードを追加して返します。aColor は TsgcHTMLColor、aShape は TsgcHTMLDiagramNodeShape です。

Shapes

TsgcHTMLDiagramNodeShape は nsRectangle、nsRoundedRect、nsCircle、nsDiamond を提供します。

Connections

Connections（TsgcHTMLDiagramConnections）は矢印を保持します。各 TsgcHTMLDiagramConnection は FromNode、ToNode、Label_、Color を持ちます。

Connect nodes

Connect(aFromID, aToID, aLabel_) は、NodeID で参照される 2 つのノード間にラベル付きの矢印を描画します。

Canvas & output

DiagramWidth、DiagramHeight、DiagramID は SVG のサイズを決め、識別します。HTML は、ノードの背後に矢印が描画されたインライン <svg> を返します。

リソース

さらに詳しく

	すべての sgcHTML コンポーネント60 以上のコンポーネントの全機能マトリックスを閲覧できます。	開く
	無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。	開く
	価格完全なソースコード付きの Single、Team、Site ライセンス。	開く

Diagram