Schnelles Erstellen personalisierter Visueller Präsentationen

In der eingebetteten Power BI-erstellen Sie schnell personalisierte visuelle Elemente Showcase-Anwendung, können Benutzer vorhandene Berichtsvisualisierungen bearbeiten und ihre eigenen personalisierten visuellen Elemente erstellen, auch wenn sie über keine vorherige Power BI-Benutzeroberfläche verfügen. Der Showcase-Code veranschaulicht, wie Sie mithilfe der Power BI-Berichtserstellungs-APIs mehrere Arten von Visualisierungen zur Laufzeit erstellen und bearbeiten können. Weitere Informationen zur Verwendung der Berichtserstellungs-APIs finden Sie in der Übersicht über die Berichterstellung.

Schnelles Erstellen personalisierter visueller Präsentationen

Contoso, ein fiktives Unternehmen, verwendet die schnell personalisierte visuelle Darstellungen erstellen, um einen eingebetteten Power BI-Bericht mit mehreren Visualisierungen ihrer Vertriebsdaten darzustellen. Ein Säulendiagramm, Flächendiagramm, Balkendiagramm, Kreisdiagramm und Liniendiagramm zeigen Umsatz- und Verkaufschancen als Funktionen von Branchentyp, Verkäufer und Verkaufschancenstatus an.

Der eingebettete Bericht verfügt über eine Schaltfläche "Schnelle visuelle erstellen", die Benutzer auswählen können, um neue visuelle Elemente basierend auf den Daten zu erstellen.

Screenshot, der den power BI-eingebetteten Power BI-Bericht mit der Schaltfläche

Erstellen eines neuen visuellen Schnellstarts

Berichtsbenutzer können die Schaltfläche Schaltfläche "Schnelle visuelle erstellen" jederzeit während ihrer Anzeigesitzung auswählen, um neue visuelle Elemente basierend auf den Contoso-Vertriebsdaten zu erstellen.

Wenn ein Benutzer z. B. ein Säulendiagramm sehen möchte, das den tatsächlichen Umsatz basierend auf dem Verkaufschancenstatus anzeigt, wählen sie "Schnelle visuelle erstellen" aus, um das Dialogfeld "Schnelle visuelle erstellen" zu öffnen. Das Dialogfeld, das im Anwendungscode definiert ist, enthält eine eingebettete visuelle Berichtsvorschau auf der rechten Seite.

Wählen Sie im Dialogfeld "Schnelle visuelle erstellen" unter Visuellen Typ auswählenden Benutzer Säulendiagrammaus. Je nachdem, welchen visuellen Typ der Benutzer ausgewählt hat, stehen verschiedene Felder und Werte zur Verfügung. Für das Säulendiagramm wählt der Benutzer Verkaufschancenstatus für das Feld Achsenachse und Ist-Umsatz- für Werteaus. Optional wählen sie geschätzten Umsatz für QuickInfosaus.

Nachdem sie die Axis und Werte Feldern ausgefüllt haben, kann der Benutzer verschiedene Formatierungsoptionen auswählen, z. B. ob tatsächliche Werte und Beschriftungen angezeigt werden sollen. Sie können auch einen Titel für das visuelle Element schreiben und formatieren.

Die eingebettete Berichtsvorschau im Dialogfeld zeigt die Visualisierung an, während der Benutzer sie erstellt.

Screenshot mit dem Dialogfeld

Wenn das visuelle Element abgeschlossen ist, wählt der Benutzer Erstellenaus, und die neue Visualisierung wird im Bericht angezeigt.

Screenshot eines neu erstellten visuellen Elements mit einer QuickInfo, die für einen der Datenpunkte angezeigt wird.

Eine QuickInfo wird angezeigt, wenn ein Benutzer auf einen Datenpunkt in Visualisierungen zeigt. Da der Benutzer beim Erstellen des visuellen Elements geschätzten Umsatz unter QuickInfos angegeben hat, werden die Daten dieses Felds in den QuickInfos angezeigt. Wenn der Benutzer keine QuickInfo angibt, werden nur die Achsen- und Wertdaten in der QuickInfo angezeigt.

Ändern eines vorhandenen visuellen Elements

Berichtsbenutzer können alle vorhandenen visuellen Elemente im Bericht ändern, indem Sie die Weitere Optionen Auslassungspunkte (...) oben rechts im visuellen Element auswählen und dann visuellenändern.

Beispielsweise kann ein Berichtsbenutzer die Anzahl der Verkaufschancen nach Industrie Flächendiagramm in ein Säulendiagramm ändern, da die Daten nicht fortlaufend sind. Wenn der Benutzer visuelleändern auswählt, wird das Dialogfeld "Schnelle visuelle erstellen" geöffnet, und der Benutzer kann beliebige Einstellungen ändern.

Screenshot mit visuellem Bereichsdiagramm mit dem befehl

In diesem Beispiel hat der Benutzer den visuellen Typ in Säulendiagrammgeändert. Die Daten werden jetzt als Säulendiagramm angezeigt.

Screenshot mit dem visuellen Wechsel zu einem Säulendiagramm.

Schnelles Erstellen personalisierter visueller Präsentationscode

Der Code für die Implementierung der Showcase befindet sich im PowerBI-Embedded-Showcases GitHub-Repository.

  • Die Anwendung HTML-Code erstellt den eingebetteten Berichtscontainer und Elemente, Dialogfelder, Textfelder und Schaltflächen.

  • Der Bericht JavaScript-Code definiert die Visualisierungstypen, behandelt Befehle und Ereignisse und führt alle Berichtseinbettungen und Interaktionen aus.

Sie können die powerbi-report-authoring Erweiterung für die Power BI Client-Bibliothek verwenden, um berichte und visuelle Elemente einfach und schnell zu erstellen. Weitere Informationen finden Sie in der übersicht über die Berichtserstellung.

Weitere Informationen zum Erstellen visueller Elemente und zum Binden an Daten finden Sie unter Erstellen einer visuellen. Weitere Informationen zu visuellen Eigenschaften finden Sie unter Format visuelle Eigenschaften.

Erstellen und Konfigurieren visueller Elemente

Sie erstellen Power BI-Visualisierungen mithilfe von createVisual und Angeben des visuellen Typs, z. B. barChart oder pieChart. Anschließend binden Sie den visuellen Typ an Eigenschaften, Rollen, Felder und Daten. Die Showcase-visuals.js Datei definiert die Eigenschaften, Datenrollen, Datenfelder und Ziele für die visuellen Typen, die diese Anwendung unterstützt.

In der datei index.js erstellt der folgende Code ein eingebettetes visuelles Element im Dialogfeld Erstellen von schnellen visuellen und legt dessen Eigenschaften fest und wendet sie an. Die legend-Eigenschaft ist beispielsweise für visuelle Kreisdiagramme aktiviert, für Balken- und Säulendiagramme jedoch deaktiviert.

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

Ändern des visuellen Typs

Im Dialogfeld Dialogfeld "Schnelle visuelle erstellen" sind alle vorhandenen Bearbeitungsfelder verfügbar, solange der ausgewählte visuelle Typ unverändert bleibt. Beim Erstellen eines neuen visuellen oder sich ändernden visuellen Typs werden die relevanten Bearbeitungsfelder verfügbar, nachdem der Benutzer den neuen visuellen Typ ausgewählt hat.

Der folgende Code ändert den visuellen Typ, wenn der Benutzer ein visuelles Element bearbeitet, um den Typ zu ändern, z. B. von einem Flächendiagramm in ein Säulendiagramm. Weitere Informationen zum Ändern des visuellen Typs finden Sie unter Ändern des visuellen Typs.

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

Hinzufügen des visuellen Befehls "Ändern" zum Menü "Weitere Optionen"

Der Bericht embedConfiguration verwendet den Erweiterungsmenübefehl API, um dem Bericht einen changeVisual Befehl hinzuzufügen, der im Weitere Optionen Menü jeder Visualisierung angezeigt wird.

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

Die Konfiguration blendet auch alle standardmäßigen, bereits vorhandenen Power BI-Weitere Optionen Menübefehle aus, z. B. Daten exportieren und Sortieren. Weitere Informationen zum Anpassen visueller Befehle finden Sie unter Menübefehle anpassen.

Behandeln des visuellen Change-Elements und Erstellen von schnellen visuellen Auswahlereignissen

Der folgende Code behandelt die Visuelle Befehlsauswahl ändern und Schnelle visuelle Klickereignisse für Schaltflächen erstellen. Der Code lauscht auf die Befehls- oder Schaltflächenauswahl und öffnet die Schnelle visuelle modale Dialogfeld erstellen, um das visuelle Element zu bearbeiten oder zu erstellen.

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

Verwandte Inhalte

  • Last updated on