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

Быстрое создание персонализированных визуальных элементов

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

Быстрое создание персонализированных визуальных элементов демонстрации

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

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

снимок экрана, на котором показан краткий визуальный создатель, демонстрирующий внедренный отчет Power BI с помощью кнопки

Создание быстрого визуального элемента

Пользователи отчета могут выбрать кнопку быстрого визуального в любое время во время сеанса просмотра, чтобы создать новые визуальные элементы на основе данных о продажах Contoso.

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

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

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

Внедренный предварительный просмотр отчета в диалоговом окне отображает визуализацию как пользователь создает его.

снимок экрана: диалоговое окно

По завершении визуального элемента пользователь выбирает Создать, а новая визуализация появится в отчете.

снимок экрана, показывающий только что созданный визуальный элемент с подсказкой для одной из точек данных.

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

Изменение существующего визуального элемента

Пользователи отчета могут изменить любой существующий визуальный элемент в отчете, выбрав дополнительные параметры многоточие (...) в правом верхнем углу визуального элемента, а затем выберите Изменить визуальный.

Например, пользователю отчета может потребоваться изменить количество возможностей по отраслевым диаграмме области на гистограмму, так как данные не непрерывны. Когда пользователь выбирает изменить визуальный, откроется диалоговое окно "Создание быстрого визуального", и пользователь может изменить любой из параметров.

снимок экрана: визуальный элемент диаграммы области с помощью команды

В этом примере пользователь изменил тип визуального элемента на столбцов. Теперь данные отображаются как гистограмма.

снимок экрана, показывающий визуальный элемент, измененный на гистограмму.

Быстрый создание персонализированных визуальных элементов демонстрации кода

Код реализации демонстрации находится в репозитории PowerBI-Embedded-Showcases GitHub.

  • Приложение HTML-код создает внедренный контейнер отчетов и элементы, диалоговые окна, текстовые поля и кнопки.

  • В код JavaScript определяются типы визуализаций, обрабатываются команды и события, а также выполняются все операции внедрения и взаимодействия отчета.

Вы можете использовать расширение powerbi-report-authoring для клиентской библиотеки Power BI, чтобы упростить и быстро создавать отчеты и визуальные элементы. Дополнительные сведения см. в обзореотчета .

Дополнительные сведения о создании визуальных элементов и привязке их к данным см. в статье Создание визуального. Дополнительные сведения о визуальных свойствах см. в разделе Форматирование визуальных свойств.

Создание и настройка визуальных элементов

Вы создаете визуальные элементы Power BI с помощью createVisual и задаете тип визуального элемента, например barChart или pieChart. Затем вы привязываете визуальный тип к свойствам, ролям, полям и данным. Демонстрация visuals.js файла определяет свойства, роли данных, поля данных и целевые объекты для визуальных типов, поддерживаемых этим приложением.

В файле index.js следующий код создает внедренный визуальный элемент в диалоговом окне Создание быстрого визуального и задает и применяет его свойства. Например, свойство legend включено для визуальных элементов круговой диаграммы, но отключено для линейчатых и столбцовых диаграмм.

// Based on the state object, create a visual inside the modal
async function createVisualInsideTheModalInEditMode(visualType, dataRoles) {

    // Create visual inside the modal
    const newVisual = await visualCreatorShowcaseState.page.createVisual(visualType, getVisualLayout());

    // Update state
    visualCreatorShowcaseState.newVisual = newVisual.visual;
    visualCreatorShowcaseState.visualType = newVisual.visual.type;
    const visual = newVisual.visual;
    const newVisualType = visual.type;
    
    // Enable the legend property for pie chart
    if (visualCreatorShowcaseState.visualType === "pieChart") {
        visual.setProperty(propertyToSelector("legend"), { schema: schemas.property, value: true });
    }
    
    // Add properties to the created visual
    Object.entries(visualCreatorShowcaseState.properties).forEach(property => {
        let [propertyName, propertyValue] = property;
    ...
        // Check the validity of the given property for the given visual-type and apply it to the visual
        applyValidPropertiesToTheVisual(visual, newVisualType, propertyName, propertyValue);
    });
    
    // Disable the legend for the column and bar charts
    if (visualCreatorShowcaseState.visualType === "columnChart" || visualCreatorShowcaseState.visualType === "barChart") {
        visual.setProperty(propertyToSelector("legend"), { schema: schemas.property, value: false });
    }

Изменение типа визуального элемента

В диалоговом окне "Создание быстрого визуального" все существующие поля редактирования доступны, пока выбранный визуальный тип остается неизменным. При создании нового визуального элемента или изменении типа визуального элемента соответствующие поля редактирования становятся доступными после выбора нового типа визуального элемента.

Следующий код изменяет тип визуального элемента, если пользователь изменяет визуальный элемент, чтобы изменить тип, например из диаграммы области на столбец. Дополнительные сведения об изменении визуального типа см. в разделе Изменениевизуального типа.

        const oldVisualType = selectedVisual.visual.type;
        const oldVisual = selectedVisual.visual;
        if (oldVisualType !== visualCreatorShowcaseState.visualType) {

            // If visual-type is changed, remove all active data-fields on the visual
            await removeAllActiveDataRoles(oldVisual, oldVisualType);

            // Change the visual type
            await oldVisual.changeType(visualCreatorShowcaseState.visualType);
        }

Добавление визуальной команды "Изменить" в меню "Дополнительные параметры"

В отчете embedConfiguration используется команда расширения меню API changeVisual для добавления команды changeVisual в отчет, которая отображается в меню Дополнительные параметры меню каждой визуализации.

let config = {
...
    settings: {
        ...
        extensions: [
            {
                command: {
                    name: "changeVisual",
                    title: "Change visual",
                    extend: {
                        visualOptionsMenu: {
                            title: "Change visual",
                            menuLocation: models.MenuLocation.Top,

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

Обработка визуального элемента "Изменение" и создание событий быстрого выбора визуальных элементов

Следующий код обрабатывает выбор команды изменения визуального и создание событий быстрого визуального нажатия кнопки. Код прослушивает выбор команды или кнопки и открывает диалоговое окно быстрого визуального для редактирования или создания визуального элемента.

    // Listen for the commandTriggered event
    baseReportState.report.on("commandTriggered", function (event) {

        // Open the modal and set the fields, properties and title for the visual
        openModalAndFillState(event.detail);
    });

    baseReportState.report.on("buttonClicked", function () {

        // Show the modal to create the visual
        openModalAndFillState();
    });

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