JS グリッドを使用してピボットグラフを作成する

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

最終更新日: 2011年6月23日

適用対象: SharePoint Foundation 2010

ここでは、JS グリッドコントロールおよび Microsoft Visual Studio 2010 を使用してピボットグラフを作成する方法について説明します。これは、「[方法] 基本の JS グリッドを作成する」の後に続くトピックです。

完全なピボットグラフにはデータのピボットビューが表示され、それぞれの部門に 2 年間にわたる四半期の結果が示されています。ピボットグラフを作成するには、グラフを適切に作成するためのピボットグラフデータ、ピボット列の定義、およびグリッドユーティリティロジックを提供する必要があります。そして最後に、ピボットグリッドペインを有効にします。

注意

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

前提条件

Microsoft SharePoint Foundation 2010
Visual Studio 2010
Microsoft Visual Studio 2010 の SharePoint 開発者ツール

完全な方法: [方法] 基本の JS グリッドを作成する

注意

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

ピボットデータをグリッドデータファイルに追加するには

管理者として Visual Studio 2010 を起動し、「[方法] 基本の JS グリッドを作成する」で作成した JSGrid ソリューションを開きます。
GridUtils フォルダーを展開し、GridData.cs を開きます。

ピボットグリッドには各部門の四半期データが必要です。GridData.cs には、基本グリッドのサンプルデータが既に含まれています。この手順により、四半期データがそのデータファイルに追加されます。
次に示すように DataTable return ステートメントを変更します。
```
    return buildPivotedView(data);
```

次のコードを GridData.cs 内に貼り付けます。

        private DataTable buildPivotedView(DataTable data)
        {
            //quarter 1 columns
            data.Columns.Add(new DataColumn("costq 1", typeof(int)));
            data.Columns.Add(new DataColumn("costq 2", typeof(int)));
            data.Columns.Add(new DataColumn("costq 3", typeof(int)));
            data.Columns.Add(new DataColumn("costq 4", typeof(int)));

            //quarter 2 columns
            data.Columns.Add(new DataColumn("costq 5", typeof(int)));
            data.Columns.Add(new DataColumn("costq 6", typeof(int)));
            data.Columns.Add(new DataColumn("costq 7", typeof(int)));
            data.Columns.Add(new DataColumn("costq 8", typeof(int)));

            //build column headers
            data.Columns.Add(new DataColumn("Quarter 1", typeof(string)));
            data.Columns.Add(new DataColumn("Quarter 2", typeof(string)));
            data.Columns.Add(new DataColumn("Quarter 3", typeof(string)));
            data.Columns.Add(new DataColumn("Quarter 4", typeof(string)));

            int i = 0;
            foreach (DataRow dr in data.Rows)
            {
                //pivoted view
                dr["costq 1"] = _rand.Next(1000000) + 30000;
                dr["costq 2"] = _rand.Next(1000000) + 30000;
                dr["costq 3"] = _rand.Next(1000000) + 30000;
                dr["costq 4"] = _rand.Next(1000000) + 30000;
                dr["costq 5"] = _rand.Next(1000000) + 30000;
                dr["costq 6"] = _rand.Next(1000000) + 30000;
                dr["costq 7"] = _rand.Next(1000000) + 30000;
                dr["costq 8"] = _rand.Next(1000000) + 30000;

                dr["FY 2009 Estimate"] = ((int)dr["costq 1"] + (int)dr["costq 2"] +
                    (int)dr["costq 3"] + (int)dr["costq 4"]) / 4;
                dr["FY 2010 Estimate"] = ((int)dr["costq 5"] + (int)dr["costq 6"] +
                    (int)dr["costq 7"] + (int)dr["costq 8"]) / 4;
                dr["Yearly Estimate"] = ((int)dr["FY 2009 Estimate"]
                    + (int)dr["FY 2010 Estimate"]) / 2;
                i++;

                dr["Quarter 1"] = "Quarter 1";
                dr["Quarter 2"] = "Quarter 2";
                dr["Quarter 3"] = "Quarter 3";
                dr["Quarter 4"] = "Quarter 4";
            }
            return data;
        }

Private Function buildPivotedView(ByVal data As DataTable) As DataTable
    'quarter 1 columns
    data.Columns.Add(New DataColumn("costq 1", GetType(Integer)))
    data.Columns.Add(New DataColumn("costq 2", GetType(Integer)))
    data.Columns.Add(New DataColumn("costq 3", GetType(Integer)))
    data.Columns.Add(New DataColumn("costq 4", GetType(Integer)))

    'quarter 2 columns
    data.Columns.Add(New DataColumn("costq 5", GetType(Integer)))
    data.Columns.Add(New DataColumn("costq 6", GetType(Integer)))
    data.Columns.Add(New DataColumn("costq 7", GetType(Integer)))
    data.Columns.Add(New DataColumn("costq 8", GetType(Integer)))

    'build column headers
    data.Columns.Add(New DataColumn("Quarter 1", GetType(String)))
    data.Columns.Add(New DataColumn("Quarter 2", GetType(String)))
    data.Columns.Add(New DataColumn("Quarter 3", GetType(String)))
    data.Columns.Add(New DataColumn("Quarter 4", GetType(String)))

    Dim i As Integer = 0
    For Each dr As DataRow In data.Rows
        'pivoted view
        dr("costq 1") = _rand.Next(1000000) + 30000
        dr("costq 2") = _rand.Next(1000000) + 30000
        dr("costq 3") = _rand.Next(1000000) + 30000
        dr("costq 4") = _rand.Next(1000000) + 30000
        dr("costq 5") = _rand.Next(1000000) + 30000
        dr("costq 6") = _rand.Next(1000000) + 30000
        dr("costq 7") = _rand.Next(1000000) + 30000
        dr("costq 8") = _rand.Next(1000000) + 30000

        dr("FY 2009 Estimate") = (CInt(Fix(dr("costq 1"))) + CInt(Fix(dr("costq 2"))) + CInt(Fix(dr("costq 3"))) + CInt(Fix(dr("costq 4")))) / 4
        dr("FY 2010 Estimate") = (CInt(Fix(dr("costq 5"))) + CInt(Fix(dr("costq 6"))) + CInt(Fix(dr("costq 7"))) + CInt(Fix(dr("costq 8")))) / 4
        dr("Yearly Estimate") = (CInt(Fix(dr("FY 2009 Estimate"))) + CInt(Fix(dr("FY 2010 Estimate")))) / 2
        i += 1

        dr("Quarter 1") = "Quarter 1"
        dr("Quarter 2") = "Quarter 2"
        dr("Quarter 3") = "Quarter 3"
        dr("Quarter 4") = "Quarter 4"
    Next
    Return data
End Function

JS グリッドコントロールシリアライザーは、JavaScript Object Notation (JSON) 文字列に JS グリッドコントロール設定とデータをシリアル化します。グリッドコントロールは JSON を生成して、ページにそれを配置します。

SerializeDataValue は実際の値をシリアル化するようにシリアライザーに指示します。SerializeLocalizedValue は、シリアライザーに表示された値、あるいはローカライズされた値をシリアル化するように指示します。ここでは、日付を例にします。たとえば、日付は "11/2010" と表すことができます。月/年形式で表示された日付は、実際の日付値とは大きく異なります。

ピボットコードをグリッドユーティリティファイルに追加するには

ピボットグリッドデータを解析するコードを GridUtilities.cs に追加する必要があります。GridUtilities.cs と GridData.cs は GridUtils フォルダーにあります。
Visual Studio で、GridUtilities.cs を開きます。

次のコードを GridUtilities.cs 内に貼り付けます。

        public static IList<PivotedGridColumn> GetPivotedGridColumns(DataTable table)
        {
            List<PivotedGridColumn> r = new List<PivotedGridColumn>();

            //Create the Pivoted "Header" Column
            PivotedGridColumn col = new PivotedGridColumn();
            col.ColumnKey = "header";
            col.FieldKeys = new String[] { "Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4" };
            col.Name = "Quarter";
            col.Width = 100;
            r.Add(col);

            //display 
            col = new PivotedGridColumn();
            col.ColumnKey = "tests1";
            col.FieldKeys = new String[] { "costq 1", "costq 2", "costq 3", "costq 4" };
            col.Name = "Fiscal 2009";
            col.Width = 100;
            r.Add(col);

            col = new PivotedGridColumn();
            col.ColumnKey = "tests2";
            col.FieldKeys = new String[] { "costq 5", "costq 6", "costq 7", "costq 8" };
            col.Name = "Fiscal 2010";
            col.Width = 100;
            r.Add(col);

            return r;
        }

Public Shared Function GetPivotedGridColumns(ByVal table As DataTable) As IList(Of PivotedGridColumn)
    Dim r As New List(Of PivotedGridColumn)()

    'Create the Pivoted "Header" Column
    Dim col As New PivotedGridColumn()
    col.ColumnKey = "header"
    col.FieldKeys = New String() {"Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4"}
    col.Name = "Quarter"
    col.Width = 100
    r.Add(col)

    'display 
    col = New PivotedGridColumn()
    col.ColumnKey = "tests1"
    col.FieldKeys = New String() {"costq 1", "costq 2", "costq 3", "costq 4"}
    col.Name = "Fiscal 2009"
    col.Width = 100
    r.Add(col)

    col = New PivotedGridColumn()
    col.ColumnKey = "tests2"
    col.FieldKeys = New String() {"costq 5", "costq 6", "costq 7", "costq 8"}
    col.Name = "Fiscal 2010"
    col.Width = 100
    r.Add(col)

    Return r
End Function

JS グリッドコントロールシリアライザーは、JavaScriptObjectNotation (JSON) 文字列に JS グリッドコントロール設定とデータをシリアル化します。グリッドコントロールは JSON を生成して、ページにそれを配置します。

ピボットグリッドを有効にするには

JSGridWebPartUserControl.cs を開きます。
Page Load メソッドで、グリッドシリアライザーが作成された直後に、次のコードを JSGridWebPartUserControl クラスに追加します。
```
          gds.EnablePivotedGridPane(GridUtilities.GetPivotedGridColumns(data));
```
```
gds.EnablePivotedGridPane(GridUtilities.GetPivotedGridColumns(data))
```

ピボットグラフの Web パーツをテストするには

Visual Studio で、F5 キーを押してプロジェクトを実行します。Web パーツは、SharePoint Web パーツギャラリーに自動的に追加されます。Web パーツはどの [Web パーツ] ページにも追加できます。

JS グリッドを使用してピボットグラフを作成する

前提条件

ピボットデータをグリッドデータファイルに追加するには

ピボットコードをグリッドユーティリティファイルに追加するには

ピボットグリッドを有効にするには

ピボットグラフの Web パーツをテストするには

関連項目

参照

その他のリソース

JS グリッドを使用してピボットグラフを作成する

前提条件

ピボット データをグリッド データ ファイルに追加するには

ピボット コードをグリッド ユーティリティ ファイルに追加するには

ピボット グリッドを有効にするには

ピボット グラフの Web パーツをテストするには

関連項目

参照

その他のリソース

ピボットデータをグリッドデータファイルに追加するには

ピボットコードをグリッドユーティリティファイルに追加するには

ピボットグリッドを有効にするには

ピボットグラフの Web パーツをテストするには