Agregar un gráfico
Azure DevOps Services | Azure DevOps Server 2022 | 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 extensión Azure DevOps Services.
Sugerencia
Consulte nuestra documentación más reciente sobre el desarrollo de extensiones mediante el SDK de extensión de Azure DevOps.
Los gráficos son fáciles de crear, cambiar de tamaño, interactivos y coherentes con el aspecto y la apariencia Azure DevOps Services. Se admiten los siguientes tipos de gráfico:
- Línea
- Barra
- Columna
- Área
- Barra apilada
- Columna apilada
- Área apilada
- Pie
- Tabla dinámica
- Histograma
Si tiene prisa y quiere poner las manos en el código inmediatamente, puede descargar los ejemplos completos.
Una vez descargado, vaya a la charts carpeta y siga las instrucciones de empaquetado y publicación para publicar la extensión de ejemplo.
La extensión contiene widgets de gráfico de ejemplo.
Cómo organizar el código
Para este tutorial, se crea un widget y se agrega 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:
npm install vss-web-extension-sdk. Para más información sobre el SDK, visite la página de GitHub del SDK de cliente.
Asegúrese de que el VSS.SDK.js archivo está dentro de la sdk/scripts carpeta para que la ruta de acceso sea home/sdk/scripts/VSS.SDK.js.
Imágenes
Agregue imágenes a una img carpeta en el directorio del proyecto para que la ruta de acceso sea home/img/logo.png y home/img/CatalogIcon.png.
Consulte nuestra documentación más reciente, el SDK de ejemplo del sistema de diseño de fórmulas y la extensión de Azure DevOps.
Archivo de manifiesto de extensión
En la carpeta del proyecto, cree el homearchivo de manifiesto de extensión. 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 suya.
Coloque los siguientes fragmentos de código en un chart.js archivo de una scripts carpeta para 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
En este ejemplo se representa un gráfico. y datalabelValues se han codificado de forma dura aquí, y tendría 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 en ella. El xAxis objeto contiene labelValues, que corresponde a data.
En el caso de los gráficos circulares, también tenemos algunas opciones especiales definidas por la specializedOptions propiedad . Aquí se habilitan 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 de gráfico, consulte 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 conjunto y resaltar tendencias generales entre categorías. Normalmente se usa para comparar tendencias a lo largo del tiempo. En este ejemplo también se 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
En este ejemplo se representa una tabla dinámica. Este tipo de gráfico ayuda a organizar y resumir datos complejos en un formulario 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();
});