Utilità di interattività per gli oggetti visivi di Power BI

Nota

InteractivityService è stato deprecato.

L'utilità di interattività (InteractivityUtils) è un set di funzioni e classi che consentono di semplificare l'implementazione di selezione incrociata e filtro incrociato.

Nota

Gli aggiornamenti più recenti dell'utilità di interattività supportano solo l'ultima versione degli strumenti (3.x.x e versioni successive).

Installazione

Per installare il pacchetto, eseguire il comando seguente nella directory con l'oggetto visivo di Power BI corrente.
```
npm install powerbi-visuals-utils-interactivityutils --save
```
Se si usa la versione 3.0 o successiva dello strumento, installare powerbi-models per risolvere le dipendenze.
```
npm install powerbi-models --save
```
Per usare l'utilità di interattività, importare il componente necessario nel codice sorgente dell'oggetto visivo di Power BI.
```
import { interactivitySelectionService } from "powerbi-visuals-utils-interactivityutils";
```

Includere file CSS

Per usare il pacchetto con gli oggetti visivi di Power BI, è necessario importare il file CSS seguente nel file .less.

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

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

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

Proprietà SelectableDataPoint

I punti dati contengono in genere selezioni e valori. L'interfaccia estende l'interfaccia SelectableDataPoint.

SelectableDataPoint contiene già 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

Creare un'istanza dell'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;
}

Estendere la classe del comportamento di base.

Nota

La classe BaseBehavior è stata introdotta nella versione 5.6.x dell'utilità di interattività. Se si usa una versione precedente, creare la classe di comportamento dall'esempio seguente.

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

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

Definire una classe per visual behavior

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

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, viene chiamato il gestore di cancellazione della selezione.

La classe ha i metodi corrispondenti indicati di seguito:

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

Per gestire un clic sugli elementi, chiamare il metodo on dell'oggetto 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);
  });
}

Aggiungere un gestore simile per l'evento contextmenu per chiamare il metodo showContextMenu di gestione 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();
        }
    });
}

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

bindClick
bindClearCatcher
bindContextMenu

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

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

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

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

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

L'ultimo passaggio consiste nella creazione di un'istanza di visual behavior e nella chiamata del metodo bind 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 rappresenta i 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:
```
export class Visual implements IVisual {
  // ...
  constructor(options: VisualConstructorOptions) {
      // ...
      this.behavior = new Behavior();
  }
  // ...
}
```

Commenti e suggerimenti

Questa pagina è stata utile?

Last updated on 2025-12-15