Menambahkan bagan
Layanan Azure DevOps | Azure DevOps Server 2022 - Azure DevOps Server 2019
Pelajari cara menambahkan bagan ke ekstensi Anda. Bagan dapat ditambahkan ke ekstensi Azure DevOps Services apa pun.
Tip
Lihat dokumentasi terbaru kami tentang pengembangan ekstensi menggunakan SDK Ekstensi Azure DevOps.
Bagan mudah dibuat, dapat diubah ukurannya, interaktif, dan konsisten dengan tampilan dan nuansa Layanan Azure DevOps. Jenis bagan berikut ini didukung:
- Garis
- Bilah
- Kolom
- Area
- Bilah bertumpuk
- Kolom bertumpuk
- Area bertumpuk
- Pai
- Tabel pivot
- Histogram
Jika Anda terburu-buru dan ingin segera mendapatkan kode, Anda dapat mengunduh sampel lengkap.
Setelah diunduh, buka charts folder, lalu ikuti instruksi pengemasan dan penerbitan untuk menerbitkan ekstensi sampel.
Ekstensi ini berisi widget bagan sampel.
Cara mengatur kode Anda
Untuk tutorial ini, kami membuat widget dan menambahkan bagan ke dalamnya.
Untuk melakukannya, di home folder untuk proyek Anda, buat chart.html file dengan konten berikut:
File 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>
Gunakan perintah npm install untuk mengambil SDK:
npm install vss-web-extension-sdk. Untuk mempelajari selengkapnya tentang SDK, kunjungi Halaman GitHub SDK Klien.
Pastikan bahwa VSS.SDK.js file berada di sdk/scripts dalam folder sehingga jalurnya adalah home/sdk/scripts/VSS.SDK.js.
Gambar
Tambahkan gambar ke img folder di direktori proyek Anda sehingga jalurnya adalah home/img/logo.png dan home/img/CatalogIcon.png.
Lihat dokumentasi terbaru kami, SDK sampel ekstensiSistem Desain Rumus dan Azure DevOps.
File manifes ekstensi
home Di folder proyek Anda, buat file manifes ekstensi Anda. Buat file vss-extension.json dengan konten berikut:
{
"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": [
]
}
Sebelum mengunggah ekstensi ini, Anda harus memperbarui ke publisher ekstensi Anda.
Masukkan cuplikan kode berikut ke dalam chart.js file dalam scripts folder, sehingga jalurnya adalah home/scripts/chart.js.
Kemudian, ikuti instruksi pengemasan dan penerbitan untuk menerbitkan ekstensi Anda.
Diagram
Grafik
Sampel ini merender bagan.
data dan labelValues telah dikodekan secara permanen di sini, dan perlu diubah ke data yang ingin Anda visualisasikan.
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();
});
Di sini, ukuran bagan ditentukan dalam hostOptions. Properti seri adalah array dan berisi satu objek dengan data di dalamnya. Objek xAxis berisi labelValues, yang sesuai dengan data.
Untuk bagan pai, kami juga memiliki beberapa opsi khusus yang ditentukan oleh specializedOptions properti . Di sini, kami secara eksplisit mengaktifkan label data untuk bagan pai.
Kita juga perlu mengatur ukuran bagan pai dengan menentukan diameter luarnya.
Bagan memerlukan kontainer, opsi bagan, dan panggilan ke Layanan Bagan untuk menginisialisasi dan merender. Untuk informasi selengkapnya tentang opsi bagan, lihat vss-web-extension-sdk/typings/charts.
Bidang grafik bertumpuk
Sampel berikut merender bagan area bertumpuk. Jenis bagan ini sangat ideal untuk membandingkan hubungan bagian dengan keseluruhan dan menyoroti tren umum di seluruh kategori. Biasanya digunakan untuk membandingkan tren dari waktu ke waktu. Sampel ini juga menentukan warna kustom untuk salah satu seri yang sedang dirender.
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();
});
Tabel pivot
Sampel ini merender Tabel Pivot. Jenis bagan ini membantu menyusun dan meringkas data kompleks dalam bentuk 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();
});