Partager via

Ajouter un graphique

  • Article

Azure DevOps Services | Azure DevOps Server 2022 | Azure DevOps Server 2019

Découvrez comment ajouter des graphiques à vos extensions. Vous pouvez ajouter des graphiques à n’importe quelle extension Azure DevOps Services.

Conseil

Consultez notre documentation la plus récente sur le développement d’extensions à l’aide du Kit de développement logiciel (SDK) d’extension Azure DevOps.

Les graphiques sont faciles à créer, redimensionnables, interactifs et cohérents avec l’apparence Azure DevOps Services. Les types de graphiques suivants sont pris en charge :

  • Courbes
  • Barres
  • Colonne
  • Domaine
  • Barres empilées
  • Colonne empilée
  • Aire empilée
  • Pie
  • Tableau croisé dynamique
  • Histogramme

Si vous êtes pressé et que vous souhaitez mettre la main sur le code immédiatement, vous pouvez télécharger les exemples complets. Une fois téléchargé, accédez au charts dossier, puis suivez les instructions d’empaquetage et de publication pour publier l’exemple d’extension. L’extension contient des exemples de widgets de graphique.

Comment organiser votre code

Pour ce tutoriel, nous créons un widget et y ajoutons un graphique. Pour ce faire, dans le home dossier de votre projet, créez un chart.html fichier avec le contenu suivant :

Fichier HTML

<!DOCTYPE html>
<html>
<head>
    <script src="sdk/scripts/VSS.SDK.js"></script>
    <script src="scripts/pie-chart.js"></script>
</head>
<body>
    <div class="widget">
        <h2 class="title">Chart Widget</h2>
        <div id="Chart-Container"></div>
    </div>
</body>
</html>

Utilisez la commande npm install pour récupérer le Kit de développement logiciel (SDK) : npm install vss-web-extension-sdk. Pour en savoir plus sur le SDK, consultez la page GitHub du SDK client.

Vérifiez que le VSS.SDK.js fichier se trouve dans le sdk/scripts dossier afin que le chemin d’accès soit home/sdk/scripts/VSS.SDK.js.

Images

Ajoutez des images à un img dossier dans le répertoire de votre projet afin que le chemin d’accès soit home/img/logo.png et home/img/CatalogIcon.png. Consultez notre documentation la plus récente, l’exemple de KIT de développement logiciel (SDK)Formula Design System et Azure DevOps.

Fichier manifeste d’extension

Dans le home dossier de votre projet, créez votre fichier manifeste d’extension. Créez un fichier vss-extension.json avec le contenu suivant :

{
    "manifestVersion": 1,
    "id": "samples-charts",
    "version": "1.0.0",
    "name": "Interactive Charts in Azure DevOps Services",
    "description": "Samples of interactive charts from the Chart SDK.",
    "publisher": "Fabrikam",
    "targets": [
        {
            "id": "Microsoft.VisualStudio.Services"
        }
    ],
    "icons": {
        "default": "img/logo.png"
    },
    "demands": ["contribution/ms.vss-dashboards-web.widget-sdk-version-2", "contribution/ms.vss-web.charts-service"],
    "contributions": [
        {
            "id": "chart",
            "type": "ms.vss-dashboards-web.widget",
            "targets": [
                "ms.vss-dashboards-web.widget-catalog"
            ],
            "properties": {
                "name": "Sample Chart",
                "description": "A simple chart widget with no configuration and hard-coded data.",
                "catalogIconUrl": "img/CatalogIcon.png",
                "uri": "chart.html",
                "supportedSizes": [
                    {
                        "rowSpan": 2,
                        "columnSpan": 2
                    }
                ],
                "supportedScopes": [
                    "project_team"
                ]
            }
        }
    ],
    "files": [
        {
            "path": "chart.html",
            "addressable": true
        },
        {
            "path": "sdk/scripts/VSS.SDK.js",
            "addressable": true
        },
        {
            "path": "img",
            "addressable": true
        },
        {
            "path": "scripts",
            "addressable": true
        }
    ],
    "scopes": [
    ]
}

Avant de charger cette extension, vous devez mettre à jour le vers le publisher vôtre.

Placez les extraits de code suivants dans un chart.js fichier dans un scripts dossier, afin que le chemin d’accès soit home/scripts/chart.js. Suivez ensuite les instructions d’empaquetage et de publication pour publier votre extension.

Graphiques

Graphique

Cet exemple affiche un graphique. Les data et labelValues ont été codés en dur ici, et doivent être modifiés pour les données que vous souhaitez visualiser.

VSS.init({
        explicitNotifyLoaded: true,
        usePlatformStyles: true 
    });

VSS.require([
        "TFS/Dashboards/WidgetHelpers", 
        "Charts/Services"
        ],
        function (WidgetHelpers, Services) {
        WidgetHelpers.IncludeWidgetStyles();
        VSS.register("chart", function () { 
             return {
             load:function() {
                return Services.ChartsService.getService().then(function(chartService){
                    var $container = $('#Chart-Container');
                    var chartOptions = { 
                        "hostOptions": { 
                            "height": "290", 
                            "width": "300"
                        },
                        "chartType": "pie",
                        "series": [{
                            "data": [11, 4, 3, 1]
                        }],
                        "xAxis": { 
                            "labelValues": ["Design", "On Deck", "Completed", "Development"] 
                        }, 
                        "specializedOptions": {
                            "showLabels": "true",
                            "size": 200
                        } 
                    };

                    chartService.createChart($container, chartOptions);
                    return WidgetHelpers.WidgetStatusHelper.Success();
                });
                }
             }
            });
    VSS.notifyLoadSucceeded();
});

Ici, la taille du graphique est définie dans hostOptions. La propriété de série est un tableau et contient un objet unique contenant des données. L’objet xAxis contient labelValues, qui correspond à .data Pour les graphiques en secteurs, nous avons également des options spéciales définies par la specializedOptions propriété . Ici, nous activons explicitement les étiquettes de données pour le graphique en secteurs. Nous devons également définir la taille du graphique en secteurs en spécifiant son diamètre externe.

Le graphique nécessite un conteneur, les options de graphique et un appel au service de graphique pour l’initialisation et le rendu. Pour plus d’informations sur les options de graphique, consultez vss-web-extension-sdk/typings/charts.

Graphique en aires empilées

L’exemple suivant affiche un graphique en aires empilées. Ce type de graphique est idéal pour comparer une relation de parties à un tout et mettre en évidence les tendances générales entre les catégories. Il est couramment utilisé pour comparer les tendances au fil du temps. Cet exemple spécifie également une couleur personnalisée pour l’une des séries rendues.

VSS.init({
        explicitNotifyLoaded: true,
        usePlatformStyles: true 
    });

VSS.require([
        "TFS/Dashboards/WidgetHelpers", 
        "Charts/Services"
        ],
        function (WidgetHelpers, Services) {
        WidgetHelpers.IncludeWidgetStyles();
        VSS.register("StackedAreaChart", function () { 
             return {
             load:function() {
                return Services.ChartsService.getService().then(function(chartService){
                    var $container = $('#Chart-Container');
                    var chartOptions = { 
                        "hostOptions": { 
                            "height": "290", 
                            "width": "300"
                        },
                        "chartType": "stackedArea",
                        "series": [
                            {
                                "name": "Completed",
                                "data": [1,3,4,3,6,1,9,0,8,11]
                            },
                            {
                                "name": "Development",
                                "data": [1,1,0,3,0,2,8,9,2,8]
                            },
                            {
                                "name": "Design",
                                "data": [0,0,0,6,1,1,9,9,1,9], 
                                "color": "#207752"
                            },
                            {
                                "name": "On Deck",
                                "data": [1,2,4,5,4,2,1,7,0,6]
                            }
                        ],
                        "xAxis": {
                            "labelFormatMode": "dateTime_DayInMonth",
                            "labelValues": [
                                "1/1/2016",
                                "1/2/2016",
                                "1/3/2016",
                                "1/4/2016",
                                "1/5/2016",
                                "1/6/2016",
                                "1/7/2016",
                                "1/8/2016",
                                "1/9/2016",
                                "1/10/2016"
                            ]
                        }
                    }
                    chartService.createChart($container, chartOptions);
                    return WidgetHelpers.WidgetStatusHelper.Success();
                });
                }
             }
            });
    VSS.notifyLoadSucceeded();
});

Tableau croisé dynamique

Cet exemple affiche un tableau croisé dynamique. Ce type de graphique permet d’organiser et de résumer des données complexes sous forme tabulaire.

VSS.init({
        explicitNotifyLoaded: true,
        usePlatformStyles: true 
    });

VSS.require([
        "TFS/Dashboards/WidgetHelpers", 
        "Charts/Services"
        ],
        function (WidgetHelpers, Services) {
        WidgetHelpers.IncludeWidgetStyles();
        VSS.register("PivotTable", function () { 
             return {
             load:function() {
                return Services.ChartsService.getService().then(function(chartService){
                    var $container = $('#Chart-Container');
                    var chartOptions = { 
                        "hostOptions": { 
                            "height": "290", 
                            "width": "300"
                        },
                        "chartType": "table",
                        "xAxis": {
                            "labelValues": ["Design","In Progress","Resolved","Total"]
                        },
                        "yAxis": {
                            "labelValues": ["P1","P2","P3","Total"]
                        },
                        "series": [
                            {
                                "name": "Design",
                                "data": [
                                    [0,0,1],
                                    [0,1,2],
                                    [0,2,3]
                                ]
                            },
                            {
                                "name": "In Progress",
                                "data": [
                                    [1,0,4],
                                    [1,1,5],
                                    [1,2,6]
                                ]
                            },
                            {
                                "name": "Resolved",
                                "data": [
                                    [2,0,7],
                                    [2,1,8],
                                    [2,2,9]
                                ]
                            },
                            {
                                "name": "Total",
                                "data": [
                                    [3,0,12],
                                    [3,1,15],
                                    [3,2,18],
                                    [0,3,6],
                                    [1,3,15],
                                    [2,3,24],
                                    [3,3,10]
                                ],
                                "color": "rgba(255,255,255,0)"
                            }
                        ]
                    }

                    chartService.createChart($container, chartOptions);
                    return WidgetHelpers.WidgetStatusHelper.Success();
                });
                }
             }
            });
    VSS.notifyLoadSucceeded();
});