Een grafiek toevoegen
Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019
Meer informatie over het toevoegen van grafieken aan uw extensies. Grafieken kunnen worden toegevoegd aan elke Azure DevOps Services-extensie.
Tip
Bekijk onze nieuwste documentatie over het ontwikkelen van extensies met behulp van de Azure DevOps Extension SDK.
Grafieken zijn eenvoudig te maken, kunnen worden aangepast aan het formaat, zijn interactief en consistent met het uiterlijk van Azure DevOps Services. De volgende grafiektypen worden ondersteund:
- Lijn
- Staafdiagram
- Kolom
- Gebied
- Gestapelde staaf
- Gestapelde kolom
- Gestapeld vlak
- Cirkeldiagram
- Draaitabel
- Histogram
Als u haast hebt en de code meteen in handen wilt krijgen, kunt u de volledige voorbeelden downloaden.
Nadat het bestand is gedownload, gaat u naar de charts map en volgt u de instructies voor verpakken en publiceren om de voorbeeldextensie te publiceren.
De extensie bevat voorbeeldgrafiekwidgets.
Uw code organiseren
Voor deze zelfstudie maken we een widget en voegen we er een grafiek aan toe.
Hiervoor maakt u in de home map voor uw project een chart.html bestand met de volgende inhoud:
HTML-bestand
<!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>
Gebruik de installatieopdracht npm om de SDK op te halen:
npm install vss-web-extension-sdk. Ga naar de GitHub-pagina client-SDK voor meer informatie over de SDK.
Zorg ervoor dat het VSS.SDK.js bestand zich in de sdk/scripts map bevindt, zodat het pad is home/sdk/scripts/VSS.SDK.js.
Installatiekopieën
Voeg afbeeldingen toe aan een img map in uw projectmap, zodat het pad en home/img/CatalogIcon.pngishome/img/logo.png.
Zie onze nieuwste documentatie, het Formula Design System en de SDK voor azure DevOps-extensies.
Extensiemanifestbestand
Maak uw extensiemanifestbestand in de home map van uw project. Maak een vss-extension.json bestand met de volgende inhoud:
{
"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": [
]
}
Voordat u deze extensie uploadt, moet u de bijwerken naar uw publisher extensie.
Plaats de volgende codefragmenten in een chart.js bestand in een scripts map, zodat het pad is home/scripts/chart.js.
Volg vervolgens de instructies voor verpakken en publiceren om uw extensie te publiceren.
Grafieken
Grafiek
In dit voorbeeld wordt een grafiek weergegeven. De data en labelValues zijn hier vastgelegd en moeten worden gewijzigd in de gegevens die u wilt visualiseren.
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 wordt de grootte van de grafiek gedefinieerd in hostOptions. De reekseigenschap is een matrix en bevat één object met gegevens erin. Het xAxis object bevat labelValues, dat overeenkomt met de data.
Voor cirkeldiagrammen hebben we ook een aantal speciale opties die worden gedefinieerd door de specializedOptions eigenschap. Hier schakelen we expliciet gegevenslabels in voor het cirkeldiagram.
We moeten ook de grootte van het cirkeldiagram instellen door de buitendiameter op te geven.
De grafiek vereist een container, de grafiekopties en een aanroep naar de Grafiekservice om te initialiseren en weer te geven. Zie vss-web-extension-sdk/typings/charts voor meer informatie over grafiekopties.
Gestapeld vlakdiagram
In het volgende voorbeeld wordt een gestapeld vlakdiagram weergegeven. Dit grafiektype is ideaal om een relatie van delen met een geheel te vergelijken en algemene trends in categorieën te markeren. Het wordt vaak gebruikt om trends in de loop van de tijd te vergelijken. In dit voorbeeld wordt ook een aangepaste kleur opgegeven voor een van de reeksen die worden weergegeven.
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();
});
Draaitabel
In dit voorbeeld wordt een draaitabel weergegeven. Met dit grafiektype kunt u complexe gegevens rangschikken en samenvatten in een tabelvorm.
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();
});