Question

我将在构建结果摘要选项卡中添加一个图表。我给了贡献一个唯一的ID，并使用VSS.Register（）注册了该ID的处理程序，这将创建我的图表。我在图表中没有数据，也没有错误。这是从默认的带ltle的vsts扩展示例到没有修改，但仍然无法正常工作。

我怀疑处理程序向tributionid的注册可能有问题，但是我尝试了所有可能的方法。如多次注册调用所示。

请在这里提出可能出问题的地方

下面是我的vss-extension.json，charts.js和SimplePieChart.html。

{
"manifestVersion": 1,
"id": "BuildSummary",
"version": "1.2.2",
"name": "Pie Charts in Build Tab",
"publisher": "uniqueidguid",
"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": "metrics",
        "type": "ms.vss-build-web.build-results-section",
        "description": "build results view",
        "targets": [
            "ms.vss-build-web.build-results-summary-tab",
        ],
        "properties": {
            "name": "Metrics Tab",
            "catalogIconUrl": "img/CatalogIcon.png",
            "description": "A simple pie chart widget with no configuration and hard-coded data.",
             "uri": "SimplePieChart.html"
        }
    }
],
"files": [
    {
        "path": "SimplePieChart.html",
        "addressable": true
    },
    {
        "path": "sdk/scripts/VSS.SDK.min.js",
        "addressable": true
    },
    {
        "path": "img",
        "addressable": true
    },
    {
        "path": "scripts",
        "addressable": true
    }
],
"scopes": [
]}

VSS.init({
        explicitNotifyLoaded: true,
        usePlatformStyles: true,
        usePlatformScripts: true 
    });

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
    } 
};
var chartHandler= (WidgetHelpers, Services)=> {
            return Services.ChartsService.getService().then((chartService)=>{
                chartService.createChart($container, chartOptions);
                return WidgetHelpers.WidgetStatusHelper.Success();
            });
}

VSS.require([
        "TFS/Dashboards/WidgetHelpers", 
        "Charts/Services"
        ],
     (WidgetHelpers, Services) =>  {
        WidgetHelpers.IncludeWidgetStyles();
        VSS.ready(()=>{

        VSS.register("uniqueidguid.BuildSummary.metrics", () => { 
         return {
             load : chartHandler
        });

        VSS.register(VSS.getContribution().id, () =>{ 
         return {
             load : chartHandler
        });

        VSS.register("metrics",() =>{ 
         return {
             load:chartHandler
         }
        });

    VSS.notifyLoadSucceeded();
        });
});

<!DOCTYPE html>
<html>

<head>
    <script src="sdk/scripts/VSS.SDK.min.js"></script>
    <script   src="scripts/charts.js" type="text/javascript">
</script>
</head>

<body>
    <div class="widget">
        <h2 class="title">Chart Widget</h2>
        <div id="Chart-Container"></div>
    </div>
</body>

</html>

Answer 1

图表示例中的VSS.register方法用于将功能注册到窗口小部件。在“构建摘要”选项卡中，只需调用该函数即可直接创建图表服务。

代码示例供您参考：

<!DOCTYPE html>
<html>

<head>
    <script src="bower_components/vss-web-extension-sdk/lib/VSS.SDK.min.js"></script>
    <script type="text/javascript">
VSS.init({
        explicitNotifyLoaded: true,
        usePlatformStyles: true 
    });

VSS.require([
        "Charts/Services"
        ],
        function (Services) {
        VSS.ready(function () { 
             Services.ChartsService.getService().then(function(chartService){
                    var $container = $('#Chart-Container');
                    var chartOptions = { 
                        "hostOptions": { 
                            "height": "350", 
                            "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);
                });
                }        
            );
    VSS.notifyLoadSucceeded();
});
</script>
</head>

<body>
    <div class="widget">
        <h2 class="title">Chart Widget</h2>
        <div id="Chart-Container"></div>
    </div>
</body>

</html>

结果：

数据未加载到图表中（使用自定义vsts扩展发布）

1 个答案: