时间轴
甘特组件的时间轴在时间轴视图中提供了甘特记录的可视化表示。它的配置类似于Scheduler Timeline视图，其中水平维度被划分为时间槽。
时间轴暴露了四个预定义的的观点，表示单个时隙所代表的时间。它还包括两行层次槽标题，用于显示时间划分
它呈现在Gantt组件的右窗格中，并允许您与任务交互。你可以调用编辑双击一个任务。您可以拖动它来更改它将显示的时隙。您可以调整大小或删除它。
控件在时间轴中控制任务及其工具提示的呈现模板甘特暴露。的TaskTemplate将允许自定义任务内容和ToolTipTemplate-工具提示的渲染。
简单的甘特时间线。下面的代码片段的结果。
@*简单甘特组件*@ @code {public GanttView SelectedView {get;设置;} = GanttView.Week;List Data {get;设置;}类FlatModel{公共int Id{获取;设置;}公共int?ParentId {get; set; } public string Title { get; set; } public double PercentComplete { get; set; } public DateTime Start { get; set; } public DateTime End { get; set; } } public int LastId { get; set; } = 1; protected override void OnInitialized() { Data = new List(); var random = new Random(); for (int i = 1; i < 6; i++) { var newItem = new FlatModel() { Id = LastId, Title = "Task " + i.ToString(), Start = new DateTime(2021, 7, 5 + i), End = new DateTime(2021, 7, 11 + i), PercentComplete = Math.Round(random.NextDouble(), 2) }; Data.Add(newItem); var parentId = LastId; LastId++; for (int j = 0; j < 5; j++) { Data.Add(new FlatModel() { Id = LastId, ParentId = parentId, Title = " Task " + i + " : " + j.ToString(), Start = new DateTime(2021, 7, 5 + j), End = new DateTime(2021, 7, 6 + i + j), PercentComplete = Math.Round(random.NextDouble(), 2) }); LastId++; } } base.OnInitialized(); } private void UpdateItem(GanttUpdateEventArgs args) { var item = args.Item as FlatModel; var foundItem = Data.FirstOrDefault(i => i.Id.Equals(item.Id)); if (foundItem != null) { foundItem.Title = item.Title; foundItem.Start = item.Start; foundItem.End = item.End; foundItem.PercentComplete = item.PercentComplete; } } private void DeleteItem(GanttDeleteEventArgs args) { var item = Data.FirstOrDefault(i => i.Id.Equals((args.Item as FlatModel).Id)); RemoveChildRecursive(item); } private void RemoveChildRecursive(FlatModel item) { var children = Data.Where(i => item.Id.Equals(i.ParentId)).ToList(); foreach (var child in children) { RemoveChildRecursive(child); } Data.Remove(item); } }