Utilità di interattività degli oggetti visivi di Power BI

  • Articolo

L'utilità di interattività (InteractivityUtils) è un set di funzioni e classi che possono essere usate per semplificare l'implementazione della selezione incrociata e del filtro incrociato.

Nota

Gli aggiornamenti più recenti delle utilità di interattività supportano solo la versione più recente degli strumenti (3.x.x e versioni successive).

Installazione

  1. Per installare il pacchetto, eseguire il comando seguente nella directory con il progetto visivo di Power BI corrente.

    npm install powerbi-visuals-utils-interactivityutils --save

  2. Se si usa la versione 3.0 o successiva dello strumento, installare powerbi-models per risolvere le dipendenze.

    npm install powerbi-models --save

  3. Per usare le utilità di interattività, importare il componente necessario nel codice sorgente dell'oggetto visivo di Power BI.

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

Includi file CSS

Per usare il pacchetto con l'oggetto visivo di Power BI, importare il file CSS seguente nel .less file.

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

Importare il file CSS come .less file perché lo strumento degli oggetti visivi di Power BI esegue il wrapping di regole CSS esterne.

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

Proprietà SelectableDataPoint

In genere, i punti dati contengono selezioni e valori. L'interfaccia estende l'interfaccia SelectableDataPoint .

SelectableDataPoint contiene già le proprietà come indicato di seguito:

  /** 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;

Definizione di un'interfaccia per i punti dati

  1. Creare un'istanza di utilità di interattività e salvare l'oggetto come proprietà dell'oggetto visivo.

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

  2. Estendere la classe di comportamento di base.

    Nota

    BaseBehavior è stato introdotto nella versione 5.6.x delle utilità di interattività. Se si usa una versione precedente, creare una classe di comportamento dall'esempio seguente.

  3. Definire l'interfaccia per le opzioni della classe di comportamento.

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

  4. Definire una classe per visual behavior. In alternativa, estendere la BaseBehavior classe .

    Definire una classe per visual behavior

    La classe è responsabile degli click eventi del mouse e contextmenu .

    Quando un utente fa clic sugli elementi dati, l'oggetto visivo chiama il gestore di selezione per selezionare i punti dati. Se l'utente fa clic sull'elemento di sfondo dell'oggetto visivo, chiama il gestore di selezione non crittografato.

    La classe ha i metodi corrispondenti seguenti:

    • 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 {
      // ...
    }
}

    Estendere la BaseBehavior classe

    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> {
  // ...
}

  5. Per gestire un clic sugli elementi, chiamare il metodo dell'oggetto on di selezione d3. Questo vale anche per elementsSelection e 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);
  });
}

  6. Aggiungere un gestore simile per l'evento contextmenu per chiamare il metodo del gestore di showContextMenu selezione.

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

  7. Per assegnare funzioni ai gestori, l'utilità di interattività chiama il bindEvents metodo . Aggiungere le chiamate seguenti al bindEvents metodo :

    • bindClick
    • bindClearCatcher
    • bindContextMenu
      public bindEvents(
      options: BaseBehaviorOptions<SelectableDataPointType>,
      selectionHandler: ISelectionHandler): void {

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

      this.bindClick();
      this.bindClearCatcher();
      this.bindContextMenu();
  }

  8. Il renderSelection metodo è responsabile dell'aggiornamento dello stato di visualizzazione degli elementi nel grafico. Di seguito è illustrata un'implementazione di renderSelection esempio.

    public renderSelection(hasSelection: boolean): void {
    this.options.elementsSelection.style("opacity", (category: any) => {
        if (category.selected) {
            return 0.5;
        } else {
            return 1;
        }
    });
}

  9. L'ultimo passaggio consiste nel creare un'istanza di visual behaviore chiamare il bind metodo dell'istanza dell'utilità di interattività.

    this.interactivity.bind(<BaseBehaviorOptions<VisualDataPoint>>{
    behavior: this.behavior,
    dataPoints: this.categories,
    clearCatcherSelection: select(this.target),
    elementsSelection: selectionMerge
});

    • selectionMerge è l'oggetto di selezione d3 , che rappresenta tutti gli elementi selezionabili dell'oggetto visivo.

    • select(this.target) è l'oggetto di selezione d3 , che rappresenta gli elementi DOM principali dell'oggetto visivo.

    • this.categories sono punti dati con elementi, dove l'interfaccia è VisualDataPoint o categories: VisualDataPoint[];.

    • this.behavior è una nuova istanza di visual behavior creata nel costruttore dell'oggetto visivo, come illustrato di seguito:

      export class Visual implements IVisual {
  // ...
  constructor(options: VisualConstructorOptions) {
      // ...
      this.behavior = new Behavior();
  }
  // ...
}

Contenuto correlato