Gantt

Планирайте проекти със списък със задачи, ленти върху времева скала, подзадачи, напредък, важни моменти и зависимости и местете ленти с мишка, докосване или клавиатура.

Защо помага

• Подзадачи и важни моменти
• Зависимости и критичен път
• Скали ден, седмица и месец

Къде пасва

• Планове на проекти
• Производствени графици
• Пътни карти

Пример

<div class="doc-stack" style="max-width:none">
    <Gantt ShowCriticalPath="true" AutoSchedule="true" Tasks="_tasks" Label="Project plan" Editable="true" @bind-Scale="_scale" TaskChanged="@((GanttTask task) => _message = $"{task.Title} now runs {task.Start:d} to {task.End:d}")" ListWidth="20rem" />
    <span>@_message</span>
</div>

@code {
    private GanttScale _scale = GanttScale.Day;
    private string _message = "Drag a bar to move it, drag its ends to change the dates, or focus a bar and use the arrow keys (Shift changes the end).";

    private static readonly DateTime Monday = new(2026, 10, 5);

    private readonly List<GanttTask> _tasks =
    [
        new() { Id = "plan", Title = "Planning", Start = Monday, End = Monday.AddDays(9) },
        new() { Id = "scope", Title = "Define scope", ParentId = "plan", Start = Monday, End = Monday.AddDays(3), Progress = 100, Severity = Severity.Success, Resource = "Anna" },
        new() { Id = "budget", Title = "Agree the budget", ParentId = "plan", Start = Monday.AddDays(4), End = Monday.AddDays(9), Progress = 60, DependsOn = ["scope"], Resource = "Boris" },
        new() { Id = "kickoff", Title = "Kick-off", Start = Monday.AddDays(10), End = Monday.AddDays(10), Milestone = true, DependsOn = ["budget"] },
        new() { Id = "build", Title = "Build", Start = Monday.AddDays(11), End = Monday.AddDays(25), Progress = 20, DependsOn = ["kickoff"] },
        new() { Id = "test", Title = "Test", Start = Monday.AddDays(21), End = Monday.AddDays(30), Severity = Severity.Warning, DependsOn = ["build"] },
        new() { Id = "release", Title = "Release", Start = Monday.AddDays(31), End = Monday.AddDays(31), Milestone = true, Severity = Severity.Error, DependsOn = ["test"] }
    ];
}

Кратък фрагмент. Добавете @using RayCraft.Blazor.Components към страницата си и ползвайте интерактивен режим на рендиране.

Част от RayCraft Complete.

Всички контроли · Документация