表を追加
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-sdkSDK の詳細については、 クライアント SDK の GitHub ページを参照してください。
パスhome/sdk/scripts/VSS.SDK.jsが VSS.SDK.js になるように、ファイルが sdk/scripts フォルダー内にあることを確認します。
イメージ
パスhome/img/logo.pngが と home/img/CatalogIcon.pngになるように、imgプロジェクト ディレクトリ内のフォルダーにイメージを追加します。
最新のドキュメントである Formula Design System と 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 拡張機能に更新する必要があります。
パスhome/scripts/chart.jsが になるように、次のコード スニペットchart.jsを scripts フォルダー内の ファイルに配置します。
次に、 パッケージ化と発行の手順に 従って拡張機能を発行します。
グラフ
グラフ
このサンプルでは、グラフをレンダリングします。 と labelValues はdataここでハードコーディングされており、視覚化するデータに変更する必要があります。
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 プロパティは配列であり、データを含む 1 つのオブジェクトが含まれています。 オブジェクトには xAxis 、 に labelValues対応 dataする が含まれています。
円グラフの場合は、 プロパティによって specializedOptions 定義される特別なオプションもあります。 ここでは、円グラフのデータ ラベルを明示的に有効にします。
円グラフの外径を指定して、円グラフのサイズを設定する必要もあります。
グラフには、コンテナー、グラフ オプション、および Chart Service を呼び出して初期化およびレンダリングする必要があります。 グラフ オプションの詳細については、「 vss-web-extension-sdk/typings/charts」を参照してください。
積み上げ面グラフ
次の例では、積み上げ面グラフをレンダリングします。 このグラフの種類は、パーツの関係を全体と比較し、カテゴリ間の一般的な傾向を強調するのに最適です。 これは、一般的に、時間の経過に伴う傾向を比較するために使用されます。 このサンプルでは、レンダリングされる系列の 1 つに対するカスタム色も指定します。
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();
});