添加图表
Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019
了解如何向扩展添加图表。 图表可以添加到任何Azure DevOps Services扩展。
提示
查看有关使用 Azure DevOps 扩展 SDK 进行扩展开发的最新文档。
图表易于创建、可调整大小、交互性，并与Azure DevOps Services外观保持一致。 支持以下图表类型：
- 行
- 条形图
- 列
- 区域
- 堆积条形图
- 堆积列
- 堆积分区图
- 饼图
- 数据透视表
- 直方图
如果匆忙想要立即获取代码，可以下载 完整的示例。
下载后，转到 charts 文件夹，然后按照 打包和发布说明 发布示例扩展。
该扩展包含示例图表小组件。
如何组织代码
在本教程中，我们将创建一个小组件并向其添加图表。
为此，请在 home 项目的 文件夹中创建包含以下 chart.html 内容的文件：
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>
使用 npm install 命令检索 SDK：
npm install vss-web-extension-sdk。 若要详细了解 SDK，请访问 客户端 SDK GitHub 页面。
确保 VSS.SDK.js 文件位于 文件夹中， sdk/scripts 以便路径为 home/sdk/scripts/VSS.SDK.js。
图像
将图像添加到 img 项目目录中的文件夹，使路径为 home/img/logo.png 和 home/img/CatalogIcon.png。
请参阅我们最新的文档 ，即公式设计系统和Azure DevOps 扩展示例 SDK。
扩展清单文件
在 home 项目的 文件夹中，创建 扩展清单文件。 创建具有以下内容的 vss-extension.json 文件：
{
"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": [
]
}
在上传此扩展之前，必须将 更新 publisher 为你的。
将以下代码片段放入 chart.js 文件夹中的 scripts 文件中，以便路径为 home/scripts/chart.js。
然后 ，按照打包和发布说明 发布扩展。
图表
图表
此示例呈现图表。
data和 labelValues 已在此处进行硬编码，需要更改为要可视化的数据。
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();
});
此处，图表的大小在 中 hostOptions定义。 series 属性是一个数组，其中包含一个包含数据的 对象。 对象 xAxis 包含 labelValues对应于 的 data。
对于饼图，我们还有一些由 specializedOptions 属性定义的特殊选项。 此处，我们将显式启用饼图的数据标签。
我们还需要通过指定饼图的外径来设置饼图的大小。
图表需要容器、图表选项和对图表服务的调用才能初始化和呈现。 有关图表选项的详细信息，请参阅 vss-web-extension-sdk/typings/chart。
堆积面积图
以下示例呈现堆积面积图。 此图表类型非常适合用于比较各部分与整体的关系，并突出显示跨类别的一般趋势。 它通常用于比较随时间推移的趋势。 此示例还指定要呈现的序列之一的自定义颜色。
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();
});
数据透视表
此示例呈现数据透视表。 此图表类型有助于以表格形式排列和汇总复杂数据。
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();
});