Procédure : créer un graphique croisé dynamique à l’aide de la grille JS

Article
09/24/2014

Dernière modification : jeudi 23 juin 2011

S’applique à : SharePoint Foundation 2010

Cette procédure montre comment créer un graphique croisé dynamique en utilisant le Contrôle Grille JS et Microsoft Visual Studio 2010. La présente rubrique fait suite à la rubrique Procédure : créer une grille JS de base.

Le graphique croisé dynamique achevé montre un affichage croisé dynamique des données, dans lequel chaque département indique les résultats trimestriels pour deux exercices. Pour créer le graphique croisé dynamique, vous devez fournir les données du graphique croisé dynamique, les définitions des colonnes du tableau croisé dynamique et la logique de l’utilitaire de grille permettant de construire le graphique de façon adéquate. La dernière étape consiste à activer le volet de la grille croisée dynamique.

Notes

Il est possible que votre ordinateur affiche des noms ou des emplacements différents pour certains éléments de l’interface utilisateur de Visual Studio dans les instructions suivantes. L’édition Visual Studio dont vous disposez et les paramètres que vous utilisez déterminent ces éléments.

Conditions requises

Microsoft SharePoint Foundation 2010
Visual Studio 2010
Outils de développement SharePoint dans Microsoft Visual Studio 2010

Vous devez avoir effectué la procédure Procédure : créer une grille JS de base.

Notes

Bien que vous puissiez effectuer cette procédure sans utiliser Visual Studio, il est plus facile de recourir à Visual Studio 2010 et aux Outils de développement SharePoint dans Microsoft Visual Studio 2010.

Pour ajouter les données du tableau croisé dynamique au fichier des données de la grille

En effectuant l’opération sous le compte Administrateur, démarrez Visual Studio 2010 et ouvrez la solution de grille JS (JSGrid) créée dans Procédure : créer une grille JS de base.
Développez le dossier GridUtils et ouvrez GridData.cs.

La grille du tableau croisé dynamique requiert des données trimestrielles pour chaque département. Cette procédure ajoute les données trimestrielles au fichier de données GridData.cs, qui contient déjà un échantillon de données pour la grille de base.
Modifiez l’instruction return DataTable comme suit.
```
    return buildPivotedView(data);
```

Collez le code suivant dans 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

Le sérialiseur du Contrôle Grille JS sérialise les données et la configuration du Contrôle Grille JS en une chaîne JSON (JavaScript Object Notation). Le contrôle de la grille génère la chaîne JSON et la place sur la page.

SerializeDataValue indique au sérialiseur de sérialiser la valeur réelle. SerializeLocalizedValue indique au sérialiseur de sérialiser la valeur affichée ou localisée. Imaginez une date. Par exemple, une date pourrait être représentée par « 11/2010 ». La date affichée au format mois/année est très différente de la valeur réelle de la date.

Pour ajouter le code du tableau croisé dynamique au fichier des utilitaires de grille

Le code permettant d’analyser les données de la grille croisée dynamique doit être ajouté à GridUtilities.cs. GridUtilities.cs et GridData.cs se trouvent dans le dossier GridUtils.
Dans Visual Studio, ouvrez GridUtilities.cs.

Collez le code suivant dans 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

Le sérialiseur du Contrôle Grille JS sérialise les données et la configuration du Contrôle Grille JS en une chaîne JSON (JavaScriptObjectNotation). Le contrôle de la grille génère la chaîne JSON et la place sur la page.

Pour activer la grille croisée dynamique

Ouvrez JSGridWebPartUserControl.cs

Dans la méthode de chargement de la page, dès que le sérialiseur de la grille a été créé, ajoutez le code suivant à la classe JSGridWebPartUserControl.

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

gds.EnablePivotedGridPane(GridUtilities.GetPivotedGridColumns(data))

Pour tester le composant WebPart de graphique croisé dynamique

Dans Visual Studio, appuyez sur la touche F5 pour exécuter le projet. Le composant WebPart est automatiquement ajouté à la galerie de composants WebPart SharePoint. Vous pouvez ajouter le composant WebPart à n’importe quelle page de composants WebPart.

Voir aussi

Référence

Microsoft.SharePoint.JSGrid

Partager via