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

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:

• Kijelölés
• 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 .

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:

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 columns Type 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:

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:

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

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

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 withTable table 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