Grafik ekleme
Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019
Uzantılarınıza nasıl grafik ekleyebileceğinizi öğrenin. Grafikler herhangi bir Azure DevOps Services uzantısına eklenebilir.
İpucu
Azure DevOps Uzantı SDK'sını kullanarak uzantı geliştirmeyle ilgili en yeni belgelerimize göz atın.
Grafikler kolayca oluşturulabilir, yeniden boyutlandırılabilir, etkileşimlidir ve Azure DevOps Services genel görünümüyle tutarlıdır. Aşağıdaki grafik türleri desteklenir:
- Çizgi
- Çubuk
- Sütun
- Alan
- Yığılmış çubuk
- Yığılmış sütun
- Yığılmış alan
- Pasta
- Özet tablo
- Histogram
Aceleniz varsa ve kodu hemen almak istiyorsanız tüm örnekleri indirebilirsiniz.
İndirildikten sonra klasörüne gidin ve örnek uzantıyı charts yayımlamak için paketleme ve yayımlama yönergelerini izleyin.
Uzantı örnek grafik pencere öğeleri içerir.
Kodunuzu düzenleme
Bu öğretici için bir pencere öğesi oluşturacak ve buna bir grafik ekleyeceğiz.
Bunu yapmak için projenizin home klasöründe aşağıdaki içeriklere sahip bir chart.html dosya oluşturun:
HTML dosyası
<!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>
SDK'sını almak için npm install komutunu kullanın:
npm install vss-web-extension-sdk. SDK hakkında daha fazla bilgi edinmek için İstemci SDK GitHub Sayfasını ziyaret edin.
Dosyanın klasörünün VSS.SDK.js içinde sdk/scripts olduğundan emin olun; böylece yol olur home/sdk/scripts/VSS.SDK.js.
Görüntüler
Yolun home/img/logo.png ve home/img/CatalogIcon.pngolması için proje dizininizdeki bir img klasöre görüntüler ekleyin.
En yeni belgelerimizi, Formül Tasarım Sistemi'ni ve Azure DevOps uzantısı örnek SDK'sını inceleyin.
Uzantı bildirim dosyası
home Projenizin klasöründe uzantı bildirim dosyanızı oluşturun. Aşağıdaki içeriklere sahip bir vss-extension.json dosya oluşturun:
{
"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": [
]
}
Bu uzantıyı karşıya yüklemeden önce öğesini sizinkine güncelleştirmeniz publisher gerekir.
Aşağıdaki kod parçacıklarını klasördeki bir chart.jsscripts dosyaya yerleştirerek yolunun olması sağlanır home/scripts/chart.js.
Ardından uzantınızı yayımlamak için paketleme ve yayımlama yönergelerini izleyin.
Grafikler
Grafik
Bu örnek bir grafik oluşturur.
data ve labelValues burada sabit kodlanmıştır ve görselleştirmek istediğiniz veriyle değiştirilmesi gerekir.
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();
});
Burada grafiğin boyutu içinde hostOptionstanımlanmıştır. Series özelliği bir dizidir ve içinde veri bulunan tek bir nesne içerir.
xAxis nesnesi, öğesine karşılık gelen dataöğesini içerirlabelValues.
Pasta grafikler için özelliği tarafından specializedOptions tanımlanan bazı özel seçeneklerimiz de vardır. Burada pasta grafik için veri etiketlerini açıkça etkinleştiriyoruz.
Ayrıca pasta grafiğin boyutunu dış çapını belirterek ayarlamamız gerekir.
Grafik için bir kapsayıcı, grafik seçenekleri ve başlatılıp işlenmek üzere Grafik Hizmeti'ne çağrı yapılması gerekir. Grafik seçenekleri hakkında daha fazla bilgi için bkz. vss-web-extension-sdk/typings/charts.
Yığılmış alan grafiği
Aşağıdaki örnek yığılmış alan grafiğini işler. Bu grafik türü, parçaların bir bütünle ilişkisini karşılaştırmak ve kategoriler arasındaki genel eğilimleri vurgulamak için idealdir. Zaman içindeki eğilimleri karşılaştırmak için yaygın olarak kullanılır. Bu örnek, işlenen serilerden biri için özel bir renk de belirtir.
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();
});
Özet tablo
Bu örnek bir Pivot Table işler. Bu grafik türü, karmaşık verileri tablo biçiminde düzenlemeye ve özetlemeye yardımcı olur.
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();
});