Narzędzia interakcyjności wizualizacji usługi Power BI

Artykuł
01/10/2024

Narzędzia interakcyjne (InteractivityUtils) to zestaw funkcji i klas, których można użyć do uproszczenia implementacji wyboru krzyżowego i filtrowania krzyżowego.

Uwaga

Najnowsze aktualizacje narzędzi interakcyjności obsługują tylko najnowszą wersję narzędzi (3.x.x i nowsze).

Instalacja

Aby zainstalować pakiet, uruchom następujące polecenie w katalogu z bieżącym projektem wizualizacji usługi Power BI.
```
npm install powerbi-visuals-utils-interactivityutils --save
```
Jeśli używasz narzędzia w wersji 3.0 lub nowszej, zainstaluj ją powerbi-models , aby rozwiązać problemy z zależnościami.
```
npm install powerbi-models --save
```
Aby użyć narzędzi interakcyjności, zaimportuj wymagany składnik w kodzie źródłowym wizualizacji usługi Power BI.
```
import { interactivitySelectionService } from "powerbi-visuals-utils-interactivityutils";
```

Dołączanie plików CSS

Aby użyć pakietu z wizualizacją usługi Power BI, zaimportuj następujący plik CSS do pliku .less .

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

Zaimportuj .less plik CSS jako plik, ponieważ narzędzie wizualizacji usługi Power BI opakowuje zewnętrzne reguły CSS.

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

Właściwości selectableDataPoint

Zazwyczaj punkty danych zawierają wybory i wartości. Interfejs rozszerza SelectableDataPoint interfejs.

SelectableDataPoint zawiera już właściwości w następujący sposób:

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

Definiowanie interfejsu dla punktów danych

Utwórz wystąpienie narzędzia interakcyjności i zapisz obiekt jako właściwość wizualizacji.

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

Rozszerz klasę zachowania podstawowego.

Uwaga

BaseBehavior wprowadzono w wersji 5.6.x narzędzi interakcyjności. Jeśli używasz starszej wersji, utwórz klasę zachowania na podstawie poniższego przykładu.

Zdefiniuj interfejs opcji klasy zachowania.

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

Zdefiniuj klasę dla klasy visual behavior. Możesz też rozszerzyć klasę BaseBehavior .

Definiowanie klasy dla visual behavior

Klasa jest odpowiedzialna za click zdarzenia myszy i contextmenu .

Gdy użytkownik kliknie elementy danych, wizualizacja wywołuje procedurę obsługi wyboru, aby wybrać punkty danych. Jeśli użytkownik kliknie element tła wizualizacji, wywołuje on procedurę obsługi wyczyść zaznaczenie.

Klasa ma następujące metody odpowiadające:

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

Rozszerzanie BaseBehavior klasy

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

Aby obsłużyć kliknięcie elementów, wywołaj metodę obiektu on wyboru d3. Dotyczy to również i elementsSelectionclearCatcherSelection.

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

Dodaj podobną procedurę obsługi dla contextmenu zdarzenia, aby wywołać metodę menedżera showContextMenu wyboru.

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

Aby przypisać funkcje do programów obsługi, narzędzia interakcyjności wywołuje metodę bindEvents . Dodaj następujące wywołania do bindEvents metody :

bindClick
bindClearCatcher
bindContextMenu

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

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

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

Metoda renderSelection jest odpowiedzialna za aktualizowanie stanu wizualnego elementów na wykresie. Przykładowa implementacja jest następująca renderSelection .

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

Ostatnim krokiem jest utworzenie wystąpienia visual behaviorklasy i wywołanie bind metody wystąpienia narzędzia interakcyjności.
```
this.interactivity.bind(<BaseBehaviorOptions<VisualDataPoint>>{
    behavior: this.behavior,
    dataPoints: this.categories,
    clearCatcherSelection: select(this.target),
    elementsSelection: selectionMerge
});
```
- selectionMerge jest obiektem wyboru d3 , który reprezentuje wszystkie elementy do wyboru wizualizacji.
- select(this.target) jest obiektem wyboru d3 , który reprezentuje główne elementy DOM wizualizacji.
- this.categories to punkty danych z elementami, w których interfejs to VisualDataPoint lub categories: VisualDataPoint[];.
- this.behavior to nowe wystąpienie visual behavior utworzone w konstruktorze wizualizacji, jak pokazano poniżej:
```
export class Visual implements IVisual {
  // ...
  constructor(options: VisualConstructorOptions) {
      // ...
      this.behavior = new Behavior();
  }
  // ...
}
```

Udostępnij za pośrednictwem

Narzędzia interakcyjności wizualizacji usługi Power BI

Instalacja

Dołączanie plików CSS

Właściwości selectableDataPoint

Definiowanie interfejsu dla punktów danych

Opinia

Dodatkowe zasoby

Udostępnij za pośrednictwem

Narzędzia interakcyjności wizualizacji usługi Power BI

Instalacja

Dołączanie plików CSS

Właściwości selectableDataPoint

Definiowanie interfejsu dla punktów danych

Powiązana zawartość

Opinia

Dodatkowe zasoby