Aggiungere un grafico
Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019
Informazioni su come aggiungere grafici alle estensioni. I grafici possono essere aggiunti a qualsiasi estensione Azure DevOps Services.
Suggerimento
Vedere la documentazione più recente sullo sviluppo di estensioni usando Azure DevOps Extension SDK.
I grafici sono facili da creare, ridimensionabili, interattivi e coerenti con l'aspetto e l'aspetto Azure DevOps Services. Sono supportati i tipi di grafico seguenti:
- A linee
- Istogramma
- Colonna
- Area
- Barre in pila
- Colonna in pila
- Area in pila
- Pie
- Tabella pivot
- Istogramma
Se si è in fretta e si vuole ottenere le mani sul codice immediatamente, è possibile scaricare gli esempi completi.
Dopo aver scaricato, passare alla charts cartella e quindi seguire le istruzioni di creazione e pubblicazione per pubblicare l'estensione di esempio.
L'estensione contiene widget del grafico di esempio.
Come organizzare il codice
Per questa esercitazione viene creato un widget e viene aggiunto un grafico.
A tale scopo, nella home cartella del progetto creare un chart.html file con il contenuto seguente:
File 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>
Usare il comando npm install per recuperare l'SDK:
npm install vss-web-extension-sdk. Per altre informazioni sull'SDK, visitare la pagina GitHub dell'SDK client.
Assicurarsi che il VSS.SDK.js file si trova all'interno della sdk/scripts cartella in modo che il percorso sia home/sdk/scripts/VSS.SDK.js.
Immagini
Aggiungere immagini a una img cartella nella directory del progetto in modo che il percorso sia home/img/logo.png e home/img/CatalogIcon.png.
Vedere la documentazione più recente, l'SDK di esempio di estensione Formula Design System e Azure DevOps.
File manifesto dell'estensione
Nella cartella del progetto creare il file manifesto dell'estensionehome. Creare un vss-extension.json file con il contenuto seguente:
{
"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": [
]
}
Prima di caricare questa estensione, è necessario aggiornare l'oggetto publisher agli utenti.
Inserire i frammenti di codice seguenti in un file in una chart.jsscripts cartella, in modo che il percorso sia home/scripts/chart.js.
Seguire quindi le istruzioni di creazione e pubblicazione per pubblicare l'estensione.
Grafici
Grafico
Questo esempio esegue il rendering di un grafico. L'oggetto data e labelValues sono stati codificati qui e sarebbe necessario modificare i dati da visualizzare.
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();
});
In questo caso, le dimensioni del grafico sono definite in hostOptions. La proprietà series è una matrice e contiene un singolo oggetto con i dati in esso contenuti. L'oggetto xAxisdatacontiene labelValues, che corrispondono a .
Per i grafici a torta sono disponibili anche alcune opzioni speciali definite dalla specializedOptions proprietà. In questo caso, si abilitano in modo esplicito le etichette dati per il grafico a torta.
È anche necessario impostare le dimensioni del grafico a torta specificando il relativo diametro esterno.
Il grafico richiede un contenitore, le opzioni del grafico e una chiamata al servizio grafico per inizializzare e eseguire il rendering. Per altre informazioni sulle opzioni del grafico, vedere vss-web-extension-sdk/digitazioni/grafici.
Grafico ad area in pila
L'esempio seguente esegue il rendering di un grafico a aree in pila. Questo tipo di grafico è ideale per confrontare una relazione di parti a un intero e evidenziare le tendenze generali tra le categorie. Viene comunemente usato per confrontare le tendenze nel tempo. Questo esempio specifica anche un colore personalizzato per una delle serie di cui viene eseguito il rendering.
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();
});
Tabella pivot
Questo esempio esegue il rendering di una tabella pivot. Questo tipo di grafico consente di organizzare e riepilogare dati complessi in un formato tabulare.
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();
});