[方法] JS グリッドを使用してガントチャートを作成する

[アーティクル]
06/15/2015

最終更新日: 2011年2月15日

適用対象: SharePoint Foundation 2010

この説明手順では、JS グリッドコントロールを使用してガントチャートを作成する方法について説明します。このトピックは、「[方法] 基本の JS グリッドを作成する」に続くトピックであり、ここでは、サマリー、標準、マイルストーン、および達成率のガントバーのスタイルを定義します。各バーのスタイルには、形状、パターン、および色が設定されています。各バーの終端には、バーの終端スタイル、色、およびパターンが設定されています。ガントバーのスタイルを定義するコードは GanttUtilities.cs ファイルにあります。このファイルは、「[方法] 基本の JS グリッドを作成する」で作成された GridUtils フォルダーに配置されます。ここでは、ガントチャートの機能をよりわかりやすく示すデータを提供するようにグリッドデータを変更します。そして、最後に GridDataSerializer の enableGantt メソッドを使用して、ガントチャートを有効にします。

注意

ユーザーのコンピューターでは、以下の説明の中の Visual Studio ユーザーインターフェイス要素とは異なる名前あるいは場所が表示されていることがあります。ユーザーの Visual Studio エディションと、使用する設定によって、これらの要素が決定されます。

前提条件

Microsoft SharePoint Foundation 2010
Microsoft Visual Studio 2010
Microsoft Visual Studio 2010 の SharePoint 開発者ツール
[方法] 基本の JS グリッドを作成するの完了

注意

この手順は、Visual Studio 2010 を使用せずに行うことができますが、Visual Studio 2010 と Microsoft Visual Studio 2010 の SharePoint 開発者ツールを使用して行うほうが簡単です。

ガントバーのスタイルを作成するには

Visual Studio で、「[方法] 基本の JS グリッドを作成する」の手順に従って作成したプロジェクトを開きます。
GridUtilities.cs を開きます。
DefaultGanttBarStyleIdsColumnName は、既定のガントバースタイルの ID 情報を格納します。DefaultGanttBarStyleIdsColumnName を列またはフィールドとして使用しないでください。これを回避するコードが既に GridUtilities.cs に含まれていますが、このコードはコメントアウトされています。

次の行のコメントを解除します。
```
// && iterator.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName 
// Uncomment for the Gantt how-to
```
次の行のコメントも解除します。
```
// && dc.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName 
// Uncomment for Gantt how-to
```
System.Drawing への参照を追加します。

ソリューションエクスプローラーで [参照設定] を右クリックし、[参照の追加] をクリックします。[.NET] タブで [System.Drawing] を選択し、[OK] をクリックします。System.Drawing を使用して、バーおよびバーの終端を描画します。
GanttUtilities.cs ファイルを作成します。
1. ソリューションエクスプローラーで [GridUtils] フォルダーを右クリックし、[追加] をポイントし、[新しいアイテム] をクリックします。
2. [Visual C#]、[コード] の順に選択し、[コードファイル] を選択します。
3. ファイルに GanttUtilities.cs という名前を付けます。

次のコードを 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;
        }
    }
}

GanttStyleInfo クラスでは、サマリー、標準、マイルストーン、および達成率のバーのスタイルを定義します。

ガントチャートを有効にするには

JSGridWebPartUserControl.ascx.cs を開きます。
EnableGantt を Page_Load メソッドに追加します。
```
// 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) では、ガントバーを開始する開始日、バーを終了する終了日、ガントバーのスタイルの場所、および依存列の名前 (この場合は null) を定義します。簡単にするために、開始日と終了日は、現在の日付から生成されます。

次の手順では、グリッドデータを変更して、ガントバーのスタイルを各データ行に関連付けます。

グリッドデータファイルを変更するには

GridData.cs を開きます。
ガントチャートでは、ファイルにガントバースタイルの ID 情報を格納する必要があります。これを行うコードは、既に GridData.cs に含まれていますが、コメントアウトされています。次の行のコメントを解除します。
```
//data.Columns.Add(new DataColumn(GridSerializer.DefaultGanttBarStyleIdsColumnName, typeof(GanttUtilities.CustomBarStyle[]))); // uncomment for the Create a Gantt Chart Using JS Grid How-To.
```

ランダムな日付を開始日、達成日、および終了日に割り当てるコードを特定します。

                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));

そのコードを次のコードに置き換えます。

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) };
                }

最初のタスクにはサマリータスクのスタイルが割り当てられています。5 番目のタスクにはマイルストーンのスタイルが、そして、その他のタスクには "標準" のバースタイルが割り当てられています。

ガントバーのスタイルは、DefaultGanttBarStyleIdsColumnName を使用して設定されます。複数のバースタイルが使用されている場合は、各バースタイルが前のバースタイルの上に描画されます。このため、バースタイルが適用される順序は重要です。最初に標準のバーを描画することで標準のバースタイルが作成されてから、達成バーが描画されていることに気を付けてください。これは、カスタムバースタイルアレイのバースタイルの順序によって決まります。

dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[2] { (GanttUtilities.CustomBarStyle)(1),(GanttUtilities.CustomBarStyle)(3) };

Web パーツをテストするには

Visual Studio で、F5 キーを押してプロジェクトを実行します。

プロジェクトを実行すると、展開が行われ、SharePoint 2010 サイトが開きます。Web パーツは、SharePoint 2010 Web パーツギャラリーに自動的に追加されます。
任意の Web パーツページを開いて編集します。Web パーツは、任意の Web パーツページに追加することができます。
[挿入]、[Web パーツ] の順にクリックし、カスタムカテゴリから [JSWebPart] を選択します。Web パーツがページ上に表示されます。
ガントチャートがブラウザーウィンドウに表示されたら、開始日、達成日、終了日のいずれかを変更します。

ガントチャートは、開始日、達成日、または終了日に対する変更を監視します。いずれかの日付に変更があると、バーは再描画されます。

次の方法で共有

[方法] JS グリッドを使用してガントチャートを作成する

前提条件

ガントバーのスタイルを作成するには

ガントチャートを有効にするには

グリッドデータファイルを変更するには

Web パーツをテストするには

関連項目

概念

その他のリソース

次の方法で共有

[方法] JS グリッドを使用してガント チャートを作成する

前提条件

ガント バーのスタイルを作成するには

ガント チャートを有効にするには

グリッド データ ファイルを変更するには

Web パーツをテストするには

関連項目

概念

その他のリソース

[方法] JS グリッドを使用してガントチャートを作成する

ガントバーのスタイルを作成するには

ガントチャートを有効にするには

グリッドデータファイルを変更するには