Как создать пользовательскую визуализацию в Microsoft Power BI

Отредактировано 6 дней назад от ExtremeHow Редакционная команда

Microsoft Power BIПользовательские визуальные эффектыВизуализация данныхWindowsMacПитонRПродвинутыйБизнес-аналитикаРазработкаНастройка

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

Запуск

Прежде чем создавать пользовательскую визуализацию, давайте разберемся с предварительными условиями, которые требуются для процесса настройки. Пользовательские визуализации Power BI строятся с использованием технологического стека, включающего TypeScript, D3.js, Node.js и другие связанные инструменты. Вот шаги и требования, которые вам нужно соблюдать:

Предварительные условия

• Установите Node.js: пользовательские визуализации Power BI создаются с использованием Node.js, поэтому убедитесь, что у вас на компьютере установлена версия Node.js (10 или позднее).
• Установите Power BI Visuals Tools: это интерфейс командной строки (CLI), помогающий создавать и управлять визуализациями Power BI. Вы можете установить его, запустив команду npm install -g powerbi-visuals-tools в командной строке или терминале.
• Базовое понимание TypeScript и D3.js: это основные технологии, используемые при создании пользовательских визуализаций Power BI. Знание этих технологий будет полезным для понимания и настройки ваших визуализаций.
• Установленный Power BI Desktop: здесь вы будете тестировать и публиковать свои пользовательские визуализации.

Установка среды разработки

Чтобы начать, вам нужно настроить вашу среду разработки. Откройте командную оболочку на вашем компьютере и создайте директорию, в которой вы планируете создавать свои пользовательские визуализации. Перейдите в эту директорию с помощью команды cd. Находясь в своей директории, создайте новый проект пользовательской визуализации с помощью Power BI Visuals Tools:

pbiviz new <your-visual-name>

Эта команда создает новый проект пользовательской визуализации Power BI с исходной структурой. Она создает файлы и директории, необходимые для вашей пользовательской визуализации.

Понимание структуры проекта

Новый проект создается с набором файлов и папок. Вот краткое описание того, что можно ожидать:

• Visual.ts: Этот файл содержит основную логику вашей пользовательской визуализации. Здесь вы будете писать код на TypeScript для создания визуализации.
• Capabilities.json: Этот JSON-файл определяет возможности вашей пользовательской визуализации, включая роли данных, сопоставления представления данных и параметры форматирования.
• VisualSettings.ts: Этот файл определяет настройки и свойства, доступные для пользователей при конфигурировании вашей визуализации.
• Package.json: Этот файл отслеживает конфигурацию проекта и зависимости.
• Resources: Эта папка содержит ресурсы, такие как иконки и файлы локализации.

Создание пользовательской визуализации

Теперь, когда ваш проект настроен, давайте перейдем к созданию пользовательских визуализаций. Разработка пользовательских визуализаций включает несколько основных шагов:

1. Определение возможностей

Файл capabilities.json очень важен, потому что он определяет, что может делать ваша визуализация. Вот очень простой пример того, как может выглядеть этот файл:

{ "dataRoles": [ { "name": "category", "kind": "Grouping" }, { "name": "measure", "kind": "Measure" } ], "dataViewMappings": [ { "conditions": [ { "category": { "max": 1 }, "measure": { "max": 1 } } ], "categorical": { "categories": { "for": { "in": "category" } }, "values": { "for": { "in": "measure" } } } } ], "objects": { "general": { "displayName": "General", "properties": { "formatString": { "type": { "formatting": { "formatString": true } } } } } } }

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

2. Написание логики визуализации

Большая часть работы происходит в Visual.ts. Вот очень простой шаблон того, как может выглядеть ваш класс TypeScript:

export class Visual implements IVisual { private target: HTMLElement; constructor(options: VisualConstructorOptions) { this.target = options.element; this.target.innerHTML = '<div>Это моя пользовательская визуализация!</div>'; } public update(options: VisualUpdateOptions) { // Здесь идет ваша логика обработки данных и отрисовки } }

В constructor мы инициализируем HTML элемент нашей визуализации. Метод update — это место, где вы обрабатываете логику, связанную с получением новых данных и их отображением на визуализации. Используйте D3.js или любую другую библиотеку по вашему выбору для создания вашей визуализации.

3. Стиль ваших визуализаций

Стили для вашей пользовательской визуализации помещаются в CSS-файл, обычно называемый visual.less. Например:

.myVisual { color: #333; background-color: #f5f5f5; padding: 10px; }

Это применяет CSS стили к вашей пользовательской визуализации. Вы можете импортировать такие стили как модуль в свой Visual.ts или применять их напрямую через код.

4. Пользовательские настройки

Вы можете добавить параметры настройки к вашей визуализации, которые будут отображаться в панели формата в Power BI. Это включает редактирование VisualSettings.ts и файла возможностей.

class VisualSettings extends DataViewObjectsParser { public general: GeneralSettings = new GeneralSettings(); } class GeneralSettings { public transparency: number = 70; }

"general": { "displayName": "Общие настройки", "properties": { "transparency": { "displayName": "Прозрачность", "type": { "numeric": true } } } }

Это включает привязку пользовательского свойства (например, прозрачности) и определение его в capabilities.json также.

Тестирование и отладка

После разработки вашей визуализации до стабильного состояния, пора тестировать и отлаживать. Запустите команду:

pbiviz start

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

Для отладки используйте инструменты отладки веб-браузера (например, консоль, сеть, вкладки источников) для изолирования и исправления проблем в вашем коде.

Упаковка и развертывание

После того, как вы удовлетворены своей пользовательской визуализацией, пора упаковать ее для использования в Power BI Desktop или для обмена с другими в организации. Используйте следующую команду:

pbiviz package

Вышеуказанная команда создаст файл .pbiviz, который является упакованной визуализацией. Чтобы использовать эту визуализацию в Power BI Desktop, перейдите на вкладку разработчика и выберите "Импортировать пользовательскую визуализацию" для загрузки вашего файла .pbiviz.

Обмен и публикация

Для обмена в организации опубликуйте в реестре организационных визуализаций в Power BI. Это сделает визуализацию доступной для пользователей в вашей организации через интерфейс Power BI. Здесь можно последовательно управлять управлением, распространением и контролем версии.

Заключительные мысли

Создание пользовательских визуализаций в Power BI может значительно улучшить способы передачи и интерпретации данных в ваших отчетах. Это открывает обширные возможности настройки, которые могут помочь сделать ваши инсайты более интуитивными и вовлекающими. Хотя путь от идеи до реализации предполагает понимание некоторых концепций разработки, полученные визуализации могут предоставить значительную ценность для уникального представления сложных данных.

Начинайте с малого и постепенно исследуйте более сложные диаграммы и графику. Используйте форумы сообщества и галерею визуализаций Power BI как дополнительные ресурсы и вдохновения. Наслаждайтесь визуализацией!

  Поделиться этой статьей

Если вы найдете что-то неправильное в содержании статьи, вы можете запросить обновление