Menambahkan interaktivitas ke visual menggunakan pilihan visual Power BI

Power BI menyediakan dua cara untuk berinteraksi dengan visual - memilih dan memfilter. Contoh berikut menunjukkan cara memilih item dari satu visual dan memberi tahu visual lain dalam laporan tentang status pilihan baru.

Antarmuka sesuai dengan Selection objek:

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

Menggunakan manajer pemilihan untuk memilih titik data

Objek host visual menyediakan metode untuk membuat instans manajer pemilihan. Manajer pilihan memiliki metode yang sesuai untuk setiap tindakan berikut:

Pilih
Menghapus pilihan
Menampilkan menu konteks
Menyimpan pilihan saat ini
Memeriksa status pilihan

Membuat instans manajer pemilihan

Untuk menggunakan pengelola pilihan, buat instans manajer pilihan. Biasanya, visual membuat instans manajer pilihan di bagian constructor objek visual.

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

Membuat instans penyusun pilihan

Saat instans manajer pemilihan dibuat, Anda perlu membuat selections untuk setiap titik data visual. Metode createSelectionIdBuilder objek host visual menghasilkan pilihan untuk setiap titik data. Metode ini mengembalikan instans objek dengan antarmuka 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;
}

Objek ini memiliki metode yang sesuai untuk membuat selections untuk berbagai jenis pemetaan tampilan data.

Catatan

Metode withTable dan withMatrixNode diperkenalkan pada API 2.5.0 dari visual Power BI. Jika Anda perlu menggunakan pilihan untuk pemetaan tampilan data tabel atau matriks, perbarui ke API versi 2.5.0 atau yang lebih tinggi.

Membuat pilihan untuk pemetaan tampilan data kategoris

Mari kita tinjau bagaimana pilihan mewakili pemetaan tampilan data kategoris untuk contoh model semantik:

Produsen	Tipe	Nilai
Chrysler	Mobil Domestik	28883
Chrysler	Truk Domestik	117131
Chrysler	Mobil Impor	0
Chrysler	Truk Impor	6362
Ford	Mobil Domestik	50032
Ford	Truk Domestik	122446
Ford	Mobil Impor	0
Ford	Truk Impor	0
GM	Mobil Domestik	65426
GM	Truk Domestik	138122
GM	Mobil Impor	197
GM	Truk Impor	0
Honda	Mobil Domestik	51450
Honda	Truk Domestik	46115
Honda	Mobil Impor	2932
Honda	Truk Impor	0
Nissan	Mobil Domestik	51476
Nissan	Truk Domestik	47343
Nissan	Mobil Impor	5485
Nissan	Truk Impor	1430
Toyota	Mobil Domestik	55643
Toyota	Truk Domestik	61227
Toyota	Mobil Impor	20799
Toyota	Truk Impor	23614

Visual menggunakan pemetaan tampilan data berikut:

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

Dalam contoh sebelumnya, Manufacturer adalah columns dan Type adalah rows. Seri dibuat dengan mengelompokkan nilai menurut rows (Type).

Visual harus dapat menggoreng data dengan Manufacturer atau Type.

Misalnya, jika pengguna memilih Chrysler menurut Manufacturer, visual lain harus menampilkan data berikut:

Produsen	Tipe	Nilai
Chrysler	Mobil Domestik	28883
Chrysler	Truk Domestik	117131
Chrysler	Mobil Impor	0
Chrysler	Truk Impor	6362

Saat pengguna memilih Import Car berdasarkan Type (memilih data menurut seri), visual lain harus menampilkan data berikut:

Produsen	Tipe	Nilai
Chrysler	Mobil Impor	0
Ford	Mobil Impor	0
GM	Mobil Impor	197
Honda	Mobil Impor	2932
Nissan	Mobil Impor	5485
Toyota	Mobil Impor	20799

Cuplikan layar yang memperlihatkan visual dengan pilihan.

Untuk menampilkan data irisan, isi keranjang data visual sebagai berikut:

Cuplikan layar yang memperlihatkan keramaian data visual.

Dalam contoh sebelumnya, Manufacturer adalah kategori (kolom), Type adalah seri (baris), dan Sales untuk Values seri.

Catatan

Values diperlukan untuk menampilkan seri karena, menurut pemetaan tampilan data, Values dikelompokkan menurut Rows data.

Membuat pilihan untuk kategori

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

Dalam kode sampel sebelumnya, kita melakukan iterasi melalui semua kategori. Dalam setiap perulangan, kami memanggil createSelectionIdBuilder untuk membuat pilihan berikutnya untuk setiap kategori dengan memanggil withCategory metode penyusun pilihan. Metode createSelectionId ini digunakan sebagai metode akhir untuk mengembalikan objek yang dihasilkan selection .

withCategory Dalam metode , kami meneruskan kolom category, dalam sampel, Manufacturer, dan indeks elemen kategori.

Membuat pilihan untuk seri

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

Membuat pilihan untuk pemetaan tampilan data tabel

Contoh berikut menunjukkan pemetaan tampilan data tabel:

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

Untuk membuat pilihan untuk setiap baris pemetaan tampilan data tabel, panggil withTable metode penyusun pilihan.

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

Kode visual melakukan iterasi baris tabel dan setiap baris memanggil withTable metode tabel. withTable Parameter metode adalah table objek dan indeks baris tabel.

Buat pilihan untuk pemetaan tampilan data matriks

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

Dalam sampel, nodeWalker secara rekursif memanggil setiap node dan node turunan.

nodeWalker membuat objek nodeSelection pada setiap panggilan. Setiap nodeSelection mewakili selection node yang sesuai.

Pilih titik data untuk menggorok visual lain

Dalam contoh ini, kita membuat handler klik untuk elemen tombol. Handler memanggil metode select dari manajer pemilihan dan meneruskan objek pemilihan.

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

Antarmuka select metode :

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

Metode select ini dapat menerima array pilihan. Ini memungkinkan visual Anda memilih beberapa titik data sekaligus. Parameter kedua, multiSelect, bertanggung jawab atas multi-pilihan. Jika multiSelect benar, Power BI tidak menghapus status pilihan sebelumnya saat menerapkan pilihan saat ini. Jika nilai salah, pilihan sebelumnya akan ditimpa.

Contoh umum penggunaan multiSelect adalah menangani status tombol Ctrl pada peristiwa klik. Saat tombol Ctrl ditahan, Anda dapat memilih lebih dari satu objek.

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

Menangani pilihan saat peralihan bookmark

Menambahkan menu konteks untuk titik data visual

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2025-12-15