차트 추가
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 페이지를 방문하세요.
경로가 이 VSS.SDK.js 도록 파일이 폴더 내에 sdk/scripts 있는지 확인합니다 home/sdk/scripts/VSS.SDK.js.
이미지
경로 home/img/logo.png 가 img 및 home/img/CatalogIcon.png이 되도록 프로젝트 디렉터리의 폴더에 이미지를 추가합니다.
최신 설명서인 수식 디자인 시스템 및 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 사용자로 업데이트해야 합니다.
경로가 이도록 폴더의 파일에 scripts 다음 코드 조각을 chart.js 넣습니다home/scripts/chart.js.
그런 다음 , 패키징 및 게시 지침에 따라 확장을 게시합니다.
차트
차트
이 샘플에서는 차트를 렌더링합니다.
data 및 labelValues 는 여기에서 하드 코딩되었으며 시각화하려는 데이터로 변경해야 합니다.
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 속성은 배열이며 데이터가 포함된 단일 개체를 포함합니다. 개체에는 xAxis 에 labelValues해당하는 data가 포함됩니다.
원형 차트의 경우 속성으로 specializedOptions 정의된 몇 가지 특수 옵션도 있습니다. 여기서는 원형 차트에 대해 데이터 레이블을 명시적으로 사용하도록 설정합니다.
또한 외경을 지정하여 원형 차트의 크기를 설정해야 합니다.
차트에는 컨테이너, 차트 옵션 및 차트 서비스를 호출하여 초기화하고 렌더링해야 합니다. 차트 옵션에 대한 자세한 내용은 vss-web-extension-sdk/typings/chart를 참조하세요.
누적 영역 차트
다음 샘플에서는 누적 영역형 차트를 렌더링합니다. 이 차트 유형은 부분의 관계를 전체와 비교하고 범주 전반의 일반적인 추세를 강조 표시하는 데 이상적입니다. 일반적으로 시간에 따른 추세를 비교하는 데 사용됩니다. 이 샘플은 렌더링되는 계열 중 하나에 대한 사용자 지정 색도 지정합니다.
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();
});