Share via

Interactiviteit toevoegen aan visuals door selecties van Power BI-visuals

Power BI biedt twee manieren om te communiceren met visuals: selecteren en filteren. In het volgende voorbeeld ziet u hoe u een item in de ene visual selecteert en de andere visuals in het rapport informeert over de nieuwe selectiestatus.

De interface komt overeen met een Selection object:

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

Selectiebeheer gebruiken om gegevenspunten te selecteren

Het hostobject van de visual biedt een methode voor het maken van een exemplaar van selectiebeheer. De selectiebeheerder heeft een bijbehorende methode voor elk van de volgende acties:

  • Select
  • De selectie wissen
  • Het contextmenu weergeven
  • De huidige selecties opslaan
  • De selectiestatus controleren

Een exemplaar van selectiebeheer maken

Als u selectiebeheer wilt gebruiken, maakt u het exemplaar van een selectiebeheerder. Meestal maken visuals een selectiebeheerexemplaren in de constructor sectie van het visualobject.

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

Een exemplaar van de opbouwfunctie voor selecties maken

Wanneer het exemplaar van selectiebeheer wordt gemaakt, moet u voor elk gegevenspunt van de visual maken selections . De methode van createSelectionIdBuilder het visualhostobject genereert een selectie voor elk gegevenspunt. Deze methode retourneert een exemplaar van het object met interface 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;
}

Dit object heeft bijbehorende methoden voor het maken selections van verschillende typen toewijzingen van gegevensweergaven.

Notitie

De methoden withTable en withMatrixNode zijn geïntroduceerd in API 2.5.0 van de Power BI-visuals. Als u selecties wilt gebruiken voor toewijzingen van tabel- of matrixgegevensweergaven, werkt u bij naar API-versie 2.5.0 of hoger.

Selecties maken voor categorische toewijzing van gegevensweergaven

Laten we eens kijken hoe selecties categorische toewijzing van gegevensweergaven voor een semantisch voorbeeldmodel vertegenwoordigen:

Fabrikant Type Weergegeven als
Chrysler Binnenlandse auto 28883
Chrysler Binnenlandse vrachtwagen 117131
Chrysler Auto importeren 0
Chrysler Vrachtwagen importeren 6362
Ford Binnenlandse auto 50032
Ford Binnenlandse vrachtwagen 122446
Ford Auto importeren 0
Ford Vrachtwagen importeren 0
GM Binnenlandse auto 65426
GM Binnenlandse vrachtwagen 138122
GM Auto importeren 197
GM Vrachtwagen importeren 0
Honda Binnenlandse auto 51450
Honda Binnenlandse vrachtwagen 46115
Honda Auto importeren 2932
Honda Vrachtwagen importeren 0
Nissan Binnenlandse auto 51476
Nissan Binnenlandse vrachtwagen 47343
Nissan Auto importeren 5485
Nissan Vrachtwagen importeren 1430
Toyota Binnenlandse auto 55643
Toyota Binnenlandse vrachtwagen 61227
Toyota Auto importeren 20799
Toyota Vrachtwagen importeren 23614

De visual maakt gebruik van de volgende toewijzing van gegevensweergaven:

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

In het voorgaande voorbeeld Manufacturer is columns en Type is rowshet . Een reeks wordt gemaakt door waarden rows te groeperen op (Type).

De visual moet gegevens kunnen segmenteren op Manufacturer of Type.

Als een gebruiker bijvoorbeeld selecteert Chrysler op Manufacturer, moeten in andere visuals de volgende gegevens worden weergegeven:

Fabrikant Type Weergegeven als
Chrysler Binnenlandse auto 28883
Chrysler Binnenlandse vrachtwagen 117131
Chrysler Auto importeren 0
Chrysler Vrachtwagen importeren 6362

Wanneer de gebruiker selecteert Import Car Type op (gegevens selecteert op reeks), moeten de andere visuals de volgende gegevens weergeven:

Fabrikant Type Weergegeven als
Chrysler Auto importeren 0
Ford Auto importeren 0
GM Auto importeren 197
Honda Auto importeren 2932
Nissan Auto importeren 5485
Toyota Auto importeren 20799

Schermopname van de visual met selecties.

Als u gesegmenteerde gegevens wilt weergeven, vult u de gegevensmandjes van de visual als volgt in:

Schermopname van de gegevensmandjes van de visual.

In het voorgaande voorbeeld Manufacturer is categorie (kolommen), Type reeks (rijen) en Sales is dit Values voor reeksen.

Notitie

Values zijn vereist voor het weergeven van een reeks, omdat, volgens de toewijzing van de gegevensweergave, Values worden gegroepeerd op Rows gegevens.

Selecties maken voor categorieën

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

In de voorgaande voorbeeldcode doorlopen we alle categorieën. In elke iteratie wordt aangeroepen createSelectionIdBuilder om de volgende selectie voor elke categorie te maken door de withCategory methode van de opbouwfunctie voor selecties aan te roepen. De createSelectionId methode wordt gebruikt als laatste methode om het gegenereerde selection object te retourneren.

In de withCategory methode geven we de kolom categoryvan , in het voorbeeld, de bijbehorende Manufactureren de index van het categorie-element door.

Selecties maken voor reeksen

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

Selecties maken voor toewijzing van tabelgegevensweergaven

In het volgende voorbeeld ziet u de toewijzing van tabelgegevensweergaven:

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

Als u een selectie wilt maken voor elke rij met toewijzing van tabelgegevensweergaven, roept u de withTable methode van de opbouwfunctie voor selecties aan.

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

De visualcode herhaalt de rijen van de tabel en elke rij roept de withTable tabelmethode aan. Parameters van de withTable methode zijn het table object en de index van de tabelrij.

Selecties maken voor toewijzing van matrixgegevensweergaven

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

In het voorbeeld nodeWalker roept u recursief elk knooppunt en onderliggend knooppunt aan.

nodeWalker maakt een nodeSelection object voor elke aanroep. Elk nodeSelection vertegenwoordigt een selection van de bijbehorende knooppunten.

Gegevenspunten selecteren om andere visuals te segmenteren

In dit voorbeeld hebben we een klikhandler voor knopelementen gemaakt. De handler roept de select methode van selectiebeheer aan en geeft het selectieobject door.

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

De interface van de select methode:

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

De select methode kan een matrix met selecties accepteren. Hierdoor kan uw visual meerdere gegevenspunten tegelijk selecteren. De tweede parameter, multiSelectis verantwoordelijk voor meervoudige selecties. Als multiSelect dit waar is, wist Power BI de vorige selectiestatus niet wanneer de huidige selectie wordt toegepast. Als de waarde onwaar is, wordt de vorige selectie overschreven.

Een typisch voorbeeld van het gebruik multiSelect is het verwerken van de ctrl-knopstatus bij een klik-gebeurtenis. Wanneer de Ctrl-knop ingedrukt wordt gehouden, kunt u meer dan één object selecteren.

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

Gerelateerde inhoud

Selecties afhandelen bij het schakelen tussen bladwijzers

Een contextmenu voor gegevenspunten voor visuals toevoegen

  • Last updated on