Sdílet prostřednictvím

Přidání interaktivity do vizuálu podle výběrů vizuálů Power BI

  • Článek

Power BI nabízí dva způsoby interakce s vizuály – výběr a filtrování. Následující příklad ukazuje, jak vybrat položku z jednoho vizuálu a upozornit ostatní vizuály v sestavě o novém stavu výběru.

Rozhraní odpovídá objektu Selection :

export interface ISelectionId {
    equals(other: ISelectionId): boolean;
    includes(other: ISelectionId, ignoreHighlight?: boolean): boolean;
    getKey(): string;
    getSelector(): Selector;
    getSelectorsByColumn(): SelectorsByColumn;
    hasIdentity(): boolean;
}

Výběr datových bodů pomocí správce výběru

Objekt hostitele vizuálu poskytuje metodu pro vytvoření instance správce výběru. Správce výběru má odpovídající metodu pro každou z následujících akcí:

  • Vyberte
  • Vymazání výběru
  • Zobrazení místní nabídky
  • Uložení aktuálních výběrů
  • Kontrola stavu výběru

Vytvoření instance správce výběru

Pokud chcete použít správce výběru, vytvořte instanci správce výběru. Vizuály obvykle vytvoří instanci správce výběru v constructor části objektu vizuálu.

export class Visual implements IVisual {
    private target: HTMLElement;
    private host: IVisualHost;
    private selectionManager: ISelectionManager;
    // ...
    constructor(options: VisualConstructorOptions) {
        this.host = options.host;
        // ...
        this.selectionManager = this.host.createSelectionManager();
    }
    // ...
}

Vytvoření instance tvůrce výběrů

Po vytvoření instance správce výběru je potřeba vytvořit selections pro každý datový bod vizuálu. Metoda hostitelského createSelectionIdBuilder objektu vizuálu vygeneruje výběr pro každý datový bod. Tato metoda vrátí instanci objektu s rozhraním powerbi.visuals.ISelectionIdBuilder:

export interface ISelectionIdBuilder {
    withCategory(categoryColumn: DataViewCategoryColumn, index: number): this;
    withSeries(seriesColumn: DataViewValueColumns, valueColumn: DataViewValueColumn | DataViewValueColumnGroup): this;
    withMeasure(measureId: string): this;
    withMatrixNode(matrixNode: DataViewMatrixNode, levels: DataViewHierarchyLevel[]): this;
    withTable(table: DataViewTable, rowIndex: number): this;
    createSelectionId(): ISelectionId;
}

Tento objekt má odpovídající metody pro vytvoření selections pro různé typy mapování zobrazení dat.

Poznámka:

Metody withTable a withMatrixNode byly zavedeny v rozhraní API 2.5.0 vizuálů Power BI. Pokud potřebujete použít výběry pro mapování zobrazení dat tabulky nebo matice, aktualizujte rozhraní API verze 2.5.0 nebo vyšší.

Vytvoření výběrů pro mapování zobrazení dat kategorií

Pojďme se podívat, jak výběry představují mapování zobrazení dat kategorií pro ukázkový sémantický model:

Výrobce Typ Hodnota
Chrysler Domácí auto 28883
Chrysler Domácí nákladní vůz 117131
Chrysler Importovat auto 0
Chrysler Importovat nákladní vůz 6362
Ford Domácí auto 50032
Ford Domácí nákladní vůz 122446
Ford Importovat auto 0
Ford Importovat nákladní vůz 0
GM Domácí auto 65426
GM Domácí nákladní vůz 138122
GM Importovat auto 197
GM Importovat nákladní vůz 0
Honda Domácí auto 51450
Honda Domácí nákladní vůz 46115
Honda Importovat auto 2932
Honda Importovat nákladní vůz 0
Nissan Domácí auto 51476
Nissan Domácí nákladní vůz 47343
Nissan Importovat auto 5485
Nissan Importovat nákladní vůz 1430
Toyota Domácí auto 55643
Toyota Domácí nákladní vůz 61227
Toyota Importovat auto 20799
Toyota Importovat nákladní vůz 23614

Vizuál používá následující mapování zobrazení dat:

{
    "dataRoles": [
        {
            "displayName": "Columns",
            "name": "columns",
            "kind": "Grouping"
        },
        {
            "displayName": "Rows",
            "name": "rows",
            "kind": "Grouping"
        },
        {
            "displayName": "Values",
            "name": "values",
            "kind": "Measure"
        }
    ],
    "dataViewMappings": [
        {
            "categorical": {
                "categories": {
                    "for": {
                        "in": "columns"
                    }
                },
                "values": {
                    "group": {
                        "by": "rows",
                        "select": [
                            {
                                "for": {
                                    "in": "values"
                                }
                            }
                        ]
                    }
                }
            }
        }
    ]
}

V předchozím příkladu Manufacturer je columns a Type je rows. Řada se vytvoří seskupením hodnot podle rows (Type).

Vizuál by měl být schopný rozdělit data podle Manufacturer nebo Type.

Pokud například uživatel vybere ChryslerManufacturermožnost podle , ostatní vizuály by měly zobrazit následující data:

Výrobce Typ Hodnota
Chrysler Domácí auto 28883
Chrysler Domácí nákladní vůz 117131
Chrysler Importovat auto 0
Chrysler Importovat nákladní vůz 6362

Když uživatel vybere Import CarType data podle (vybere data podle řady), ostatní vizuály by měly zobrazit následující data:

Výrobce Typ Hodnota
Chrysler Importovat auto 0
Ford Importovat auto 0
GM Importovat auto 197
Honda Importovat auto 2932
Nissan Importovat auto 5485
Toyota Importovat auto 20799

Screenshot that shows the visual with selections.

Pokud chcete zobrazit průřezová data, vyplňte datové košíky vizuálu následujícím způsobem:

Screenshot that shows visual's data baskets.

V předchozím příkladu Manufacturer je kategorie (sloupce), Type je řada (řádky) a Sales je Values určená pro řadu.

Poznámka:

Values jsou vyžadovány pro zobrazení řady, protože podle mapování Values zobrazení dat jsou seskupené podle Rows dat.

Vytváření výběrů pro kategorie

// categories
const categories = dataView.categorical.categories;

// create label for 'Manufacturer' column
const p = document.createElement("p") as HTMLParagraphElement;
p.innerText = categories[0].source.displayName.toString();
this.target.appendChild(p);

// get count of category elements
const categoriesCount = categories[0].values.length;

// iterate all categories to generate selection and create button elements to use selections
for (let categoryIndex = 0; categoryIndex < categoriesCount; categoryIndex++) {
    const categoryValue: powerbi.PrimitiveValue = categories[0].values[categoryIndex];

    const categorySelectionId = this.host.createSelectionIdBuilder()
        .withCategory(categories[0], categoryIndex) // we have only one category (only one `Manufacturer` column)
        .createSelectionId();
    this.dataPoints.push({
        value: categoryValue,
        selection: categorySelectionId
    });
    console.log(categorySelectionId);

    // create button element to apply selection on click
    const button = document.createElement("button") as HTMLButtonElement;
    button.value = categoryValue.toString();
    button.innerText = categoryValue.toString();
    button.addEventListener("click", () => {
        // handle click event to apply correspond selection
        this.selectionManager.select(categorySelectionId);
    });
    this.target.appendChild(button);
}

V předchozím vzorovém kódu iterujeme všechny kategorie. V každé iteraci voláme createSelectionIdBuilder vytvoření dalšího výběru pro každou kategorii voláním withCategory metody tvůrce výběrů. Metoda createSelectionId se používá jako konečná metoda k vrácení vygenerovaného selection objektu.

withCategory V metodě předáváme sloupec category, v ukázce, jeho Manufacturera index prvku category.

Vytváření výběrů pro řady

// get groupped values for series
const series: powerbi.DataViewValueColumnGroup[] = dataView.categorical.values.grouped();

// create label for 'Type' column
const p2 = document.createElement("p") as HTMLParagraphElement;
p2.innerText = dataView.categorical.values.source.displayName;
this.target.appendChild(p2);

// iterate all series to generate selection and create button elements to use selections
series.forEach( (ser: powerbi.DataViewValueColumnGroup) => {
    // create selection id for series
    const seriesSelectionId = this.host.createSelectionIdBuilder()
        .withSeries(dataView.categorical.values, ser)
        .createSelectionId();

    this.dataPoints.push({
        value: ser.name,
        selection: seriesSelectionId
    });

    // create button element to apply selection on click
    const button = document.createElement("button") as HTMLButtonElement;
    button.value =ser.name.toString();
    button.innerText = ser.name.toString();
    button.addEventListener("click", () => {
        // handle click event to apply correspond selection
        this.selectionManager.select(seriesSelectionId);
    });
    this.target.appendChild(button);
});

Vytvoření výběrů pro mapování zobrazení dat tabulky

Následující příklad ukazuje mapování zobrazení dat tabulky:

{
    "dataRoles": [
        {
            "displayName": "Values",
            "name": "values",
            "kind": "GroupingOrMeasure"
        }
    ],
    "dataViewMappings": [
        {
            "table": {
                "rows": {
                    "for": {
                        "in": "values"
                    }
                }
            }
        }
    ]
}

Chcete-li vytvořit výběr pro každý řádek mapování zobrazení dat tabulky, zavolejte withTable metodu tvůrce výběrů.

public update(options: VisualUpdateOptions) {
    const dataView = options.dataViews[0];
    dataView.table.rows.forEach((row: DataViewTableRow, rowIndex: number) => {
        this.target.appendChild(rowDiv);
        const selection: ISelectionId = this.host.createSelectionIdBuilder()
            .withTable(dataView.table, rowIndex)
            .createSelectionId();
    }
}

Kód vizuálu iteruje řádky tabulky a každý řádek volá metodu withTable tabulky. withTable Parametry metody jsou table objekt a index řádku tabulky.

Vytvoření výběrů pro mapování zobrazení maticových dat

public update(options: VisualUpdateOptions) {
    const host = this.host;
    const rowLevels: powerbi.DataViewHierarchyLevel[] = dataView.matrix.rows.levels;
    const columnLevels: powerbi.DataViewHierarchyLevel[] = dataView.matrix.rows.levels;

    // iterate rows hierarchy
    nodeWalker(dataView.matrix.rows.root, rowLevels);
    // iterate columns hierarchy
    nodeWalker(dataView.matrix.columns.root, columnLevels);

    function nodeWalker(node: powerbi.DataViewMatrixNode, levels: powerbi.DataViewHierarchyLevel[]) {
        const nodeSelection = host.createSelectionIdBuilder().withMatrixNode(node, levels);

        if (node.children && node.children.length) {
            node.children.forEach(child => {
                nodeWalker(child, levels);
            });
        }
    }
}

V ukázce nodeWalker rekurzivně volá každý uzel a podřízený uzel.

nodeWalkernodeSelection vytvoří objekt při každém volání. Každý nodeSelection představuje selection odpovídající uzly.

Výběr datových bodů pro průřez jiných vizuálů

V tomto příkladu jsme vytvořili obslužnou rutinu kliknutí pro prvky tlačítka. Obslužná rutina volá metodu select správce výběru a předá objekt výběru.

button.addEventListener("click", () => {
    // handle click event to apply correspond selection
    this.selectionManager.select(categorySelectionId);
});

Rozhraní select metody:

interface ISelectionManager {
    // ...
    select(selectionId: ISelectionId | ISelectionId[], multiSelect?: boolean): IPromise<ISelectionId[]>;
    // ...
}

Metoda select může přijmout pole výběrů. Vizuál tak může mít vybraných několik datových bodů najednou. Druhý parametr je multiSelectzodpovědný za vícenásobný výběr. Pokud multiSelect je pravda, Power BI při použití aktuálního výběru nevymaže předchozí stav výběru. Pokud je hodnota false, předchozí výběr se přepíše.

Typickým příkladem použití multiSelect je zpracování stavu tlačítka Ctrl u události kliknutí. Když je tlačítko Ctrl podržením, můžete vybrat více než jeden objekt.

button.addEventListener("click", (mouseEvent) => {
    const multiSelect = (mouseEvent as MouseEvent).ctrlKey;
    this.selectionManager.select(seriesSelectionId, multiSelect);
});

Související obsah

Zpracování výběrů při přepínání záložek

Přidání místní nabídky pro datové body vizuálů

Přidání výběrů do vizuálů Power BI