Βοηθητικά προγράμματα αλληλεπίδρασης με απεικονίσεις Power BI

Άρθρο
03/23/2023

Τα βοηθητικά προγράμματα αλληλεπίδρασης (InteractivityUtils) είναι ένα σύνολο συναρτήσεων και κλάσεων που μπορούν να χρησιμοποιηθούν για την απλοποίηση της υλοποίησης διασταυρούμενης επιλογής και διασταυρούμενου φιλτραρίσματος.

Σημείωμα

Οι τελευταίες ενημερώσεις των βοηθητικών προγραμμάτων αλληλεπίδρασης υποστηρίζουν μόνο την τελευταία έκδοση εργαλείων (3.x.x και νεότερες).

Εγκατάσταση

Για να εγκαταστήσετε το πακέτο, εκτελέστε την ακόλουθη εντολή στον κατάλογο με το τρέχον έργο απεικόνισης Power BI.
```
npm install powerbi-visuals-utils-interactivityutils --save
```
Εάν χρησιμοποιείτε την έκδοση 3.0 ή νεότερη του εργαλείου, εγκαταστήστε powerbi-models το για να επιλύσετε τις εξαρτήσεις.
```
npm install powerbi-models --save
```
Για να χρησιμοποιήσετε βοηθητικά προγράμματα αλληλεπίδρασης, εισαγάγετε το απαιτούμενο στοιχείο στην πηγαίο κώδικα της απεικόνισης Power BI.
```
import { interactivitySelectionService } from "powerbi-visuals-utils-interactivityutils";
```

Συμπερίληψη αρχείων CSS

Για να χρησιμοποιήσετε το πακέτο με την απεικόνισή σας Power BI, εισαγάγετε το ακόλουθο αρχείο CSS στο αρχείο σας .less .

node_modules/powerbi-visuals-utils-interactivityutils/lib/index.css

Εισαγάγετε το αρχείο CSS ως .less αρχείο, επειδή το εργαλείο απεικονίσεων Power BI ενσωματώνει εξωτερικούς κανόνες CSS.

@import (less) "node_modules/powerbi-visuals-utils-interactivityutils/lib/index.css";

Ιδιότητες SelectableDataPoint

Συνήθως, τα σημεία δεδομένων περιέχουν επιλογές και τιμές. Η διασύνδεση επεκτείνει τη SelectableDataPoint διασύνδεση .

SelectableDataPoint Το περιέχει ήδη ιδιότητες ως εξής:

  /** Flag for identifying that a data point was selected */
  selected: boolean;

  /** Identity for identifying the selectable data point for selection purposes */
  identity: powerbi.extensibility.ISelectionId;

  /*
   * A specific identity for when data points exist at a finer granularity than
   * selection is performed.  For example, if your data points select based
   * only on series, even if they exist as category/series intersections.
   */

  specificIdentity?: powerbi.extensibility.ISelectionId;

Ορισμός διασύνδεσης για σημεία δεδομένων

Δημιουργήστε μια παρουσία των βοηθητικών προγραμμάτων αλληλεπίδρασης και αποθηκεύστε το αντικείμενο ως ιδιότητα της απεικόνισης.

export class Visual implements IVisual {
  // ...
  private interactivity: interactivityBaseService.IInteractivityService<VisualDataPoint>;
  // ...
  constructor(options: VisualConstructorOptions) {
      // ...
      this.interactivity = interactivitySelectionService.createInteractivitySelectionService(this.host);
      // ...
  }
}

import { interactivitySelectionService } from "powerbi-visuals-utils-interactivityutils";

export interface VisualDataPoint extends interactivitySelectionService.SelectableDataPoint {
    value: powerbi.PrimitiveValue;
}

Επεκτείνετε την κλάση βασικής συμπεριφοράς.

Σημείωμα

BaseBehavior Παρουσιάστηκε στην έκδοση 5.6.x των βοηθητικών προγραμμάτων αλληλεπίδρασης. Εάν χρησιμοποιείτε παλαιότερη έκδοση, δημιουργήστε μια κλάση συμπεριφοράς από το ακόλουθο δείγμα.

Καθορίστε τη διασύνδεση για τις επιλογές κλάσης συμπεριφοράς.

import { SelectableDataPoint } from "./interactivitySelectionService";

import {
    IBehaviorOptions,
    BaseDataPoint
} from "./interactivityBaseService";

export interface BaseBehaviorOptions<SelectableDataPointType extends BaseDataPoint> extends IBehaviorOptions<SelectableDataPointType> {

/** d3 selection object of the main elements on the chart */
elementsSelection: Selection<any, SelectableDataPoint, any, any>;

/** d3 selection object of some elements on backgroup, to hadle click of reset selection */
clearCatcherSelection: d3.Selection<any, any, any, any>;
}

Καθορίστε μια κλάση για visual behavior. Εναλλακτικά, επεκτείνετε την BaseBehavior κλάση .

Ορισμός κλάσης για visual behavior

Η κλάση είναι υπεύθυνη για click τα συμβάντα ποντικιού και contextmenu .

Όταν ένας χρήστης κάνει κλικ σε στοιχεία δεδομένων, η απεικόνιση καλεί τον χειρισμό επιλογών για να επιλέξει σημεία δεδομένων. Εάν ο χρήστης κάνει κλικ στο στοιχείο παρασκηνίου της απεικόνισης, καλεί τον χειρισμό απαλοιφής επιλογής.

Η κλάση έχει τις ακόλουθες αντίστοιχες μεθόδους:

bindClick
bindClearCatcher
bindContextMenu.

export class Behavior<SelectableDataPointType extends BaseDataPoint> implements IInteractiveBehavior {

    /** d3 selection object of main elements in the chart */
    protected options: BaseBehaviorOptions<SelectableDataPointType>;
    protected selectionHandler: ISelectionHandler;

    protected bindClick() {
      // ...
    }

    protected bindClearCatcher() {
      // ...
    }

    protected bindContextMenu() {
      // ...
    }

    public bindEvents(
        options: BaseBehaviorOptions<SelectableDataPointType>,
        selectionHandler: ISelectionHandler): void {
      // ...
    }

    public renderSelection(hasSelection: boolean): void {
      // ...
    }
}

Επέκταση της BaseBehavior κλάσης

import powerbi from "powerbi-visuals-api";
import { interactivitySelectionService, baseBehavior } from "powerbi-visuals-utils-interactivityutils";

export interface VisualDataPoint extends interactivitySelectionService.SelectableDataPoint {
    value: powerbi.PrimitiveValue;
}

export class Behavior extends baseBehavior.BaseBehavior<VisualDataPoint> {
  // ...
}

Για να χειριστείτε ένα κλικ σε στοιχεία, καλέστε τη μέθοδο αντικειμένου on επιλογής d3. Αυτό ισχύει επίσης για elementsSelection τα και clearCatcherSelection.

protected bindClick() {
  const {
      elementsSelection
  } = this.options;

  elementsSelection.on("click", (datum) => {
      const mouseEvent: MouseEvent = getEvent() as MouseEvent || window.event as MouseEvent;
      mouseEvent && this.selectionHandler.handleSelection(
          datum,
          mouseEvent.ctrlKey);
  });
}

Προσθέστε παρόμοιο χειρισμό για το contextmenu συμβάν, για να καλέσετε τη μέθοδο της showContextMenu διαχείρισης επιλογών.

protected bindContextMenu() {
    const {
        elementsSelection
    } = this.options;

    elementsSelection.on("contextmenu", (datum) => {
        const event: MouseEvent = (getEvent() as MouseEvent) || window.event as MouseEvent;
        if (event) {
            this.selectionHandler.handleContextMenu(
                datum,
                {
                    x: event.clientX,
                    y: event.clientY
                });
            event.preventDefault();
        }
    });
}

Για να αντιστοιχίσουν συναρτήσεις σε χειρισμούς, τα βοηθητικά προγράμματα αλληλεπίδρασης καλούν τη bindEvents μέθοδο . Προσθέστε τις ακόλουθες κλήσεις στη bindEvents μέθοδο :
- bindClick
- bindClearCatcher
- bindContextMenu
```
  public bindEvents(
      options: BaseBehaviorOptions<SelectableDataPointType>,
      selectionHandler: ISelectionHandler): void {

      this.options = options;
      this.selectionHandler = selectionHandler;

      this.bindClick();
      this.bindClearCatcher();
      this.bindContextMenu();
  }
```
Η renderSelection μέθοδος είναι υπεύθυνη για την ενημέρωση της κατάστασης απεικόνισης των στοιχείων στο γράφημα. Ένα δείγμα υλοποίησης των renderSelection παρακάτω.
```
public renderSelection(hasSelection: boolean): void {
    this.options.elementsSelection.style("opacity", (category: any) => {
        if (category.selected) {
            return 0.5;
        } else {
            return 1;
        }
    });
}
```
Το τελευταίο βήμα είναι η δημιουργία μιας παρουσίας του και η bind κλήση της visual behaviorμεθόδου της παρουσίας βοηθητικών προγραμμάτων αλληλεπίδρασης.
```
this.interactivity.bind(<BaseBehaviorOptions<VisualDataPoint>>{
    behavior: this.behavior,
    dataPoints: this.categories,
    clearCatcherSelection: select(this.target),
    elementsSelection: selectionMerge
});
```
- selectionMerge Το είναι το αντικείμενο επιλογής d3 , το οποίο αντιπροσωπεύει όλα τα επιλεγτέα στοιχεία της απεικόνισης.
- select(this.target) Το είναι το αντικείμενο επιλογής d3 , το οποίο αντιπροσωπεύει τα κύρια στοιχεία DOM της απεικόνισης.
- this.categories Τα είναι σημεία δεδομένων με στοιχεία, όπου η διασύνδεση είναι VisualDataPoint ή categories: VisualDataPoint[];.
- this.behavior Το είναι μια νέα παρουσία του visual behavior που δημιουργήθηκε στην κατασκευή της απεικόνισης, όπως φαίνεται:
```
export class Visual implements IVisual {
  // ...
  constructor(options: VisualConstructorOptions) {
      // ...
      this.behavior = new Behavior();
  }
  // ...
}
```

Βοηθητικά προγράμματα αλληλεπίδρασης με απεικονίσεις Power BI

Εγκατάσταση

Συμπερίληψη αρχείων CSS

Ιδιότητες SelectableDataPoint

Ορισμός διασύνδεσης για σημεία δεδομένων

Σχόλια

Σχόλια

Πρόσθετοι πόροι

Βοηθητικά προγράμματα αλληλεπίδρασης με απεικονίσεις Power BI

Εγκατάσταση

Συμπερίληψη αρχείων CSS

Ιδιότητες SelectableDataPoint

Ορισμός διασύνδεσης για σημεία δεδομένων

Σχετικό περιεχόμενο

Σχόλια

Σχόλια

Πρόσθετοι πόροι