Lägg till ett diagram
Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019
Lär dig hur du kan lägga till diagram i dina tillägg. Diagram kan läggas till i valfritt Azure DevOps Services-tillägg.
Tips
Läs vår senaste dokumentation om tilläggsutveckling med hjälp av SDK för Azure DevOps-tillägget.
Diagram är enkla att skapa, ändra storlek på, interaktiva och konsekventa med utseendet och känslan i Azure DevOps Services. Följande diagramtyper stöds:
- Linje
- Stapel
- Kolumn
- Område
- Staplad stapel
- Staplad kolumn
- Staplad yta
- Cirkel
- Pivottabell
- Histogram
Om du har bråttom och vill lägga händerna på koden direkt kan du ladda ned de fullständiga exemplen.
När du har laddat ned går du till charts mappen och följer sedan instruktionerna för paketering och publicering för att publicera exempeltillägget.
Tillägget innehåller exempeldiagramwidgetar.
Så här organiserar du din kod
I den här självstudien skapar vi en widget och lägger till ett diagram i den.
Det gör du genom att skapa en chart.html fil med följande innehåll i home mappen för projektet:
HTML-fil
<!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>
Använd kommandot npm install för att hämta SDK:n:
npm install vss-web-extension-sdk. Mer information om SDK finns på GitHub-sidan för klient-SDK.
Kontrollera att VSS.SDK.js filen finns i sdk/scripts mappen så att sökvägen är home/sdk/scripts/VSS.SDK.js.
Avbildningar
Lägg till bilder i en img mapp i projektkatalogen så att sökvägen är home/img/logo.png och home/img/CatalogIcon.png.
Se vår senaste dokumentation, Formula Design System och Azure DevOps-tilläggets exempel-SDK.
Tilläggsmanifestfil
home Skapa tilläggsmanifestfilen i mappen för projektet. Skapa en vss-extension.json fil med följande innehåll:
{
"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": [
]
}
Innan du laddar upp det här tillägget måste du uppdatera publisher till ditt.
Placera följande kodfragment i en chart.js fil i en scripts mapp, så att sökvägen är home/scripts/chart.js.
Följ sedan instruktionerna för paketering och publicering för att publicera tillägget.
Diagram
Diagram
Det här exemplet renderar ett diagram.
data och labelValues har hårdkodats här, och skulle behöva ändras till de data som du vill visualisera.
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();
});
Här definieras diagrammets storlek i hostOptions. Series-egenskapen är en matris och innehåller ett enda objekt med data i den. Objektet xAxis innehåller labelValues, som motsvarar data.
För cirkeldiagram har vi också några särskilda alternativ som definieras av specializedOptions egenskapen . Här aktiverar vi explicit dataetiketter för cirkeldiagrammet.
Vi måste också ange storleken på cirkeldiagrammet genom att ange dess yttre diameter.
Diagrammet kräver en container, diagramalternativen och ett anrop till diagramtjänsten för att initiera och återge. Mer information om diagramalternativ finns i vss-web-extension-sdk/typings/charts.
Staplat ytdiagram
Följande exempel återger ett staplat ytdiagram. Den här diagramtypen är perfekt för att jämföra en relation mellan delar med en helhet och markera allmänna trender mellan kategorier. Det används ofta för att jämföra trender över tid. Det här exemplet anger också en anpassad färg för en av de serier som återges.
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();
});
Pivottabell
Det här exemplet renderar en pivottabell. Den här diagramtypen hjälper till att ordna och sammanfatta komplexa data i tabellformat.
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();
});