Udostępnij za pomocą

Szybkie tworzenie spersonalizowanych wizualizacji

W osadzonej usłudze Power BI Szybkie tworzenie spersonalizowanych wizualizacji prezentacji aplikacji użytkownicy mogą edytować istniejące wizualizacje raportów i tworzyć własne spersonalizowane wizualizacje, nawet jeśli nie mają wcześniejszego środowiska usługi Power BI. W kodzie prezentacji pokazano, jak używać interfejsów API tworzenia raportów usługi Power BI do tworzenia i edytowania kilku typów wizualizacji w czasie wykonywania. Aby uzyskać więcej informacji na temat korzystania z interfejsów API tworzenia raportów, zobacz omówienie tworzenia raportów .

Szybkie tworzenie spersonalizowanych wizualizacji w środowisku prezentacji

Firma Contoso, fikcyjna firma, używa Szybkie tworzenie spersonalizowanych wizualizacji prezentujących prezentowanie osadzonego raportu usługi Power BI z kilkoma wizualizacjami danych sprzedaży. Wykres kolumnowy, wykres warstwowy, wykres słupkowy, wykres kołowy i wykres liniowy pokazują przychody i możliwości jako funkcje typu branżowego, sprzedawcy i stanu szans sprzedaży.

Osadzony raport ma przycisk Tworzenie szybkiej wizualizacji, który użytkownicy mogą wybrać, aby utworzyć nowe wizualizacje na podstawie danych.

Zrzut ekranu przedstawiający szybki twórca wizualizacji prezentowanie raportu osadzonego usługi Power BI za pomocą przycisku Utwórz szybką wizualizację.

Tworzenie nowej szybkiej wizualizacji

Użytkownicy raportów mogą wybrać przycisk Utwórz szybką wizualizację w dowolnym momencie podczas sesji wyświetlania, aby utworzyć nowe wizualizacje na podstawie danych sprzedaży firmy Contoso.

Jeśli na przykład użytkownik chce wyświetlić wykres kolumnowy przedstawiający rzeczywisty przychód na podstawie stanu szansy sprzedaży, wybierze pozycję Utwórz szybką wizualizację, aby otworzyć okno dialogowe szybkiej wizualizacji Tworzenie szybkiej wizualizacji. Okno dialogowe zdefiniowane w kodzie aplikacji zawiera osadzony podgląd wizualizacji raportu po prawej stronie.

W oknie dialogowym Tworzenie szybkiej wizualizacji w obszarze Wybierz typ wizualizacjiużytkownik wybiera wykres kolumnowy. Różne pola i wartości są dostępne w zależności od typu wizualizacji wybranego przez użytkownika. Na wykresie kolumnowym użytkownik wybiera Stan szansy sprzedaży dla pola oś i wartości rzeczywistego przychodu wartości . Opcjonalnie wybierają szacowany przychód dla etykietek narzędzi .

Po wypełnieniu osi i wartości polach użytkownik może wybrać różne opcje formatowania, takie jak wyświetlanie rzeczywistych wartości i etykiet. Mogą również pisać i formatować tytuł wizualizacji.

Osadzony podgląd raportu w oknie dialogowym przedstawia wizualizację podczas tworzenia przez użytkownika.

Zrzut ekranu przedstawiający okno dialogowe Tworzenie szybkiej wizualizacji.

Po zakończeniu wizualizacji użytkownik wybierze Utwórz, a nowa wizualizacja pojawi się w raporcie.

Zrzut ekranu przedstawiający nowo utworzoną wizualizację z etykietką narzędzia wyświetlaną dla jednego z punktów danych.

Etykietka narzędzia jest wyświetlana, gdy użytkownik najecha kursorem na punkt danych w wizualizacjach. Ponieważ użytkownik określił szacowany przychód w obszarze etykietek narzędzi podczas tworzenia wizualizacji, dane tego pola są wyświetlane w etykietkach narzędzi. Jeśli użytkownik nie określi etykietki narzędzia, w etykietce narzędzia będą wyświetlane tylko dane osi i wartości.

Zmienianie istniejącej wizualizacji

Użytkownicy raportów mogą zmienić dowolną istniejącą wizualizację w raporcie, wybierając Więcej opcji wielokropka (...) w prawym górnym rogu wizualizacji, a następnie wybierając pozycję Zmień wizualizację.

Na przykład użytkownik raportu może chcieć zmienić wykres warstwowy Liczba szans sprzedaży według branży na wykres kolumnowy, ponieważ dane nie są ciągłe. Gdy użytkownik wybierze Zmień wizualizację, zostanie otwarte okno dialogowe Tworzenie szybkiej wizualizacji, a użytkownik może zmienić dowolne ustawienia.

Zrzut ekranu przedstawiający wizualizację wykresu warstwowego za pomocą polecenia Zmień wizualizację.

W tym przykładzie użytkownik zmienił typ wizualizacji na wykres kolumnowy. Dane są teraz wyświetlane jako wykres kolumnowy.

Zrzut ekranu przedstawiający wizualizację zmienioną na wykres kolumnowy.

Szybkie tworzenie spersonalizowanych wizualizacji prezentacji kodu

Kod implementacji prezentacji znajduje się w repozytorium GitHub PowerBI-Embedded-Showcases.

  • Aplikacja kod HTML kompiluje osadzony kontener i elementy raportu, okna dialogowe, pola tekstowe i przyciski.

  • raport kodu JavaScript definiuje typy wizualizacji, obsługuje polecenia i zdarzenia oraz wykonuje wszystkie osadzanie i interakcje raportów.

Aby ułatwić i szybkie tworzenie raportów i wizualizacji, możesz użyć rozszerzenia powerbi-report-authoring dla biblioteki klienta usługi Power BI. Aby uzyskać więcej informacji, zobacz omówienie tworzenia raportów .

Aby uzyskać więcej informacji na temat tworzenia wizualizacji i wiązania ich z danymi, zobacz Tworzenie wizualizacji. Aby uzyskać więcej informacji na temat właściwości wizualizacji, zobacz Format właściwości wizualizacji.

Tworzenie i konfigurowanie wizualizacji

Wizualizacje usługi Power BI można tworzyć przy użyciu createVisual i określać typ wizualizacji, taki jak barChart lub pieChart. Następnie powiążesz typ wizualizacji z właściwościami, rolami, polami i danymi. Plik visuals.js prezentacji definiuje właściwości, role danych, pola danych i cele dla typów wizualizacji, które obsługuje ta aplikacja.

W pliku index.js poniższy kod tworzy osadzoną wizualizację wewnątrz okna dialogowego Tworzenie szybkiej wizualizacji oraz ustawia i stosuje jego właściwości. Na przykład właściwość legend jest włączona dla wizualizacji wykresu kołowego, ale jest wyłączona dla wykresów słupkowych i kolumnowych.

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

Zmienianie typu wizualizacji

W oknie dialogowym Tworzenie szybkiej wizualizacji wszystkie istniejące pola edycji są dostępne, o ile wybrany typ wizualizacji pozostanie niezmieniony. Podczas tworzenia nowej wizualizacji lub zmiany typu wizualizacji odpowiednie pola edycji staną się dostępne po wybraniu przez użytkownika nowego typu wizualizacji.

Poniższy kod zmienia typ wizualizacji, jeśli użytkownik edytuje wizualizację, aby zmienić typ, na przykład z wykresu warstwowego na wykres kolumnowy. Aby uzyskać więcej informacji na temat zmiany typu wizualizacji, zobacz Zmienianie typu wizualizacji.

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

Dodaj polecenie Zmień wizualizację do menu Więcej opcji

Raport embedConfiguration używa polecenia menu rozszerzenia interfejsu API, aby dodać changeVisual polecenie do raportu, które jest wyświetlane w menu Więcej opcji każdej wizualizacji.

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

Konfiguracja ukrywa również wszystkie domyślne polecenia menu Więcej opcji usługi Power BI, takie jak Eksportuj dane i Sortuj. Aby uzyskać więcej informacji na temat dostosowywania poleceń wizualizacji, zobacz Dostosowywanie poleceń menu.

Obsługa zmian wizualizacji i Tworzenie szybkich zdarzeń wyboru wizualizacji

Poniższy kod obsługuje wybór poleceń Zmień wizualizację i Tworzenie szybkiej wizualizacji kliknięcie zdarzeń. Kod nasłuchuje zaznaczenia polecenia lub przycisku i otwiera Tworzenie szybkiej wizualizacji modalne okno dialogowe, aby edytować lub utworzyć wizualizację.

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

Powiązana zawartość

  • Last updated on