Del via

Føj interaktivitet til visualisering ved hjælp af valg af Power BI-visualiseringer

  • Artikel

Power BI indeholder to måder at interagere med visualiseringer på – valg og filtrering. I følgende eksempel kan du se, hvordan du vælger et element fra én visualisering og giver de andre visualiseringer i rapporten besked om den nye markeringstilstand.

Grænsefladen svarer til et Selection objekt:

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

Brug valgstyringen til at vælge datapunkter

Det visuelle værtsobjekt indeholder en metode til oprettelse af en forekomst af valgstyringen. Valgstyringen har en tilsvarende metode for hver af følgende handlinger:

  • Markér
  • Ryd markeringen
  • Vis genvejsmenuen
  • Gem de aktuelle markeringer
  • Kontrollér markeringstilstanden

Opret en forekomst af valgstyringen

Hvis du vil bruge valgstyringen, skal du oprette forekomsten af en valgstyring. Visualiseringer opretter normalt en forekomst af valgstyringen constructor i afsnittet i visualiseringsobjektet.

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

Opret en forekomst af valggeneratoren

Når forekomsten af valgstyringen oprettes, skal du oprette selections for hvert datapunkt i visualiseringen. Metoden for visualiseringens createSelectionIdBuilder værtsobjekt genererer et valg for hvert datapunkt. Denne metode returnerer en forekomst af objektet med grænsefladen 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;
}

Dette objekt har tilsvarende metoder til at oprette selections for forskellige typer tilknytninger af datavisninger.

Bemærk

Metoderne withTable og withMatrixNode blev introduceret i API 2.5.0 af Power BI-visualiseringerne. Hvis du har brug for at bruge valg til tilknytninger af tabel- eller matrixdatavisninger, skal du opdatere til API-version 2.5.0 eller nyere.

Opret valg til tilknytning af kategoriske datavisninger

Lad os gennemgå, hvordan valg repræsenterer tilknytning af kategoriske datavisninger for en semantisk eksempelmodel:

Producent Skriv Værdi
Chrysler Privat bil 28883
Chrysler Indenlandsk lastbil 117131
Chrysler Importér bil 0
Chrysler Importér lastbil 6362
Ford Privat bil 50032
Ford Indenlandsk lastbil 122446
Ford Importér bil 0
Ford Importér lastbil 0
GM Privat bil 65426
GM Indenlandsk lastbil 138122
GM Importér bil 197
GM Importér lastbil 0
Honda Privat bil 51450
Honda Indenlandsk lastbil 46115
Honda Importér bil 2932
Honda Importér lastbil 0
Nissan Privat bil 51476
Nissan Indenlandsk lastbil 47343
Nissan Importér bil 5485
Nissan Importér lastbil 1430
Toyota Privat bil 55643
Toyota Indenlandsk lastbil 61227
Toyota Importér bil 20799
Toyota Importér lastbil 23614

Visualiseringen bruger følgende tilknytning af datavisninger:

{
    "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"
                                }
                            }
                        ]
                    }
                }
            }
        }
    ]
}

I det foregående eksempel Manufacturer er columns og Type er rows. En serie oprettes ved at gruppere værdier efter rows (Type).

Visualiseringen skal kunne opdele data efter Manufacturer eller Type.

Hvis en bruger f.eks. vælger Chrysler efter Manufacturer, skal andre visualiseringer vise følgende data:

Producent Skriv Værdi
Chrysler Privat bil 28883
Chrysler Indenlandsk lastbil 117131
Chrysler Importér bil 0
Chrysler Importér lastbil 6362

Når brugeren vælger Import Car efter Type (vælger data efter serie), skal de andre visualiseringer vise følgende data:

Producent Skriv Værdi
Chrysler Importér bil 0
Ford Importér bil 0
GM Importér bil 197
Honda Importér bil 2932
Nissan Importér bil 5485
Toyota Importér bil 20799

Skærmbillede, der viser visualiseringen med valg.

Hvis du vil have vist udsnitsdata, skal du udfylde visualiseringens datakurve på følgende måde:

Skærmbillede, der viser visualiseringens datakurve.

I det foregående eksempel Manufacturer er kategorien (kolonner), Type er serie (rækker) og Sales er Values til serier.

Bemærk

Values er påkrævet for at vise en serie, fordi grupperes efter data i henhold til tilknytningen Values af Rows datavisning.

Opret valg for kategorier

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

I den foregående eksempelkode gentager vi alle kategorier. I hver gentagelse kalder createSelectionIdBuilder vi for at oprette det næste valg for hver kategori ved at kalde withCategory metoden for valggeneratoren. Metoden createSelectionId bruges som en endelig metode til at returnere det genererede selection objekt.

I metoden withCategory overfører vi kolonnen for categoryi eksemplet, dens Manufacturerog indekset for kategorielementet.

Opret markeringer for serier

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

Opret valg til tilknytning af tabeldatavisning

I følgende eksempel vises tilknytning af tabeldatavisninger:

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

Hvis du vil oprette en markering for hver række i tilknytningen af tabeldatavisninger, skal du kalde withTable metoden for valggenerator.

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

Visualkoden gentager rækkerne i tabellen, og hver række kalder tabelmetoden withTable . Parametrene withTable for metoden er table objektet og indekset for tabelrækken.

Opret valg til tilknytning af matrixdatavisning

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

I eksemplet nodeWalker kalder rekursivt hver node og den underordnede node.

nodeWalker opretter et nodeSelection objekt ved hvert opkald. Hver nodeSelection repræsenterer en selection af de tilsvarende noder.

Vælg datapunkter for at opdele andre visualiseringer

I dette eksempel har vi oprettet en klikhandler for knapelementer. Handleren kalder select metoden for valgstyringen og overfører markeringsobjektet.

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

Grænsefladen for select metoden:

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

Metoden select kan acceptere en matrix af valg. Dette gør det muligt for visualiseringen at markere flere datapunkter på én gang. Den anden parameter, , multiSelecter ansvarlig for flere valg. Hvis multiSelect er true, rydder Power BI ikke den forrige markeringstilstand, når den aktuelle markering anvendes. Hvis værdien er false, overskrives den forrige markering.

Et typisk eksempel på brug multiSelect er håndtering af ctrlknaptilstanden for en klikhændelse. Når ctrlknappen holdes nede, kan du markere mere end ét objekt.

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

Relateret indhold

Håndter markeringer ved skift af bogmærker

Tilføj en genvejsmenu for visualiseringsdatapunkter