A Power BI-vizualizációk interaktivitási utiljai

Cikk
01/10/2024

Az interaktivitási utils (InteractivityUtils) függvények és osztályok halmaza, amelyek segítségével egyszerűbbé tehető a keresztkiválasztás és a keresztszűrés.

Megjegyzés:

Az interaktivitás legújabb frissítései csak az eszközök legújabb verzióját támogatják (3.x.x vagy újabb).

Installation

A csomag telepítéséhez futtassa az alábbi parancsot a címtárban az aktuális Power BI-vizualizációs projekttel.
```
npm install powerbi-visuals-utils-interactivityutils --save
```
Ha az eszköz 3.0-s vagy újabb verzióját használja, telepítse powerbi-models a függőségek feloldásához.
```
npm install powerbi-models --save
```
Az interaktivitási eszközök használatához importálja a szükséges összetevőt a Power BI-vizualizáció forráskódjába.
```
import { interactivitySelectionService } from "powerbi-visuals-utils-interactivityutils";
```

CSS-fájlok belefoglalása

A csomag Power BI-vizualizációval való használatához importálja a következő CSS-fájlt a .less fájlba.

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

Importálja a CSS-fájlt fájlként .less , mert a Power BI-vizualizációs eszköz külső CSS-szabályokat burkol.

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

SelectableDataPoint-tulajdonságok

Az adatpontok általában kijelöléseket és értékeket tartalmaznak. Az interfész kibővíti az interfészt SelectableDataPoint .

SelectableDataPoint már tartalmazza a tulajdonságokat az alábbiak szerint:

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

Adatpontok felületének meghatározása

Hozzon létre egy interaktivitási utils-példányt, és mentse az objektumot a vizualizáció tulajdonságaként.

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

Az alapszintű viselkedési osztály kiterjesztése.

Megjegyzés:

BaseBehavioraz interaktivitási utilok 5.6.x-es verziójában vezették be. Ha régebbi verziót használ, hozzon létre egy viselkedési osztályt az alábbi mintából.

Adja meg a viselkedésosztály beállításainak felületét.

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

Osztály definiálása a következőhöz visual behavior: . Vagy bővítse ki az osztályt BaseBehavior .

Osztály definiálása visual behavior

Az osztály felelős az eseményekért click és contextmenu az egérrel.

Amikor egy felhasználó adatelemekre kattint, a vizualizáció meghívja a kijelöléskezelőt az adatpontok kiválasztására. Ha a felhasználó a vizualizáció háttérelemére kattint, a kijelölés törlése kezelőt hívja meg.

Az osztály a következő megfeleltetési metódusokat tartalmazza:

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

Az BaseBehavior osztály kiterjesztése

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

Az elemekre való kattintás kezeléséhez hívja meg a d3 kijelölési objektum metódusát on . Ez a következőre elementsSelection is vonatkozik: és 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);
  });
}

Adjon hozzá egy hasonló kezelőt az contextmenu eseményhez a kijelöléskezelő metódusának meghívásához 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();
        }
    });
}

Ha függvényeket szeretne hozzárendelni a kezelőkhöz, az interaktivitási utils meghívja a metódust bindEvents . Adja hozzá a következő hívásokat a bindEvents metódushoz:

bindClick
bindClearCatcher
bindContextMenu

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

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

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

A renderSelection metódus feladata a diagram elemeinek vizualizációs állapotának frissítése. A következők minta-implementációja renderSelection .

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

Az utolsó lépés a példány visual behaviorlétrehozása és az bind interaktivitási utils-példány metódusának meghívása.
```
this.interactivity.bind(<BaseBehaviorOptions<VisualDataPoint>>{
    behavior: this.behavior,
    dataPoints: this.categories,
    clearCatcherSelection: select(this.target),
    elementsSelection: selectionMerge
});
```
- selectionMerge a d3 kijelölési objektum, amely a vizualizáció összes kijelölhető elemét jelöli.
- select(this.target) a d3 kijelölési objektum, amely a vizualizáció fő DOM-elemeit jelöli.
- this.categories elemeket tartalmazó adatpontok, ahol az VisualDataPoint interfész vagy categories: VisualDataPoint[];a .
- this.behavior a vizualizáció konstruktorában létrehozott új példány visual behavior , ahogyan az látható:
```
export class Visual implements IVisual {
  // ...
  constructor(options: VisualConstructorOptions) {
      // ...
      this.behavior = new Behavior();
  }
  // ...
}
```

Megosztás a következőn keresztül:

A Power BI-vizualizációk interaktivitási utiljai

Installation

CSS-fájlok belefoglalása

SelectableDataPoint-tulajdonságok

Adatpontok felületének meghatározása

Visszajelzés

További források

Megosztás a következőn keresztül:

A Power BI-vizualizációk interaktivitási utiljai

Installation

CSS-fájlok belefoglalása

SelectableDataPoint-tulajdonságok

Adatpontok felületének meghatározása

Kapcsolódó tartalom

Visszajelzés

További források