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

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

Håndter markeringer ved skift af bogmærker

Tilføj en genvejsmenu for visualiseringsdatapunkter

Feedback

Var denne side nyttig?

Last updated on 2025-12-15