有許多庫，可以建立看中視力表，如bootstrap charts，jQuery charts。
關於插件擴展，你可以設置配置頁面配置部件。檢查Hello World with Configuration文章。
從SimplePieChart簡單的示例，您可以更改折線圖餡餅線（小寫）。
<!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([
"TFS/Dashboards/WidgetHelpers",
"Charts/Services"
],
function (WidgetHelpers, Services) {
WidgetHelpers.IncludeWidgetStyles();
VSS.register("SimplePieChart", 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();
});
</script>
</head>
<body>
<div class="widget">
<h2 class="title">Chart Widget</h2>
<div id="Chart-Container"></div>
</div>
</body>
</html>
你好。感謝您的詳細回覆。我正在嘗試查看是否可以避免使用外部庫來顯示圖表。默認的「圖表/服務」提供了一些適合我們需要的基本選項，如鏈接https://www.visualstudio.com/en-us/docs/integrate/extensions/develop/add-chart中所用。但是，除了示例中的那些外，我似乎無法找到有關其他選項的文檔或代碼。我正在試圖在小部件中創建一些折線圖。 – iambatman
https://www.visualstudio.com/en-us/docs/integrate/extensions/develop/add-chart是源文件， 我檢查了vss-web-extension-sdk中的類型文件，並且沒有那裏參考。 –
是的。這是如此令人困惑。我無法弄清楚在哪裏以及如何使用。我打算給Charts.js一個鏡頭。我們將看到如何。它看起來很容易。謝謝！ – iambatman