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

Внедрение содержимого Power BI в приложение Angular

При создании приложения встроенной аналитики Power BI Angular может быстро настроить поддерживаемое масштабируемое приложение. Angular добавляет структуры и шаблоны проектирования в интерфейсную разработку, позволяя разработчикам создавать более сложные веб-приложения, которые проще поддерживать и обновлять.

Библиотека Power BI Angular позволяет внедрить следующие элементы Power BI в приложение Angular:

  • Отчеты
  • Панели мониторинга
  • Плитки панели мониторинга
  • Визуальные элементы отчета
  • Вопросы и ответы
  • Отчеты с разбивкой на страницы

Внедрение содержимого Power BI в веб-приложение Angular

В этом разделе описывается, как импортировать Angular в приложение и использовать его для внедрения отчета Power BI.

Подробные сведения об использовании см. в файле Power BI Angular.

Импорт библиотеки Angular

Компонент Power BI Angular можно найти на NPM. Он также открыт для GitHub.

Чтобы импортировать Angular в веб-приложение, добавьте импорт, указанный ниже.

import { PowerBIEmbedModule } from 'powerbi-client-angular';

@NgModule({
  imports: [
    ...
    ...
    PowerBIEmbedModule
  ],
  exports: ...,
  declarations: ...
})

Внедрение отчета с помощью Angular

В этом примере показано, как внедрить отчет Power BI с помощью Angular. Ниже приведено описание каждого компонента в примере кода.

<powerbi-report
    [embedConfig] = {{
        type: "report",
        id: "<Report Id>",
        embedUrl: "<Embed Url>",
        accessToken: "<Access Token>",
        tokenType: models.TokenType.Embed,
        settings: {
            panes: {
                filters: {
                    expanded: false,
                    visible: false
                }
            },
            background: models.BackgroundType.Transparent,
        }
    }}

    [cssClassName] = { "reportClass" }

    [phasedEmbedding] = { false }

    [eventHandlers] = {
        new Map([
            ['loaded', () => console.log('Report loaded');],
            ['rendered', () => console.log('Report rendered');],
            ['error', (event) => console.log(event.detail);]
        ])
    }
>
</powerbi-report>

В следующем списке содержатся описания или дополнительные сведения для каждого компонента в примере фрагмента кода.

  • embedConfig — определяет содержимое, которое вы внедряете, и задает параметры содержимого. Изменения конфигурации внедрения при внедрении следующих элементов Power BI:

  • eventHandlers — объект карты для имен событий и их обработчиков. Дополнительные сведения см. в обработке событий.

  • cssClassName — предоставляет внедренный элемент имена классов CSS, которые позволяют управлять стилем внедренного iframe с помощью CSS.

  • поэтапное. Улучшает взаимодействие конечных пользователей, предоставляя разработчикам больше гибкости для внедрения отчетов на этапе. Дополнительные сведения см. в статье Использование поэтапного внедрения.

Загрузка отчета Power BI

powerbi.bootstrap — это метод, используемый для ускорения внедрения элементов Power BI и повышения производительности. Дополнительные сведения см. в разделе Использование bootstrap для повышения производительности.

<powerbi-report
    [embedConfig] = {{
        type: "report",
        id: undefined,
        embedUrl: undefined,
        accessToken: undefined, // Keep as empty string, null or undefined
        tokenType: models.TokenType.Embed,
        hostname: "https://app.powerbi.com"
    }}
>
</powerbi-report>

Чтобы внедрить отчет после начальной загрузки, обновите внедренную конфигурацию (по крайней мере accessToken и embedUrl).

Демонстрация Angular

Репозиторий Angular включает демонстрацию, которая внедряет пример отчета с помощью компонента PowerBIReportEmbed. Он демонстрирует полный поток загрузки отчета, внедрения и обновления внедренного отчета. Он также демонстрирует использование библиотеки отчетов powerbi powerbi, удалив визуальный элемент из отчета при нажатии кнопки "Удалить визуальный элемент". Он также задает событие DataSelected.

Дополнительные сведения см. в разделе демонстрации файла readme.

анимированный GIF-файл, показывающий демонстрацию Power BI Angular.

Запуск демонстрации

Демонстрация — это вложенная папка в репозитории. Чтобы запустить демонстрацию на localhost, выполните следующие действия:

  1. Выполните следующие команды:

    npm run demo

  2. Чтобы просмотреть в браузере, перенаправьте его на http:/localhost:4200/.

Связанное содержимое

  • Last updated on