Grafik ekleme
Azure DevOps | Azure DevOps Server 2020 | Azure DevOps Server 2019
Uzantılara nasıl grafik ekleyebileceğiniz hakkında bilgi edinin. grafikler, herhangi bir Azure DevOps Services uzantısına eklenebilir.
İpucu
Azure DevOps uzantısı SDK 'sınıkullanarak uzantı geliştirmede en yeni belgelerimize göz atın.
grafiklerin kolayca oluşturulması, yeniden boyutlandırılabilir, etkileşimli ve Azure DevOps Services görünümü ile tutarlı olması kolay bir işlemdir. 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
Bir aceleniz varsa ve kendi ellerinizi koda doğru bir şekilde almak istiyorsanız, tüm örnekleriindirebilirsiniz. İndirildikten sonra
chartsklasöre gidin ve ardından örnek uzantıyı yayımlamak içinchartsizleyin. Uzantı, örnek grafik pencere öğeleri içerir.
Kodunuzu düzenleme
Bu öğreticide, bir pencere öğesi oluşturur ve buna bir grafik eklersiniz.
Bunu yapmak için, home projenizin klasöründe chart.html aşağıdaki içeriğe sahip bir 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 'Yı almak için NPM install komutunu kullanın: . SDK hakkında daha fazla bilgi edinmek için istemci SDK GitHub sayfasınıziyaret edin.
VSS.SDK.jsYolun olması için dosyanın klasörün içinde olduğundan emin olun sdk/scriptshome/sdk/scripts/VSS.SDK.js .
Görüntüler
Aşağıdaki görüntüleri img proje dizininizdeki bir klasöre ekleyerek yolun home/img/logo.png ve home/img/CatalogIcon.png :
Uzantı bildirim dosyası
homeProjenizin klasöründe, homeoluşturun. vss-extension.jsonAşağıdaki içeriğe sahip bir 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 publisher sizinkilerle güncelleştirmeniz gerekir.
Aşağıdaki kod parçacıklarını chart.js bir scripts klasöre yerleştirin, böylece yol olur home/scripts/chart.js .
Ardından, uzantınızı yayımlamak için paketleme ve yayımlama talimatlarını izleyin.
Grafikler
Grafik
Bu örnek bir grafik oluşturur. dataVe labelValues burada kodlanmış ve görselleştirmek istediğiniz veriler için değiştirilmesi gerekiyor.
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 ' de tanımlanmıştır hostOptions . Series özelliği bir dizidir ve içindeki verilerle tek bir nesne içerir. xAxisNesnesi içerir labelValues , öğesine karşılık gelir data .
Pasta grafiklerde, özelliği tarafından tanımlanan bazı özel seçenekleriniz da vardır specializedOptions . Burada, pasta grafik için veri etiketlerini açık bir şekilde etkinleştiriyoruz.
Ayrıca, kendi dış çapını belirterek pasta grafiğinin boyutunu da ayarlamanız gerekir.
Grafik, başlatmak ve işlemek için bir kapsayıcı, grafik seçenekleri ve grafik hizmetine yapılan bir çağrı gerektirir. Grafik seçenekleri hakkında daha fazla bilgi için bkz. VSS-Web-Extension-SDK/türler/grafikler.
Yığılmış alan grafiği
Aşağıdaki örnek bir yığılmış alan grafiği oluşturur. Bu grafik türü, parçaların bütünle ilişkisini karşılaştırmak ve kategoriler arasındaki genel eğilimleri vurgulamak için idealdir. Sıklıkla eğilimleri zaman içinde karşılaştırmak için kullanılır. Bu örnek, işlenen serinin 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 Özet tablo oluşturur. Bu grafik türü, tablo biçiminde karmaşık verileri düzenlemenize 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();
});