In één oogopslag

TsgcHTMLComponent_Gantt

Voeg taken toe met start- en einddatums en een voortgangspercentage, stel een kop in en lees dan de HTML-eigenschap — het component schaalt elke balk over het projectbereik.

Componentklasse

TsgcHTMLComponent_Gantt

Rendert

Bootstrap 5-kaart met taakbalken + scoped CSS

Familie

Data en tabellen

Talen

Delphi, C++ Builder, .NET

QuickStart

Voeg taken toe, stel voortgang in, render het

Stel een Title in, roep AddTask aan voor elk werkitem met zijn datums, voortgang en kleur en lees dan 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

Referentie

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Taken

Tasks bevat werkitems met Title, StartDate, EndDate, Progress, enum Color en Assignee.

Taken toevoegen

AddTask(aTitle, aStart, aEnd, aProgress, aColor, aAssignee) voegt één balk toe in één aanroep.

Automatisch schalen

Het component vindt de vroegste start en de laatste einddatum over alle taken en positioneert elke balk proportioneel over dat bereik.

Voortgang

De Progress (0–100) van elke taak tekent een doorzichtige vulling over zijn balk zodat de voltooiing in één oogopslag zichtbaar is.

Kop

Title rendert een vetgedrukte kop boven de grafiek; laat het leeg om de koprij weg te laten.

Uitvoer

GanttID identificeert de kaart; HTML retourneert de kaart, taakrijen en de scoped Gantt-CSS.

Bronnen

Blijf ontdekken

	Alle sgcHTML-componentenBlader door de volledige functiematrix van 60+ componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen

Gantt