Dela via

Interaktivitetsverktyg för visuella Power BI-objekt

  • Artikel

Interaktivitetsverktyg (InteractivityUtils) är en uppsättning funktioner och klasser som kan användas för att förenkla implementeringen av korsval och korsfiltrering.

Kommentar

De senaste uppdateringarna av interaktivitetsverktyg stöder endast den senaste versionen av verktyg (3.x.x och senare).

Installation

  1. Installera paketet genom att köra följande kommando i katalogen med ditt aktuella visuella Power BI-projekt.

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

  2. Om du använder version 3.0 eller senare av verktyget installerar powerbi-models du för att lösa beroenden.

    npm install powerbi-models --save

  3. Om du vill använda interaktivitetsverktyg importerar du den nödvändiga komponenten i källkoden för det visuella Power BI-objektet.

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

Inkludera CSS-filer

Om du vill använda paketet med ditt visuella Power BI-objekt importerar du följande CSS-fil till filen .less .

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

Importera CSS-filen som en .less fil eftersom verktyget visuella Power BI-objekt omsluter externa CSS-regler.

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

SelectableDataPoint-egenskaper

Datapunkter innehåller vanligtvis val och värden. Gränssnittet utökar SelectableDataPoint gränssnittet.

SelectableDataPoint innehåller redan följande egenskaper:

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

Definiera ett gränssnitt för datapunkter

  1. Skapa en instans av interaktivitetsverktyg och spara objektet som en egenskap för det visuella objektet.

    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. Utöka basbeteendeklassen.

    Kommentar

    BaseBehavior introducerades i 5.6.x-versionen av interaktivitetsverktyg. Om du använder en äldre version skapar du en beteendeklass från följande exempel.

  3. Definiera gränssnittet för beteendeklassalternativen.

    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. Definiera en klass för visual behavior. Eller utöka BaseBehavior klassen.

    Definiera en klass för visual behavior

    Klassen ansvarar för click och contextmenu mushändelser.

    När en användare klickar på dataelement anropar det visuella objektet markeringshanteraren för att välja datapunkter. Om användaren klickar på bakgrundselementet i det visuella objektet anropas clear selection-hanteraren.

    Klassen har följande motsvarande metoder:

    • 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 Utöka klassen

    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. Om du vill hantera ett klick på element anropar du metoden d3-markeringsobjekton. Detta gäller även för elementsSelection och 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. Lägg till en liknande hanterare för händelsen för contextmenu att anropa urvalshanterarens showContextMenu metod.

    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. För att tilldela funktioner till hanterare anropar interaktivitetsverktygen bindEvents metoden. Lägg till följande anrop till bindEvents metoden:

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

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

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

  8. Metoden renderSelection ansvarar för att uppdatera det visuella tillståndet för element i diagrammet. En exempelimplementering av renderSelection följande.

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

  9. Det sista steget är att skapa en instans av visual behavioroch anropa bind metoden för interaktivitetsutils-instansen.

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

    • selectionMergeär d3-markeringsobjektet, som representerar alla visuella objekts valbara element.

    • select(this.target)är d3-markeringsobjektet, som representerar det visuella objektets viktigaste DOM-element.

    • this.categories är datapunkter med element, där gränssnittet är VisualDataPoint eller categories: VisualDataPoint[];.

    • this.behavior är en ny instans av som skapats visual behavior i konstruktorn för det visuella objektet, enligt följande:

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

Relaterat innehåll