Gewusst wie: Erstellen eines PivotChart mithilfe von JS Grid

Artikel
09/24/2014

Letzte Änderung: Donnerstag, 23. Juni 2011

Gilt für: SharePoint Foundation 2010

Diese Vorgehensweise zeigt, wie ein PivotChart mithilfe von Microsoft Visual Studio 2010 und dem JS Grid-Steuerelement erstellt wird. Das Thema beginnt, wo Vorgehensweise: Erstellen eines einfachen JS-Rasters endet.

Das abgeschlossene PivotChart zeigt eine pivotierte Ansicht der Daten, wobei jede Abteilung vierteljährliche Ergebnisse für zwei Geschäftsjahre anzeigt. Zum Erstellen des PivotChart müssen Sie die PivotChart-Daten, die Pivotspaltendefinitionen und die Logik des Rasterhilfsprogramms für die richtige Erstellung des Diagramms bereitstellen. Der letzte Schritt besteht darin, den pivotierten Rasterbereich zu aktivieren.

Hinweis
Auf Ihrem Computer werden möglicherweise abweichende Namen oder Orte für einige Elemente der Visual Studio-Benutzeroberfläche (User Interface, UI) in den folgenden Anweisungen angezeigt. Diese Elemente werden durch die installierte Edition von Visual Studio und die verwendeten Einstellungen bestimmt.

Voraussetzungen

Microsoft SharePoint Foundation 2010
Visual Studio 2010
SharePoint-Entwicklungstools in Microsoft Visual Studio 2010

Abgeschlossene Ausführung der Vorgehensweise Vorgehensweise: Erstellen eines einfachen JS-Rasters

Hinweis
Obwohl diese Vorgehensweise ohne Visual Studio durchgeführt werden kann, ist es einfacher, Visual Studio 2010 und SharePoint-Entwicklungstools in Microsoft Visual Studio 2010 zu verwenden.

So fügen Sie der Rasterdatendatei die Pivotdaten hinzu

Starten Sie als Administrator Visual Studio 2010, und öffnen Sie die in Vorgehensweise: Erstellen eines einfachen JS-Rasters erstellte JSGrid-Lösung.
Erweitern Sie den Ordner GridUtils, und öffnen Sie GridData.cs.

Die PivotTable erfordert vierteljährliche Daten für jede Abteilung. Beispieldaten für grundlegende Raster befinden sich bereits in GridData.cs. Mit diesem Verfahren werden der Datendatei vierteljährliche Daten hinzugefügt.
Ändern Sie die return-Anweisung der Datentabelle wie folgt.
```
    return buildPivotedView(data);
```

Fügen Sie den folgenden Code in GridData.cs ein.

        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

Das Serialisierungsprogramm für das JS Grid-Steuerelement serialisiert die Konfiguration und die Daten für das JS Grid-Steuerelement in eine JSON-Zeichenfolge (JavaScript Object Notation). Das Rastersteuerelement generiert die JSON und platziert sie auf der Seite.

SerializeDataValue weist das Serialisierungsprogramm zum Serialisieren des tatsächlichen Werts an. SerializeLocalizedValue weist das Serialisierungsprogramm zum Serialisieren des angezeigten oder lokalisierten Werts an. Betrachten Sie ein Datum. Beispielsweise kann ein Datum im Format "11/2010" dargestellt werden. Das angezeigte Datum im Format "Monat/Jahr" unterscheidet sich wesentlich vom tatsächlichen Datumswert.

So fügen Sie der Datei für Rasterhilfsprogramme den Pivotcode hinzu

Der Code zum Analysieren der pivotierten Rasterdaten muss GridUtilities.cs hinzugefügt werden. GridUtilities.cs und GridData.cs befinden sich im Ordner GridUtils.
Öffnen Sie in Visual Studio GridUtilities.cs.

Fügen Sie den folgenden Code in GridUtilities.cs ein.

        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

So aktivieren Sie das pivotierte Raster

Öffnen Sie JSGridWebPartUserControl.cs.

Fügen Sie in der Page Load-Methode unmittelbar nachdem das Raster-Serialisierungsprogramm erstellt wurde, Folgendes zur JSGridWebPartUserControl-Klasse hinzu.

          gds.EnablePivotedGridPane(GridUtilities.GetPivotedGridColumns(data));

gds.EnablePivotedGridPane(GridUtilities.GetPivotedGridColumns(data))

So testen Sie das Pivotdiagramm-Webpart

Drücken Sie in Visual Studio F5, um das Projekt auszuführen. Das Webpart wird automatisch dem SharePoint-Webpartkatalog hinzugefügt. Sie können das Webpart jeder beliebigen Webpartseite hinzufügen.

Siehe auch

Referenz

Microsoft.SharePoint.JSGrid

Freigeben über