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

• 06/18/2019
• 5 λεπτά για ανάγνωση
• • K
  • o

Το 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.

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

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

Επίσης, οι απεικονίσεις χρησιμοποιούν την ακόλουθη αντιστοίχιση προβολής δεδομένων: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:

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

Απαιτείται να συμπληρώσετε τα καλάθια δεδομένων απεικονίσεων.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.

Δημιουργία επιλογών για κατηγορίες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

• Διαβάστε πώς να χρησιμοποιήσετε επιλογές για σύνδεση ιδιοτήτων απεικονίσεων σε σημεία δεδομένωνRead how to use selections for binding visual properties to data points

• Διαβάστε πώς να χειριστείτε επιλογές στην εναλλαγή σελιδοδεικτώνRead how to handle selections on bookmarks switching

• Διαβάστε πώς να προσθέσετε μενού περιβάλλοντος για σημεία δεδομένων απεικονίσεωνRead how to add context menu for visuals data points

• Διαβάστε πώς να χρησιμοποιήσετε βοηθητικά προγράμματα αλληλεπίδρασης για να προσθέσετε επιλογές στις Απεικονίσεις Power BIRead how to use InteractivityUtils to add selections into Power BI Visuals