Agregar un gráfico
Azure DevOps | Azure DevOps Server 2020 | Azure DevOps Server 2019
Obtenga información sobre cómo puede agregar gráficos a las extensiones. Los gráficos se pueden agregar a cualquier Azure DevOps Services extensión.
Sugerencia
Consulte nuestra documentación más reciente sobre el desarrollo de extensiones mediante el SDK Azure DevOps Extension.
Los gráficos son fáciles de crear, cambiar de tamaño, interactivos y coherentes con Azure DevOps Services aspecto. Se admiten los siguientes tipos de gráficos:
- Línea
- Barra
- Columna
- Área
- Barra apilada
- Columna apilada
- Área apilada
- Pie
- Tabla dinámica
- Histograma
Si tiene un poco de desasosición y desea obtener el código de inmediato, puede descargar los ejemplos completos. Una vez descargado, vaya a la
chartscarpeta y, a continuación, siga las instrucciones de empaquetado y publicación parachartspublicar la extensión de ejemplo. La extensión contiene widgets de gráfico de ejemplo.
Organización del código
En este tutorial, crearemos un widget y le agregaremos un gráfico.
Para ello, en la home carpeta del proyecto, cree un chart.html archivo con el siguiente contenido:
Archivo 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>
Use el comando npm install para recuperar el SDK: . Para obtener más información sobre el SDK, visite la página de GitHub SDK de cliente.
Asegúrese de que VSS.SDK.js el archivo está dentro de la carpeta para que la ruta de acceso sea sdk/scriptshome/sdk/scripts/VSS.SDK.js .
Imágenes
Agregue las siguientes imágenes a una carpeta del directorio del proyecto img para que la ruta de acceso sea y home/img/logo.pnghome/img/CatalogIcon.png :
Archivo de manifiesto de extensión
En la home carpeta del proyecto, cree el archivo home. Cree un archivo vss-extension.json con el siguiente contenido:
{
"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": [
]
}
Antes de cargar esta extensión, debe actualizar a publisher la de .
Coloque los siguientes fragmentos de código en chart.js un archivo de una scripts carpeta, de modo que la ruta de acceso sea home/scripts/chart.js .
A continuación, siga las instrucciones de empaquetado y publicación para publicar la extensión.
Gráficos
Gráfico
Este ejemplo representa un gráfico. y datalabelValues se han codificado de forma rígida aquí y tendrían que cambiarse a los datos que desea visualizar.
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();
});
Aquí, el tamaño del gráfico se define en hostOptions . La propiedad series es una matriz y contiene un único objeto con datos. El xAxis objeto contiene , que corresponde a labelValuesdata .
En el caso de los gráficos circulares, también tenemos algunas opciones especiales definidas por la specializedOptions propiedad . En este caso, vamos a habilitar explícitamente las etiquetas de datos para el gráfico circular.
También es necesario establecer el tamaño del gráfico circular especificando su diámetro exterior.
El gráfico requiere un contenedor, las opciones del gráfico y una llamada al servicio de gráficos para inicializar y representar. Para obtener más información sobre las opciones del gráfico, vea vss-web-extension-sdk/typings/charts.
Gráfico de áreas apiladas
En el ejemplo siguiente se representa un gráfico de áreas apiladas. Este tipo de gráfico es ideal para comparar una relación de partes con un todo y resaltar tendencias generales entre categorías. Se usa normalmente para comparar tendencias a lo largo del tiempo. Este ejemplo también especifica un color personalizado para una de las series que se representan.
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();
});
Tabla dinámica
Este ejemplo representa una tabla dinámica. Este tipo de gráfico ayuda a organizar y resumir datos complejos en un formato tabular.
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();
});