Поделиться через


Добавление диаграммы

Azure DevOps Services | Azure DevOps Server 2022 г. - Azure DevOps Server 2019 г.

Узнайте, как добавлять диаграммы в расширения. Диаграммы можно добавлять в любое расширение Azure DevOps Services.

Совет

Ознакомьтесь с нашей новейшей документацией по разработке расширений с помощью пакета SDK для расширения Azure DevOps.

Диаграммы легко создавать, изменять размер, интерактивные и согласованные с Azure DevOps Services внешнего вида. Поддерживаются следующие типы диаграмм:

  • График
  • Линейчатая
  • Столбец
  • Область
  • Линейчатая с накоплением
  • Столбец с накоплением
  • С областями с накоплением
  • Pie
  • Сводная таблица
  • Гистограмма

Если вы торопитесь и хотите сразу получить код, вы можете скачать полные примеры. После скачивания перейдите в папку 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 см. на странице GitHub пакета SDK для клиента.

Убедитесь, что VSS.SDK.js файл находится внутри sdk/scripts папки, чтобы путь был равен home/sdk/scripts/VSS.SDK.js.

Изображения

Добавьте изображения в папку img в каталоге проекта, чтобы путь был и home/img/CatalogIcon.pnghome/img/logo.png . Ознакомьтесь с нашей новейшей документацией, системой разработки формул и примером пакета SDK для расширения Azure DevOps.

Файл манифеста расширения

В папке 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 вашего.

Поместите приведенные ниже фрагменты кода в chart.js файл в папке scripts , чтобы путь был равен home/scripts/chart.js. Затем следуйте инструкциям по упаковке и публикации , чтобы опубликовать расширение.

Диаграммы

Диаграмма

В этом примере отображается диаграмма. 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 является массивом и содержит один объект с данными. Объект xAxis содержит labelValues, которые соответствуют объекту data. Для круговых диаграмм также есть некоторые специальные параметры, определенные свойством specializedOptions . Здесь мы явно включаем метки данных для круговой диаграммы. Также необходимо задать размер круговой диаграммы, указав ее внешний диаметр.

Для инициализации и отрисовки диаграммы требуется контейнер, параметры диаграммы и вызов службы диаграмм. Дополнительные сведения о параметрах диаграмм см. в статье vss-web-extension-sdk/typings/charts.

диаграмма с областями и накоплением;

В следующем примере отображается диаграмма с областями с накоплением. Этот тип диаграммы идеально подходит для сравнения соотношения частей с целым и выделения общих тенденций в разных категориях. Он обычно используется для сравнения тенденций с течением времени. В этом примере также указывается пользовательский цвет для одного из отрисовываемых рядов.

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();
});