Προσθήκη αλληλεπίδρασης σε απεικόνιση με επιλογές απεικονίσεων Power BIAdd interactivity into visual by Power BI visuals selections

Το Power BI παρέχει δύο τρόπους αλληλεπίδρασης μεταξύ απεικονίσεων - επιλογή και φιλτράρισμα.Power BI provides two ways of interaction between visuals - selection and filtering. Το παρακάτω δείγμα επιδεικνύει τον τρόπο επιλογής στοιχείων σε μία απεικόνιση και ειδοποίησης άλλων απεικονίσεων στην αναφορά σχετικά με τη νέα κατάσταση επιλογής.The sample below demonstrates how to select any items in one visual and notify other visuals in the report about new selection state.

Το αντικείμενο Selection αντιστοιχεί στη διασύνδεση:Selection object corresponds to the interface:

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

Τρόπος χρήσης της Διαχείρισης επιλογών για την επιλογή σημείων δεδομένωνHow to use SelectionManager to select data points

Το αντικείμενο κεντρικού υπολογιστή απεικόνισης παρέχει τη μέθοδο για τη δημιουργία μιας παρουσίας της διαχείρισης επιλογών.The visual host object provides the method for creating an instance of selection manager. Η διαχείριση επιλογών που είναι υπεύθυνη για την επιλογή, απαλοιφή επιλογής, εμφάνιση μενού περιβάλλοντος, αποθήκευση τρεχουσών επιλογών και έλεγχο κατάσταση επιλογής.The selection manager responsible to select, to clear selection, to show the context menu, to store current selections and check selection state. Ενώ η διαχείριση επιλογών διαθέτει αντίστοιχες μεθόδους για αυτές τις ενέργειες.And the selection manager has corresponded methods for those actions.

Δημιουργία μιας παρουσίας της διαχείρισης επιλογώνCreate an instance of the selection manager

Για τη χρήση της διαχείρισης επιλογών, χρειάζεται να δημιουργήσετε την παρουσία μιας διαχείρισης επιλογών.For using the selection manager, you need to create the instance of a selection manager. Συνήθως, οι απεικονίσεις δημιουργούν μια παρουσία διαχείρισης επιλογών στο constructor του αντικειμένου απεικόνισης.Usually, visuals create a selection manager instance in the constructor of the visual object.

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

Δημιουργία μιας παρουσίας της δημιουργίας επιλογώνCreate an instance of the selection builder

Κατά τη δημιουργία της παρουσίας της διαχείρισης επιλογών, χρειάζεται να δημιουργήσετε selections για κάθε σημείο δεδομένων της απεικόνισης.When the selection manager instance is created, you need to create selections for each data point of the visual. Το αντικείμενο κεντρικού υπολογιστή απεικόνισης παρέχει τη μέθοδο createSelectionIdBuilder για τη δημιουργία επιλογής για κάθε σημείο δεδομένων.The visual host object provides createSelectionIdBuilder method to generate selection for each data point. Αυτή η μέθοδος επιστρέφει την παρουσία του αντικειμένου με διασύνδεση powerbi.visuals.ISelectionIdBuilder:This method return instance of the object with 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;
}

Αυτό το αντικείμενο έχει αντίστοιχες μεθόδους για τη δημιουργία selections για διαφορετικούς τύπους αντιστοιχίσεων προβολής δεδομένων.This object has corresponded methods to create selections for different types of data view mappings.

Σημείωση

Οι μέθοδοι withTable και withMatrixNode παρουσιάστηκαν στο API 2.5.0 των απεικονίσεων Power BI.The methods withTable and withMatrixNode were introduced on API 2.5.0 of the Power BI visuals. Εάν χρειάζεται να χρησιμοποιήσετε επιλογές για αντιστοιχίσεις προβολής δεδομένων πίνακα ή μήτρας, χρειάζεται να ενημερώσετε την έκδοση API σε 2.5.0 ή νεότερη.If you need to use selections for table or matrix data view mappings you need to update API version to 2.5.0 or higher.

Δημιουργία επιλογών για αντιστοίχιση προβολής κατηγορικών δεδομένωνCreate selections for categorical data view mapping

Ας εξετάσουμε τον τρόπο με τον οποίο οι επιλογές αντιπροσωπεύονται στην αντιστοίχιση προβολής κατηγορικών δεδομένων για δείγμα συνόλου δεδομένων:Let's review how selections represent on categorical data view mapping for sample dataset:

ΚατασκευαστήςManufacturer ΤύποςType ΤιμήValue
ChryslerChrysler Εγχώριο αυτοκίνητοDomestic Car 2888328883
ChryslerChrysler Εγχώριο φορτηγόDomestic Truck 117131117131
ChryslerChrysler Αυτοκίνητο εισαγωγήςImport Car 00
ChryslerChrysler Φορτηγό εισαγωγήςImport Truck 63626362
FordFord Εγχώριο αυτοκίνητοDomestic Car 5003250032
FordFord Εγχώριο φορτηγόDomestic Truck 122446122446
FordFord Αυτοκίνητο εισαγωγήςImport Car 00
FordFord Φορτηγό εισαγωγήςImport Truck 00
GMGM Εγχώριο αυτοκίνητοDomestic Car 6542665426
GMGM Εγχώριο φορτηγόDomestic Truck 138122138122
GMGM Αυτοκίνητο εισαγωγήςImport Car 197197
GMGM Φορτηγό εισαγωγήςImport Truck 00
HondaHonda Εγχώριο αυτοκίνητοDomestic Car 5145051450
HondaHonda Εγχώριο φορτηγόDomestic Truck 4611546115
HondaHonda Αυτοκίνητο εισαγωγήςImport Car 29322932
HondaHonda Φορτηγό εισαγωγήςImport Truck 00
NissanNissan Εγχώριο αυτοκίνητοDomestic Car 5147651476
NissanNissan Εγχώριο φορτηγόDomestic Truck 4734347343
NissanNissan Αυτοκίνητο εισαγωγήςImport Car 54855485
NissanNissan Φορτηγό εισαγωγήςImport Truck 14301430
ToyotaToyota Εγχώριο αυτοκίνητοDomestic Car 5564355643
ToyotaToyota Εγχώριο φορτηγόDomestic Truck 6122761227
ToyotaToyota Αυτοκίνητο εισαγωγήςImport Car 2079920799
ToyotaToyota Φορτηγό εισαγωγήςImport Truck 2361423614

Επίσης, οι απεικονίσεις χρησιμοποιούν την ακόλουθη αντιστοίχιση προβολής δεδομένων:And the visual uses the following data view mapping:

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

Στο δείγμα, Manufacturer είναι columns και Type είναι rows.In the sample, Manufacturer is columns and Type is rows. Υπάρχουν σειρές που δημιουργήθηκαν από τιμές ομαδοποιήσεων κατά rows (Type).There's series created by groupings values by rows (Type).

Ενώ η απεικόνιση θα πρέπει επίσης να μπορεί να αναλύσει δεδομένα κατά Manufacturer και Type.And visual should able to slice data by Manufacturer and Type too.

Για παράδειγμα, όταν ο χρήστης επιλέξει Chrysler κατά Manufacturer, άλλες απεικονίσεις θα πρέπει να εμφανίζουν τα εξής δεδομένα:For example, when user selects Chrysler by Manufacturer, other visuals should show following data:

ΚατασκευαστήςManufacturer ΤύποςType ΤιμήValue
ChryslerChrysler Εγχώριο αυτοκίνητοDomestic Car 2888328883
ChryslerChrysler Εγχώριο φορτηγόDomestic Truck 117131117131
ChryslerChrysler Αυτοκίνητο εισαγωγήςImport Car 00
ChryslerChrysler Φορτηγό εισαγωγήςImport Truck 63626362

Όταν ο χρήστης επιλέξει Import Car κατά Type (επιλέγει δεδομένα κατά σειρά), άλλες απεικονίσεις θα πρέπει να εμφανίζουν τα εξής δεδομένα:When user selects Import Car by Type (selects data by series), other visuals should show following data:

ΚατασκευαστήςManufacturer ΤύποςType ΤιμήValue
ChryslerChrysler Αυτοκίνητο εισαγωγήςImport Car 00
FordFord Αυτοκίνητο εισαγωγήςImport Car 00
GMGM Αυτοκίνητο εισαγωγήςImport Car 197197
HondaHonda Αυτοκίνητο εισαγωγήςImport Car 29322932
NissanNissan Αυτοκίνητο εισαγωγήςImport Car 54855485
ToyotaToyota Αυτοκίνητο εισαγωγήςImport Car 2079920799

Η απεικόνιση με επιλογές για κατηγορίες και σειρές

Απαιτείται να συμπληρώσετε τα καλάθια δεδομένων απεικονίσεων.Need to fill the visual data baskets.

Καλάθια δεδομένων της απεικόνισης με επιλογές

Υπάρχουν Manufacturer ως κατηγορίες (στήλες), Type ως σειρές (γραμμές) και Value ως Values για σειρές.There are Manufacturer as category (columns), Type as series (rows) and Value as Values for series.

Σημείωση

Οι Values απαιτούνται για σειρές, καθώς σύμφωνα με την αντιστοίχιση προβολής δεδομένων η απεικόνιση αναμένει ότι οι Values θα ομαδοποιηθούν κατά δεδομένα Rows.The Values are required for series because according to data view mapping the visual expects that Values will be grouped by Rows data.

Δημιουργία επιλογών για κατηγορίεςCreate selections for categories

// 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 the sample code, you can see that we iterate all categories. Ενώ σε κάθε διαδοχική προσέγγιση καλούμε το createSelectionIdBuilder για να δημιουργήσουμε την επόμενη επιλογή για κάθε κατηγορία, καλώντας τη μέθοδο withCategory της δόμησης επιλογών.And in each iteration, we call createSelectionIdBuilder to create the next selection for each category by calling withCategory method of the selection builder. Η μέθοδος createSelectionId χρησιμοποιείται ως μια τελική μέθοδος για να επιστρέψετε το αντικείμενο selection που δημιουργήθηκε.The method createSelectionId is used as a final method to return the generated selection object.

Στη μέθοδο withCategory, διαβιβάζουμε τη στήλη category, στο δείγμα είναι Manufacturer και ευρετήριο του στοιχείου κατηγορίας.In withCategory method, we pass the column of category, in the sample, it's Manufacturer and index of category element.

Δημιουργία επιλογών για τη σειράCreate selections for series

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

Δημιουργία επιλογών για την αντιστοίχιση προβολής δεδομένων πίνακαCreate selections for table data view mapping

Δείγμα αντιστοίχισης προβολών δεδομένων πίνακαSample of table data views mapping

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

Για να δημιουργήσετε μια επιλογή για κάθε γραμμή αντιστοίχισης προβολής δεδομένων πίνακα, χρειάζεται να καλέσετε τη μέθοδο withTable της δόμησης επιλογών.To create a selection for each row of table data view mapping, you need to call withTable method of selection builder.

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

Ο κώδικας απεικόνισης επαναλαμβάνει τις γραμμές του πίνακα και κάθε γραμμή καλεί τη μέθοδο πίνακα withTable.The visual code iterates the rows of the table and each row calls withTable table method. Οι παράμετροι της μεθόδου withTable είναι αντικείμενο table και ευρετήριο της γραμμής πίνακα.Parameters of withTable method are table object and index of the table row.

Δημιουργία επιλογών για αντιστοίχιση προβολής δεδομένων μήτραςCreate selections for matrix data view mapping

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

Στο δείγμα, το nodeWalker καλεί επανειλημμένα για κάθε κόμβο και θυγατρικούς κόμβους.In the sample, nodeWalker calls recursively for each node and child nodes.

Το nodeWalker δημιουργεί ένα αντικείμενο nodeSelection σε κάθε κλήση.nodeWalker creates nodeSelection object on each call. Ενώ κάθε nodeSelection αντιπροσωπεύει το selection αντίστοιχων κόμβων.And each nodeSelection represent selection of correspond nodes.

Επιλογή σημείων δεδομένων για την ανάλυση άλλων απεικονίσεωνSelect datapoints to slice other visuals

Στο δείγμα κωδικών επιλογών για αντιστοίχιση προβολής κατηγορικών δεδομένων, είδατε ότι δημιουργήσαμε έναν χειρισμό κλικ για στοιχεία κουμπιού.In the sample, codes of selections for categorical data view mapping, you saw that we created a click handler for button elements. Ο χειρισμός καλεί τη μέθοδο select της διαχείρισης επιλογών και διαβιβάζει το αντικείμενο επιλογής.The handler calls select method of the selection manager and passes the selection object.

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

Η διασύνδεση της μεθόδου select είναιThe interface of select method is

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

Μπορείτε να δείτε ότι το select μπορεί να δέχεται έναν πίνακα επιλογών.You can see select can accept an array of selections. Αυτό σημαίνει ότι η απεικόνισή σας μπορεί να επιλέξει πολλά σημεία δεδομένων.It means your visual can select several datapoints. Η δεύτερη παράμετρος multiSelect, υπεύθυνη για πολλαπλή επιλογή.The second parameter multiSelect responsible for multi-select. Εάν η τιμή είναι "true", το Power BI δεν απαλείφει την προηγούμενη κατάσταση επιλογής και εφαρμόζει την τρέχουσα επιλογή, διαφορετικά θα γίνει επαναφορά της προηγούμενης επιλογής.If the value is true, Power BI doesn't clear the previous selection state and apply current selection otherwise previous selection will reset.

Το τυπικό σενάριο χρήσης του συμβάντος κατάστασης κλικ στο κουμπί CTRL χειρισμού multiSelect.The typical scenario of using multiSelect handling CTRL button state on click event.

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

Επόμενα βήματαNext steps