Hinzufügen eines Diagramms
Azure DevOps Services | Azure DevOps Server 2022 | Azure DevOps Server 2019
Erfahren Sie, wie Sie Ihren Erweiterungen Diagramme hinzufügen können. Diagramme können jeder Azure DevOps Services-Erweiterung hinzugefügt werden.
Tipp
Sehen Sie sich unsere neueste Dokumentation zur Erweiterungsentwicklung mithilfe des Azure DevOps-Erweiterungs-SDK an.
Diagramme sind einfach zu erstellen, anpassbar, interaktiv und konsistent mit dem Erscheinungsbild Azure DevOps Services. Die folgenden Diagrammtypen werden unterstützt:
- Linie
- Balken
- Spalte
- Bereich
- Gestapelte Balken
- Gestapelte Spalte
- Gestapelte Fläche
- Kreisdiagramm
- PivotTable
- Histogramm
Wenn Sie es eilig haben und den Code sofort in die Hände bekommen möchten, können Sie die vollständigen Beispiele herunterladen.
Wechseln Sie nach dem Herunterladen zum charts Ordner, und befolgen Sie dann die Pack- und Veröffentlichungsanweisungen , um die Beispielerweiterung zu veröffentlichen.
Die Erweiterung enthält Beispieldiagrammwidgets.
So organisieren Sie Ihren Code
In diesem Tutorial erstellen wir ein Widget und fügen ein Diagramm hinzu.
Erstellen Sie dazu im home Ordner für Ihr Projekt eine chart.html Datei mit dem folgenden Inhalt:
HTML-Datei
<!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>
Verwenden Sie den befehl npm install , um das SDK abzurufen:
npm install vss-web-extension-sdk. Weitere Informationen zum SDK finden Sie auf der GitHub-Seite des Client SDK.
Stellen Sie sicher, dass sich die VSS.SDK.js Datei im sdk/scripts Ordner befindet, damit der Pfad lautet home/sdk/scripts/VSS.SDK.js.
Bilder
Fügen Sie bilder zu einem img Ordner in Ihrem Projektverzeichnis hinzu, sodass der Pfad und home/img/CatalogIcon.pngisthome/img/logo.png.
Sehen Sie sich unsere neueste Dokumentation an, das Beispiel-SDK für das Formula Design System und das Azure DevOps-Erweiterungs-SDK.
Erweiterungsmanifestdatei
Erstellen Sie im home Ordner Ihres Projekts Ihre Erweiterungsmanifestdatei. Erstellen Sie eine Datei vss-extension.json mit folgendem Inhalt:
{
"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": [
]
}
Bevor Sie diese Erweiterung hochladen, müssen Sie die publisher auf Ihre aktualisieren.
Fügen Sie die folgenden Codeausschnitte in eine chart.js Datei in einem Ordner ein scripts , sodass der Pfad lautet home/scripts/chart.js.
Befolgen Sie dann die Anweisungen zum Packen und Veröffentlichen , um Ihre Erweiterung zu veröffentlichen.
Diagramme
Diagramm
In diesem Beispiel wird ein Diagramm gerendert. Die data und labelValues wurden hier hartcodiert und müssen in die Daten geändert werden, die Sie visualisieren möchten.
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();
});
Hier wird die Größe des Diagramms in hostOptionsdefiniert. Die series-Eigenschaft ist ein Array und enthält ein einzelnes Objekt mit Daten darin. Das xAxis -Objekt enthält labelValues, was dem dataentspricht.
Für Kreisdiagramme verfügen wir auch über einige spezielle Optionen, die von der specializedOptions -Eigenschaft definiert werden. Hier aktivieren wir explizit Datenbeschriftungen für das Kreisdiagramm.
Außerdem muss die Größe des Kreisdiagramms festgelegt werden, indem der äußere Durchmesser angegeben wird.
Das Diagramm erfordert einen Container, die Diagrammoptionen und einen Aufruf des Diagrammdiensts zum Initialisieren und Rendern. Weitere Informationen zu Diagrammoptionen finden Sie unter vss-web-extension-sdk/typings/charts.
Gestapeltes Flächendiagramm
Im folgenden Beispiel wird ein gestapeltes Flächendiagramm gerendert. Dieser Diagrammtyp ist ideal, um eine Beziehung von Teilen mit einem Ganzen zu vergleichen und allgemeine Trends kategorienübergreifend hervorzuheben. Es wird häufig verwendet, um Trends im Laufe der Zeit zu vergleichen. In diesem Beispiel wird auch eine benutzerdefinierte Farbe für eine der gerenderten Serien angegeben.
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();
});
PivotTable
In diesem Beispiel wird eine Pivot-Tabelle gerendert. Dieser Diagrammtyp hilft beim Anordnen und Zusammenfassen komplexer Daten in tabellarischer Form.
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();
});