新增圖表
Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019
瞭解如何將圖表新增至延伸模組。 圖表可以新增至任何Azure DevOps Services延伸模組。
提示
請參閱使用 Azure DevOps 擴充功能 SDK進行擴充功能開發的最新檔。
圖表很容易建立、調整大小、互動，並與Azure DevOps Services外觀及風格一致。 支援下列圖表類型：
- 折線圖
- 長條圖
- 資料行
- 區域
- 堆疊橫條圖
- 堆疊資料行
- 堆疊區域圖
- Pie
- 樞紐分析表
- 長條圖
如果您急著要立即處理常式代碼，您可以下載 完整的範例。
下載之後，請移至 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.jsscripts 檔案中，讓路徑為 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/charts。
堆疊區域圖
下列範例會轉譯堆疊區域圖。 此圖表類型很適合用來比較元件與整體的關聯性，並醒目提示跨類別的一般趨勢。 通常用來比較一段時間的趨勢。 此範例也會針對要轉譯的其中一個數列指定自訂色彩。
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();
});