Rychlé vytváření přizpůsobených vizuálů

Ve vložených Power BI Můžete rychle vytvářet přizpůsobené vizuály prezentovat aplikaci, uživatelé můžou upravovat existující vizuály sestav a vytvářet vlastní přizpůsobené vizuály, i když nemají předchozí prostředí Power BI. Prezentační kód ukazuje, jak pomocí rozhraní API pro vytváření sestav Power BI vytvářet a upravovat několik typů vizualizací za běhu. Další informace o používání rozhraní API pro vytváření sestav najdete v přehledu vytváření sestav.

Rychlé vytváření přizpůsobených vizuálů předváděných prostředí

Společnost Contoso, fiktivní společnost, používá Rychlé vytváření přizpůsobených vizuálů, které předvádějí k prezentaci sestavy Power BI Embedded s několika vizualizacemi dat o prodeji. Sloupcový graf, plošný graf, pruhový graf, výsečový graf a spojnicový graf zobrazují výnosy a příležitosti jako funkce typu odvětví, prodejce a stav příležitosti.

Vložená sestava obsahuje tlačítko Vytvořit rychlý vizuál, které uživatelé můžou vybrat a vytvářet nové vizuály na základě dat.

Snímek obrazovky znázorňující tvůrce rychlého vizuálu předvede vloženou sestavu Power BI pomocí tlačítka Vytvořit rychlý vizuál

Vytvoření nového rychlého vizuálu

Uživatelé sestavy můžou kdykoli během zobrazení vybrat tlačítko Vytvořit rychlý vizuál a vytvářet nové vizuály na základě prodejních dat společnosti Contoso.

Pokud například chce uživatel zobrazit sloupcový graf, který zobrazuje skutečné výnosy na základě stavu příležitosti, vybere Vytvořit rychlý vizuál a otevře dialogové okno Vytvořit rychlý vizuál. Dialogové okno, které je definováno v kódu aplikace, obsahuje vložený náhled vizuálu sestavy vpravo.

V dialogovém okně Vytvořit rychlý vizuální v části Zvolit typ vizuáluuživatel vybere sloupcový graf. V závislosti na vybraném vizuálu jsou k dispozici různá pole a hodnoty. U sloupcového grafu uživatel vybere stav příležitosti pro osu a skutečné výnosy pro hodnoty. Volitelně vyberou Odhadované výnosy pro popisy .

Po vyplnění osy a hodnot polích může uživatel vybrat různé možnosti formátování, jako je zobrazení skutečných hodnot a popisků. Můžou také napsat a naformátovat název vizuálu.

Náhled vložené sestavy v dialogovém okně zobrazuje vizualizaci, jak ji uživatel sestaví.

Snímek obrazovky s dialogovým oknem Vytvořit rychlý vizuál

Po dokončení vizuálu uživatel vybere Vytvořita nová vizualizace se zobrazí v sestavě.

Snímek obrazovky znázorňující nově vytvořený vizuál s popisem pro jeden z datových bodů

Popis se zobrazí, když uživatel najede myší na datový bod ve vizualizacích. Vzhledem k tomu, že uživatel zadal odhadované výnosy v Popisy tlačítek při vytváření vizuálu, zobrazí se v popisech dat daného pole. Pokud uživatel nezadá popis, zobrazí se v popisu jenom data osy a hodnoty.

Změna existujícího vizuálu

Uživatelé sestavy mohou změnit libovolný existující vizuál v sestavě tak, že v pravém horním rohu vizuálu vyberou Další možnosti tři tečky (...) a pak vyberou Změnit vizuální.

Uživatel sestavy může například chtít změnit Počet příležitostí podle odvětví plošný graf na sloupcový graf, protože data nejsou souvislá. Když uživatel vybere Změnit vizuální, otevře se dialogové okno Vytvořit rychlý vizuál a uživatel může změnit libovolné nastavení.

Snímek obrazovky znázorňující vizuál plošného grafu pomocí příkazu Změnit vizuál

V tomto příkladu uživatel změnil typ vizuálu na sloupcový graf. Data se teď zobrazují jako sloupcový graf.

Snímek obrazovky znázorňující, že se vizuál změnil na sloupcový graf

Rychlé vytváření přizpůsobených vizuálů předvádějící kód

Kód pro implementaci prezentace je v úložišti PowerBI-Embedded-Showcases GitHubu.

  • Aplikace kód HTML sestaví vložený kontejner sestavy a prvky, dialogová okna, textová pole a tlačítka.

  • Kód javascriptové sestavy definuje typy vizualizací, zpracovává příkazy a události a provádí všechny vložené sestavy a interakce.

Pomocí rozšíření powerbi-report-authoring pro klientskou knihovnu Power BI můžete snadno a rychle vytvářet sestavy a vizuály. Další informace najdete v přehledu vytváření sestav .

Další informace o vytváření vizuálů a jejich vazbách na data naleznete v tématu Vytvoření vizuálu. Další informace o vlastnostech vizuálu naleznete v tématu Formátování vlastností vizuálu.

Vytváření a konfigurace vizuálů

Vizuály Power BI vytvoříte pomocí createVisual a zadáte typ vizuálu, například barChart nebo pieChart. Potom svážete typ vizuálu s vlastnostmi, rolemi, poli a daty. Prezentace visuals.js soubor definuje vlastnosti, role dat, datová pole a cíle pro typy vizuálů, které tato aplikace podporuje.

V souboru index.js vytvoří následující kód vložený vizuál v dialogovém okně Vytvořit rychlý vizuál a nastaví a použije jeho vlastnosti. Například vlastnost legend je povolena pro vizuály výsečového grafu, ale zakázaná pro pruhové a sloupcové grafy.

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

Změna typu vizuálu

V dialogovém okně Vytvořit rychlý vizuál jsou všechna existující pole pro úpravy dostupná, pokud vybraný typ vizuálu zůstane beze změny. Při vytváření nového vizuálu nebo změně typu vizuálu se po výběru nového typu vizuálu zpřístupní příslušná pole pro úpravy.

Následující kód změní typ vizuálu, pokud uživatel upraví vizuál tak, aby změnil typ, například z plošného grafu na sloupcový graf. Další informace o změně typu vizuálu najdete v tématu Změna typu vizuálu.

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

Přidání příkazu Změnit vizuál do nabídky Další možnosti

Sestava embedConfiguration pomocí příkazu rozšířit nabídku rozhraní API přidá do sestavy příkaz changeVisual, který se zobrazí v nabídce Další možnosti každé vizualizace.

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

Konfigurace také skryje všechny výchozí, již existující power BI Další možnosti příkazy nabídky, například Export dat a Řazení. Další informace o přizpůsobení vizuálních příkazů naleznete v tématu Přizpůsobení příkazů nabídky.

Zpracování událostí pro změnu vizuálu a vytvoření rychlého výběru vizuálu

Následující kód zpracovává výběr příkazů Změnit vizuální příkaz a Vytvořit rychlé vizuální události kliknutí na tlačítko. Kód naslouchá výběru příkazu nebo tlačítka a otevře Vytvořit rychlý vizuál modální dialogové okno pro úpravy nebo vytvoření vizuálu.

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

Související obsah

  • Last updated on