Interaktivitetsverktøy for Power BI-visualobjekter

  • Artikkel

Interaktivitetsverktøy (InteractivityUtils) er et sett med funksjoner og klasser som kan brukes til å forenkle implementeringen av kryssvalg og kryssfiltrering.

Merk

De nyeste oppdateringene av interaktivitetsverktøy støtter bare den nyeste versjonen av verktøy (3.x.x og nyere).

Installasjon

  1. Hvis du vil installere pakken, kjører du følgende kommando i katalogen med det gjeldende Power BI-visualobjektprosjektet.

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

  2. Hvis du bruker versjon 3.0 eller nyere av verktøyet, må du installere powerbi-models for å løse avhengigheter.

    npm install powerbi-models --save

  3. Hvis du vil bruke interaktivitetsverktøy, importerer du den nødvendige komponenten i kildekoden til Power BI-visualobjektet.

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

Inkluder CSS-filer

Hvis du vil bruke pakken med Power BI-visualobjektet, importerer du følgende CSS-fil til .less filen.

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

Importer CSS-filen som en .less fil fordi Power BI-verktøyet for visualobjekter bryter eksterne CSS-regler.

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

Egenskaper for SelectableDataPoint

Vanligvis inneholder datapunkter valg og verdier. Grensesnittet utvider grensesnittet SelectableDataPoint .

SelectableDataPoint inneholder allerede egenskaper på følgende måte:

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

Definere et grensesnitt for datapunkter

  1. Opprett en forekomst av interaktivitetsverktøy og lagre objektet som en egenskap for visualobjektet.

    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. Utvide klassen for grunnleggende virkemåte.

    Merk

    BaseBehaviorble introdusert i 5.6.x-versjonen av interaktivitetsverktøy. Hvis du bruker en eldre versjon, oppretter du en virkemåteklasse fra eksemplet nedenfor.

  3. Definer grensesnittet for klassealternativene for virkemåte.

    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. Definer en klasse for visual behavior. Eller utvide BaseBehavior klassen.

    Definer en klasse for visual behavior

    Klassen er ansvarlig for click og contextmenu musehendelser.

    Når en bruker klikker dataelementer, kaller visualobjektet valgbehandlingen for å velge datapunkter. Hvis brukeren klikker på bakgrunnselementet i visualobjektet, kaller den opp den klare valgbehandlingen.

    Klassen har følgende korresponderende 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 Utvide 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. Hvis du vil håndtere et klikk på elementer, kaller du metoden for d3-merket objekt on . Dette gjelder også for elementsSelection og 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. Legg til en lignende behandling for contextmenu hendelsen for å kalle metoden for valgbehandling 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();
        }
    });
}

  7. Hvis du vil tilordne funksjoner til behandlere, kaller interaktivitetsverktøyene bindEvents metoden. Legg til følgende kall i 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 er ansvarlig for å oppdatere den visuelle tilstanden til elementer i diagrammet. En eksempelimplementering av renderSelection følger.

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

  9. Det siste trinnet er å opprette en forekomst av visual behavior, og kalle bind metoden for interaktivitetsverktøyforekomsten.

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

    • selectionMergeer d3-merket objekt, som representerer alle visualobjektets valgbare elementer.

    • select(this.target)er d3-merket objekt, som representerer visualobjektets viktigste DOM-elementer.

    • this.categories er datapunkter med elementer, der grensesnittet er VisualDataPoint eller categories: VisualDataPoint[];.

    • this.behavior er en ny forekomst av visual behavior opprettet i konstruktøren av visualobjektet, som vist:

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

Relatert innhold