Přidání grafu
Azure DevOps Services | Azure DevOps Server 2022 – Azure DevOps Server 2019
Zjistěte, jak můžete do rozšíření přidávat grafy. Grafy je možné přidat do libovolného rozšíření Azure DevOps Services.
Tip
Podívejte se na naši nejnovější dokumentaci k vývoji rozšíření pomocí sady Azure DevOps Extension SDK.
Grafy se snadno vytvářejí, dají se měnit velikost, jsou interaktivní a odpovídají Azure DevOps Services vzhledu a chování. Podporují se následující typy grafů:
- Čára
- Pruhový
- Sloupec
- Plošný
- Skládaný pruhový
- Skládaný sloupec
- Skládaná oblast
- Výsečový
- Kontingenční tabulka
- Histogram
Pokud spěcháte a chcete si kód hned projít, můžete si stáhnout kompletní ukázky.
Po stažení přejděte do charts složky a pak podle pokynů k balení a publikování publikujte ukázkové rozšíření.
Rozšíření obsahuje ukázkové widgety grafu.
Jak uspořádat kód
Pro účely tohoto kurzu vytvoříme widget a přidáme do něj graf.
Uděláte to tak, že home ve složce projektu vytvoříte chart.html soubor s následujícím obsahem:
Soubor 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>
K načtení sady SDK použijte příkaz npm install :
npm install vss-web-extension-sdk. Další informace o sadě SDK najdete na stránce GitHubu klientské sady SDK.
Ujistěte se VSS.SDK.js , že se soubor nachází ve sdk/scripts složce, aby cesta byla home/sdk/scripts/VSS.SDK.js.
Obrázky
Přidejte obrázky do img složky v adresáři projektu tak, aby cesta byla home/img/logo.png a home/img/CatalogIcon.png.
Podívejte se na naši nejnovější dokumentaci, systém návrhu vzorců a ukázkovou sadu SDK rozšíření Azure DevOps.
Soubor manifestu přípony
home Ve složce projektu vytvořte soubor manifestu rozšíření. Vytvořte vss-extension.json soubor s následujícím obsahem:
{
"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": [
]
}
Před nahráním tohoto rozšíření musíte aktualizovat publisher na vaše.
Vložte následující fragmenty kódu do chart.js souboru ve scripts složce, aby cesta byla home/scripts/chart.js.
Pak postupujte podle pokynů k balení a publikování a publikujte rozšíření.
Grafy
Graf
Tato ukázka vykresluje graf. Kódy data a labelValues jsou tady pevně zakódované a je potřeba je změnit na data, která chcete vizualizovat.
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();
});
Tady je velikost grafu definovaná v hostOptionssouboru . Vlastnost series je pole a obsahuje jeden objekt s daty. Objekt xAxis obsahuje labelValues, který odpovídá objektu data.
Pro výsečové grafy máme také některé speciální možnosti, které jsou definovány specializedOptions vlastností. Tady explicitně povolujeme popisky dat pro výsečový graf.
Musíme také nastavit velikost výsečového grafu zadáním jeho vnějšího průměru.
Graf vyžaduje kontejner, možnosti grafu a volání služby Chart Service pro inicializaci a vykreslení. Další informace o možnostech grafu najdete v tématu vss-web-extension-sdk/psaní/grafy.
Skládaný plošný graf
Následující ukázka vykreslí skládaný plošný graf. Tento typ grafu je ideální k porovnání vztahu částí k celku a ke zvýraznění obecných trendů napříč kategoriemi. Běžně se používá k porovnání trendů v průběhu času. Tato ukázka také určuje vlastní barvu pro jednu z vykreslovaných řad.
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();
});
Kontingenční tabulka
Tato ukázka vykreslí kontingenční tabulku. Tento typ grafu pomáhá uspořádat a sumarizovat složitá data v tabulkové podobě.
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();
});