Gantt
TsgcHTMLComponent_Gantt — Delphi、C++ Builder、.NET で、色付きのタスクバーと進捗の塗りつぶしを備えたガントプロジェクトタイムラインチャートをレンダリングします。
TsgcHTMLComponent_Gantt — Delphi、C++ Builder、.NET で、色付きのタスクバーと進捗の塗りつぶしを備えたガントプロジェクトタイムラインチャートをレンダリングします。
開始日と終了日、進捗率を指定してタスクを追加し、見出しを設定してから、HTML プロパティを読み取ります — コンポーネントは各バーをプロジェクト範囲全体にわたって拡大縮小します。
TsgcHTMLComponent_Gantt
タスクバー付きの Bootstrap 5 カード + スコープ付き CSS
Delphi, C++ Builder, .NET
Title を設定し、各作業項目について日付、進捗、色を指定して AddTask を呼び出してから、HTML を読み取ります。
uses
sgcHTML_Enums, sgcHTML_Component_Gantt;
var
oGantt: TsgcHTMLComponent_Gantt;
begin
oGantt := TsgcHTMLComponent_Gantt.Create(nil);
try
oGantt.Title := 'Release Plan';
oGantt.AddTask('Design', EncodeDate(2026, 6, 1),
EncodeDate(2026, 6, 7), 100, hcPrimary, 'Ana');
oGantt.AddTask('Build', EncodeDate(2026, 6, 8),
EncodeDate(2026, 6, 20), 45, hcSuccess, 'Tom');
WebModule.Response := oGantt.HTML; // card + task bars + CSS
finally
oGantt.Free;
end;
end;
// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Gantt.hpp
TsgcHTMLComponent_Gantt *oGantt = new TsgcHTMLComponent_Gantt(NULL);
try
{
oGantt->Title = "Release Plan";
oGantt->AddTask("Design", EncodeDate(2026, 6, 1),
EncodeDate(2026, 6, 7), 100, hcPrimary, "Ana");
oGantt->AddTask("Build", EncodeDate(2026, 6, 8),
EncodeDate(2026, 6, 20), 45, hcSuccess, "Tom");
String html = oGantt->HTML; // card + task bars + CSS
}
__finally
{
delete oGantt;
}
using esegece.sgcWebSockets;
var gantt = new TsgcHTMLComponent_Gantt();
gantt.Title = "Release Plan";
gantt.AddTask("Design", new DateTime(2026, 6, 1),
new DateTime(2026, 6, 7), 100, TsgcHTMLColor.hcPrimary, "Ana");
gantt.AddTask("Build", new DateTime(2026, 6, 8),
new DateTime(2026, 6, 20), 45, TsgcHTMLColor.hcSuccess, "Tom");
string html = gantt.HTML; // card + task bars + CSS
最もよく使うメンバーです。
Tasks は、Title、StartDate、EndDate、Progress、列挙型の Color、Assignee を持つ作業項目を保持します。
AddTask(aTitle, aStart, aEnd, aProgress, aColor, aAssignee) は、1 回の呼び出しで 1 本のバーを追加します。
コンポーネントは、すべてのタスクの中から最も早い開始と最も遅い終了を見つけ、その範囲全体にわたってすべてのバーを比例的に配置します。
各タスクの Progress(0–100)は、バーの上に半透明の塗りつぶしを描画するため、進捗状況が一目で分かります。
Title はチャートの上に太字の見出しをレンダリングします。空白のままにすると、見出しの行は省略されます。
GanttID はカードを識別します。HTML は、カード、タスク行、スコープ付きのガント CSS を返します。