表を追加

[アーティクル]
03/13/2023

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-sdk SDK の詳細については、クライアント 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();
});

次の方法で共有

表を追加

コードを整理する方法

HTML ファイル

イメージ

拡張機能マニフェストファイル

グラフ

グラフ

積み上げ面グラフ

ピボットテーブル

フィードバック

その他のリソース

次の方法で共有

表を追加

コードを整理する方法

HTML ファイル

イメージ

拡張機能マニフェスト ファイル

グラフ

グラフ

積み上げ面グラフ

ピボット テーブル

フィードバック

その他のリソース

拡張機能マニフェストファイル

ピボットテーブル