Gantt

TsgcHTMLComponent_Gantt — Delphi、C++ Builder、.NET で、色付きのタスクバーと進捗の塗りつぶしを備えたガントプロジェクトタイムラインチャートをレンダリングします。

TsgcHTMLComponent_Gantt

開始日と終了日、進捗率を指定してタスクを追加し、見出しを設定してから、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

Tasks は、TitleStartDateEndDateProgress、列挙型の ColorAssignee を持つ作業項目を保持します。

Adding tasks

AddTask(aTitle, aStart, aEnd, aProgress, aColor, aAssignee) は、1 回の呼び出しで 1 本のバーを追加します。

Auto scaling

コンポーネントは、すべてのタスクの中から最も早い開始と最も遅い終了を見つけ、その範囲全体にわたってすべてのバーを比例的に配置します。

Progress

各タスクの Progress(0–100)は、バーの上に半透明の塗りつぶしを描画するため、進捗状況が一目で分かります。

Heading

Title はチャートの上に太字の見出しをレンダリングします。空白のままにすると、見出しの行は省略されます。

Output

GanttID はカードを識別します。HTML は、カード、タスク行、スコープ付きのガント CSS を返します。

さらに詳しく

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

始める準備はできましたか?

無料体験版をダウンロードして、Delphi、C++ Builder、.NET で Web UI の構築を始めましょう。