Vorgehensweise: Erstellen eines Gantt-Diagramms mithilfe von JSGrid
Letzte Änderung: Dienstag, 15. Februar 2011
Gilt für: SharePoint Foundation 2010
Diese Anleitung veranschaulicht, wie ein Gantt-Diagramm mithilfe von JS Grid-Steuerelement erstellt wird. In diesem Thema, das auf Vorgehensweise: Erstellen eines einfachen JS-Rasters aufbaut, definieren Sie Balkenarten für "Zusammenfassung", "Standard", "Meilenstein" und "Prozent abgeschlossen". Jede Balkenart hat eine Form, ein Muster und eine Farbe. Jedes Balkenende hat ein Endformat, eine Farbe und ein Muster. Der Code zur Definition der Vorgangsbalkenarten befindet sich in der Datei GanttUtilities.cs im Ordner GridUtils, der in Vorgehensweise: Erstellen eines einfachen JS-Rasters erstellt wurde. Sie ändern die Rasterdaten, um Daten bereitzustellen, die die Möglichkeiten des Gantt-Diagramms besser veranschaulichen. Schließlich verwenden Sie die enableGantt-Methode des GridDataSerializer-Objekts zum Aktivieren des Gantt-Diagramms.
.gif "Hinweis") Hinweis |
|---|
Auf Ihrem Computer werden ggf. andere Namen oder Speicherorte für einige der Visual Studio-Benutzeroberflächenelemente in den folgenden Anweisungen angezeigt. Diese Elemente werden von der vorhandenen Visual Studio-Edition und den aktiven Einstellungen bestimmt. |
Voraussetzungen
Microsoft SharePoint Foundation 2010
Microsoft Visual Studio 2010
SharePoint-Entwicklungstools in Microsoft Visual Studio 2010
Sie müssen Vorgehensweise: Erstellen eines einfachen JS-Rasters durchgearbeitet haben.
| Hinweis |
|---|
Obwohl Sie dieses Verfahren auch ohne Visual Studio 2010 durchführen können, es ist jedoch einfacher, wenn Sie Visual Studio 2010 und die SharePoint-Entwicklungstools in Microsoft Visual Studio 2010 verwenden. |
So erstellen Sie Vorgangsbalkenarten
Öffnen Sie in Visual Studio das Projekt, das Sie durch Befolgen der Anweisungen in Vorgehensweise: Erstellen eines einfachen JS-Rasters erstellt haben.
Öffnen Sie GridUtilities.cs.
In DefaultGanttBarStyleIdsColumnName werden die standardmäßigen ID-Informationen für die Vorgangsbalkenart gespeichert. DefaultGanttBarStyleIdsColumnName soll nicht als Spalte oder Feld verwendet werden. Der Code, um dies zu verhindern, ist bereits in GridUtilities.cs enthalten, wurde aber auskommentiert.
Heben Sie die Auskommentierung der folgenden Zeilen auf:
// && iterator.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName // Uncomment for the Gantt how-tound auch von
// && dc.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName // Uncomment for Gantt how-toFügen Sie einen Verweis auf System.Drawing hinzu.
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf Verweise, und klicken Sie dann auf Verweis hinzufügen. Wählen Sie auf der Registerkarte .NET den Eintrag System.Drawing aus, und klicken Sie dann auf OK. System.Drawing dient zum Zeichnen der Balken und Balkenenden.
Erstellen Sie die Datei GanttUtilities.cs.
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner GridUtils, zeigen Sie auf Hinzufügen, und klicken Sie dann auf Neue Elemente.
Wählen Sie Visual C#, dann Code und schließlich Codedatei aus.
Nennen Sie die Datei GanttUtilities.cs.
Kopieren Sie den folgenden Code in GanttUtilities.cs.
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Drawing; // added for Gantt styles using Microsoft.SharePoint.JSGrid; namespace JSGridSample.GridUtilityLib { public class GanttUtilities { public enum CustomBarStyle { Summary, Standard, Milestone, PctComplete } public static GanttStyleInfo GetStyleInfo() { var styleInfoObj = new GanttStyleInfo(); /*Summary Bar Style*/ styleInfoObj.AddBarStyle(new GanttBarStyle( CustomBarStyle.Summary, BarShape.TopHalf, Color.Gray, BarPattern.Solid, BarEndShape.HomePlateDown, Color.Gray, BarShapePattern.Filled, BarEndShape.HomePlateDown, Color.Gray, BarShapePattern.Filled, "Start Date", "Finish Date", 1)); /*Standard Bar Style*/ styleInfoObj.AddBarStyle(new GanttBarStyle( CustomBarStyle.Standard, BarShape.Full, Color.Blue, BarPattern.Solid, BarEndShape.None, Color.Black, BarShapePattern.Filled, BarEndShape.None, Color.Black, BarShapePattern.Filled, "Start Date", "Finish Date", 1)); /*Milestone Bar Style*/ styleInfoObj.AddBarStyle(new GanttBarStyle( CustomBarStyle.Milestone, BarShape.None, Color.Black, BarPattern.Solid, BarEndShape.None, Color.Black, BarShapePattern.Filled, BarEndShape.Diamond, Color.Black, BarShapePattern.Filled, "Finish Date", "Finish Date", 1)); /*PctComplete Bar Style*/ styleInfoObj.AddBarStyle(new GanttBarStyle( CustomBarStyle.PctComplete, BarShape.MidHalf, Color.Black, BarPattern.Solid, BarEndShape.None, Color.Black, BarShapePattern.Filled, BarEndShape.None, Color.Black, BarShapePattern.Filled, "Start Date", "CompleteThrough", 1)); return styleInfoObj; } } }Die GanttStyleInfo-Klasse definiert Balkenarten für "Zusammenfassung", "Standard", "Meilenstein" und "Prozent abgeschlossen".
So aktivieren Sie das Gantt-Diagramm
Öffnen Sie JSGridWebPartUserControl.ascx.cs.
Fügen Sie EnableGantt der Page_Load-Methode hinzu.
// Point the grid serializer at the grid serializer data. _grid.GridDataSerializer = gds; // Tell the grid to listen to the GridManager controller. _grid.JSControllerClassName = "GridManager"; // Enable the Gantt chart. gds.EnableGantt(DateTime.Now.AddDays(0), DateTime.Now.AddDays(10), GanttUtilities.GetStyleInfo(), null);EnableGantt(DateTime, DateTime, GanttStyleInfo, String) definiert das früheste Datum, an dem ein Vorgangsbalken beginnt, das späteste Datum, an dem ein Balken endet, die Speicherorte von Vorgangsbalkenarten und einen Spaltennamen für abhängige Elemente (NULL in diesem Fall). Der Einfachheit halber basieren das Anfangs- und Enddatum auf dem aktuellen Datum.
Im nächsten Schritt werden die Rasterdaten so geändert, dass jeder Datenzeile Vorgangsbalkenarten zugeordnet werden.
So ändern Sie die Rasterdatendatei
Öffnen Sie GridData.cs.
Das Gantt-Diagramm benötigt eine Datei zum Speichern der ID-Informationen der Gantt-Vorgangsbalkenarten. Der entsprechende Code ist bereits in GridData.cs enthalten, wurde aber auskommentiert. Heben Sie die Auskommentierung der folgenden Zeile auf.
//data.Columns.Add(new DataColumn(GridSerializer.DefaultGanttBarStyleIdsColumnName, typeof(GanttUtilities.CustomBarStyle[]))); // uncomment for the Create a Gantt Chart Using JS Grid How-To.Bestimmen Sie den Code, der für das Anfangs- und Enddatum sowie das "Prozent abgeschlossen"-Datum willkürlich Werte zuweist.
dr["Start Date"] = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20)); dr["Finish Date"] = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20)); dr["CompleteThrough"] = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));Ersetzen Sie diesen Code durch Folgendes.
stDate = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20)); if (i % 10 == 0) { parent = curKey; j++; dr["Start Date"] = stDate; dr["Finish Date"] = stDate.AddDays(10); //summary gantt bar style dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[1] { (GanttUtilities.CustomBarStyle)(0) }; } else if (i % 10 == 5) { // Milestone dr["Start Date"] = stDate; dr["Finish Date"] = dr["Start Date"];// +DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20)); // Milestone Gantt bar style dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[1] { (GanttUtilities.CustomBarStyle)(2) }; } else { dr["Start Date"] = stDate.AddDays(i % 4); ; dr["Finish Date"] = stDate.AddDays(i % 10); dr["CompleteThrough"] = stDate.AddDays(1); // Standard Gantt bar style dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[2] { (GanttUtilities.CustomBarStyle)(1),(GanttUtilities.CustomBarStyle)(3) }; }Der ersten Aufgabe wird eine Balkenart vom Typ "Zusammenfassung", der fünften eine vom Typ "Meilenstein" und den anderen eine vom Typ "Standard" zugewiesen.
Vorgangsbalkenarten werden mithilfe von DefaultGanttBarStyleIdsColumnName festgelegt. Wenn mehrere Balkenarten verwendet werden, wird jede Balkenart die vorherige Balkenart überlagernd gezeichnet, weshalb die Reihenfolge wichtig ist, in der Balkenarten zugewiesen werden. Beachten Sie, dass die Standardbalkenart erstellt wird, indem zuerst der Standardbalken und anschließend der "Prozent abgeschlossen"-Balken gezeichnet wird. Dies wird durch die Reihenfolge der Balkenarten im benutzerdefinierten Balkenartenarray bestimmt.
dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[2] { (GanttUtilities.CustomBarStyle)(1),(GanttUtilities.CustomBarStyle)(3) };
So testen Sie das Webpart
Drücken Sie in Visual Studio F5, um das Projekt auszuführen.
Wenn Sie das Projekt ausführen, erfolgt die Bereitstellung, und die SharePoint 2010-Website wird geöffnet. Das Webpart wird automatisch dem SharePoint 2010-Webpartkatalog hinzugefügt.
Öffnen und bearbeiten Sie eine beliebige Webparts-Seite. Sie können das Webpart einer beliebigen Webparts-Seite hinzufügen.
Klicken Sie auf Einfügen, dann auf Webpart, und wählen Sie das Webpart JSWebPart in der benutzerdefinierten Kategorie aus. Das Webpart wird auf der Seite angezeigt.
Sobald das Gantt-Diagramm im Browserfenster angezeigt wird, ändern Sie entweder das Anfangs- oder Enddatum bzw. das "Prozent abgeschlossen"-Datum.
Das Gantt-Diagramm überwacht Änderungen am Anfangs- oder Enddatum bzw. das "Prozent abgeschlossen"-Datum. Ändert sich eine dieser Angaben, wird der Balken neu gezeichnet.