Megosztás a következőn keresztül:

Interaktivitás hozzáadása a vizualizációkhoz Power BI-vizualizációk kijelölésével

  • Cikk

A Power BI kétféleképpen használhatja a vizualizációkat – a kiválasztást és a szűrést. Az alábbi példa bemutatja, hogyan jelölhet ki egy elemet az egyik vizualizációból, és hogyan értesítheti a jelentés többi vizualizációt az új kijelölési állapotról.

Az interfész egy Selection objektumnak felel meg:

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

Adatpontok kijelölése a kijelöléskezelővel

A vizualizáció gazdagép objektuma metódust biztosít a kijelöléskezelő példányának létrehozásához. A kijelöléskezelő rendelkezik egy megfelelő metódussal az alábbi műveletek mindegyikéhez:

  • Válassza ezt:
  • A kijelölés törlése
  • A helyi menü megjelenítése
  • Az aktuális kijelölések tárolása
  • A kijelölés állapotának ellenőrzése

A kijelöléskezelő példányának létrehozása

A kijelöléskezelő használatához hozza létre a kijelöléskezelő példányát. A vizualizációk általában létrehoznak egy kijelöléskezelő példányt a constructor vizualizáció objektumának szakaszában.

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

A kijelölésszerkesztő példányának létrehozása

A Kijelöléskezelő-példány létrehozásakor létre kell hoznia selections a vizualizáció egyes adatpontjaihoz. A vizualizációgazda objektum metódusa createSelectionIdBuilder kijelöli az egyes adatpontokat. Ez a metódus az objektum egy példányát adja vissza a következő felülettel 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;
}

Ez az objektum megfelelő metódusokkal rendelkezik, amelyek különböző adatnézet-leképezésekhez hozhatók létre selections .

Megjegyzés:

A Power BI-vizualizációk API 2.5.0-s verziójában bevezetett módszerek withTablewithMatrixNode . Ha táblázat- vagy mátrixadat-nézetleképezésekhez szeretne kijelöléseket használni, frissítsen az API 2.5.0-s vagy újabb verziójára.

Kijelölések létrehozása kategorikus adatnézet-leképezéshez

Tekintsük át, hogyan jelölik a kijelölések a minta szemantikai modell kategorikus adatnézet-leképezését:

Gyártó Type Érték
Chrysler Hazai autó 28883
Chrysler Belföldi teherautó 117131
Chrysler Autó importálása 0
Chrysler Teherautó importálása 6362
Ford Hazai autó 50032
Ford Belföldi teherautó 122446
Ford Autó importálása 0
Ford Teherautó importálása 0
GM Hazai autó 65426
GM Belföldi teherautó 138122
GM Autó importálása 197
GM Teherautó importálása 0
Honda Hazai autó 51450
Honda Belföldi teherautó 46115
Honda Autó importálása 2932
Honda Teherautó importálása 0
Nissan Hazai autó 51476
Nissan Belföldi teherautó 47343
Nissan Autó importálása 5485
Nissan Teherautó importálása 1430
Toyota Hazai autó 55643
Toyota Belföldi teherautó 61227
Toyota Autó importálása 20799
Toyota Teherautó importálása 23614

A vizualizáció a következő adatnézet-leképezést használja:

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

Az előző példában Manufacturer az is és columnsType az is.rows Az adatsorok az értékek rows (Type) szerinti csoportosításával jönnek létre.

A vizualizációnak képesnek kell lennie az adatok szeletelésére a vagy Typea Manufacturer .

Ha például egy felhasználó kiválasztja Chrysler , Manufacturera többi vizualizációnak a következő adatokat kell megjelenítenie:

Gyártó Type Érték
Chrysler Hazai autó 28883
Chrysler Belföldi teherautó 117131
Chrysler Autó importálása 0
Chrysler Teherautó importálása 6362

Amikor a felhasználó kiválasztja Import Car az Type adatokat (adatsorok szerint választja ki), a többi vizualizációnak a következő adatokat kell megjelenítenie:

Gyártó Type Érték
Chrysler Autó importálása 0
Ford Autó importálása 0
GM Autó importálása 197
Honda Autó importálása 2932
Nissan Autó importálása 5485
Toyota Autó importálása 20799

Screenshot that shows the visual with selections.

Szeletelt adatok megjelenítéséhez töltse ki a vizualizáció adatkosarait az alábbiak szerint:

Screenshot that shows visual's data baskets.

Az előző példában Manufacturer a kategória (oszlopok), Type az adatsorok (sorok) és Sales az Values adatsorok.

Megjegyzés:

Values adatsorok megjelenítéséhez azért van szükség, mert az adatnézet-leképezés Values szerint adatok szerint Rows vannak csoportosítva.

Kijelölések létrehozása kategóriákhoz

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

Az előző mintakódban az összes kategóriát végigvezetjük. Minden iterációban arra hívjuk createSelectionIdBuilder fel, hogy hozza létre a következő kijelölést az egyes kategóriákhoz a withCategory kijelölésszerkesztő metódusának meghívásával. A createSelectionId metódust a rendszer végső metódusként használja a létrehozott selection objektum visszaadásához.

A metódusban átadjuk withCategory a mintában, annak Manufacturerés a kategóriaelem indexének oszlopátcategory.

Kijelölések létrehozása sorozatokhoz

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

Kijelölések létrehozása táblázatadatok nézetleképezéséhez

Az alábbi példa a táblázat adatnézet-leképezését mutatja be:

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

Ha a táblázat adatnézet-leképezésének minden sorához szeretne kijelölést létrehozni, hívja meg a withTable kijelölésszerkesztő metódusát.

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

A vizualizáció kódja iterálja a tábla sorait, és minden sor meghívja a táblametódust withTable . A metódus paraméterei a withTabletable táblasor objektuma és indexe.

Kijelölések létrehozása mátrixadat-nézet leképezéséhez

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

A mintában nodeWalker rekurzív módon meghívja az egyes csomópontokat és gyermekcsomópontokat.

nodeWalker minden híváshoz létrehoz egy nodeSelection objektumot. Mindegyik nodeSelection a selection megfelelő csomópontokat jelöli.

Adatpontok kijelölése más vizualizációk szeleteléséhez

Ebben a példában egy kattintáskezelőt hoztunk létre a gombelemekhez. A kezelő meghívja a select kijelöléskezelő metódusát, és átadja a kijelölési objektumot.

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

A módszer felülete select :

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

A select metódus számos kijelölést elfogad. Ez lehetővé teszi, hogy a vizualizáció egyszerre több adatpontot is kijelöljön. A második paraméter a multiSelecttöbbszörös kijelölésért felelős. Ha multiSelect igaz, a Power BI nem törli az előző kijelölési állapotot az aktuális kijelölés alkalmazásakor. Ha az érték hamis, a program felülírja az előző kijelölést.

A használat multiSelect tipikus példája a Ctrl gomb állapotának kezelése egy kattintásos eseményen. Ha a Ctrl gombot lenyomva tartja, több objektumot is kijelölhet.

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

Kapcsolódó tartalom

Kijelölés kezelése a könyvjelzők közötti váltáskor

Helyi menü hozzáadása vizualizációk adatpontjaihoz

Kijelölés hozzáadása a Power BI-vizualizációkhoz