Nástroje pro interaktivitu vizuálů Power BI

Poznámka:

Služba interactivityService je zastaralá.

Nástroje pro interaktivitu (InteractivityUtils) jsou sadou funkcí a tříd, které lze použít ke zjednodušení implementace křížového výběru a křížového filtrování.

Poznámka:

Nejnovější aktualizace nástrojů pro interaktivitu podporují pouze nejnovější verzi nástrojů (3.x.x a vyšší).

Instalace

  1. Balíček nainstalujete spuštěním následujícího příkazu v adresáři s aktuálním projektem vizuálu Power BI.

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

  2. Pokud používáte nástroj verze 3.0 nebo novější, nainstalujte powerbi-models ho, abyste vyřešili závislosti.

    npm install powerbi-models --save

  3. Pokud chcete používat nástroje pro interaktivitu, naimportujte požadovanou komponentu do zdrojového kódu vizuálu Power BI.

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

Zahrnutí souborů CSS

Pokud chcete balíček použít s vizuálem Power BI, naimportujte do .less souboru následující soubor CSS.

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

Importujte soubor CSS jako soubor, .less protože nástroj vizuálů Power BI zabalí externí pravidla CSS.

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

SelectableDataPoint – vlastnosti

Datové body obvykle obsahují výběry a hodnoty. Rozhraní rozšiřuje SelectableDataPoint rozhraní.

SelectableDataPoint již obsahuje vlastnosti následujícím způsobem:

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

Definování rozhraní pro datové body

  1. Vytvořte instanci nástrojů pro interaktivitu a uložte objekt jako vlastnost vizuálu.

    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. Rozšiřte základní třídu chování.

    Poznámka:

    BaseBehavior byla zavedena ve verzi 5.6.x nástrojů pro interaktivitu. Pokud používáte starší verzi, vytvořte třídu chování z následující ukázky.

  3. Definujte rozhraní pro možnosti třídy chování.

    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. Definujte třídu pro visual behavior. Nebo rozšiřte BaseBehavior třídu.

    Definování třídy pro visual behavior

    Třída zodpovídá za click události myši a contextmenu události myši.

    Když uživatel klikne na datové prvky, vizuál zavolá obslužnou rutinu výběru k výběru datových bodů. Pokud uživatel klikne na prvek pozadí vizuálu, zavolá obslužnou rutinu pro vymazání výběru.

    Třída má následující odpovídající metody:

    • 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 Rozšíření třídy

    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. Chcete-li zpracovat kliknutí na prvky, zavolejte metodu objektu výběru on d3. To platí i pro elementsSelection a 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. Přidejte podobnou obslužnou rutinu contextmenu události, která zavolá metodu showContextMenu správce výběru.

    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. K přiřazení funkcí obslužným rutinám volá nástroje pro interaktivitu metodu bindEvents . Do metody přidejte následující volání bindEvents :

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

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

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

  8. Metoda renderSelection zodpovídá za aktualizaci vizuálního stavu prvků v grafu. Ukázková implementace renderSelection následuje.

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

  9. Posledním krokem je vytvoření instance visual behaviornástroje pro interaktivitu a volání bind metody nástroje pro interaktivitu.

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

    • selectionMergeje objekt výběru d3, který představuje všechny vybratelné prvky vizuálu.

    • select(this.target)je objekt výběru d3, který představuje hlavní prvky MODELU DOM vizuálu.

    • this.categories jsou datové body s prvky, kde je VisualDataPoint rozhraní nebo categories: VisualDataPoint[];.

    • this.behavior je nová instance visual behavior vytvořená v konstruktoru vizuálu, jak je znázorněno na obrázku:

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

Související obsah

  • Last updated on