Jaa

Power BI -visualisointien vuorovaikutteisuuden apuohjelmat

  • Artikkeli

Vuorovaikutteisuuden apuohjelmat (InteractivityUtils) on joukko funktioita ja luokkia, joiden avulla voidaan yksinkertaistaa ristiinvalintaa ja ristiinsuodatusta.

Muistiinpano

Vuorovaikutteisuuden apuohjelmien uusimmat päivitykset tukevat vain työkalujen viimeisintä versiota (3.x.x ja uudemmat).

Asennus

  1. Asenna paketti suorittamalla seuraava komento hakemistossa, joka sisältää nykyisen Power BI -visualisointiprojektin.

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

  2. Jos käytät työkalun versiota 3.0 tai uudempaa versiota, asenna powerbi-models riippuvuuksien ratkaisemiseksi.

    npm install powerbi-models --save

  3. Jos haluat käyttää vuorovaikutteisuuden apuohjelmia, tuo tarvittava komponentti Power BI -visualisoinnin lähdekoodiin.

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

CSS-tiedostojen sisällyttäminen

Jos haluat käyttää pakettia Power BI -visualisoinnissa, tuo seuraava CSS-tiedosto .less -tiedostoon.

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

Tuo CSS-tiedosto tiedostona, .less koska Power BI -visualisointityökalu rivittää ulkoiset CSS-säännöt.

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

SelectableDataPoint-ominaisuudet

Yleensä arvopisteet sisältävät valintoja ja arvoja. Liittymä laajentaa -liittymän SelectableDataPoint .

SelectableDataPoint sisältää jo ominaisuuksia seuraavasti:

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

Arvopisteiden käyttöliittymän määrittäminen

  1. Luo vuorovaikutteisuuden apuohjelmien esiintymä ja tallenna objekti visualisoinnin ominaisuutena.

    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. Laajenna perustoimintaluokkaa.

    Muistiinpano

    BaseBehavioresiteltiin vuorovaikutteisuuden apuohjelmien versiossa 5.6.x. Jos käytät vanhempaa versiota, luo toimintaluokka seuraavasta mallista.

  3. Määritä toimintaluokan asetusten liittymä.

    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. Määritä luokka lle visual behavior. Voit myös laajentaa BaseBehavior luokan.

    Määritä luokka ön visual behavior

    Luokka vastaa click hiiren tapahtumista ja contextmenu hiiren tapahtumista.

    Kun käyttäjä napsauttaa tietoelementtejä, visualisointi kutsuu valintakäsittelijää valitsemaan arvopisteet. Jos käyttäjä napsauttaa visualisoinnin taustaosaa, se kutsuu selkeää valintakäsittelijää.

    Luokalla on vastaavat menetelmät:

    • 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 Luokan laajentaminen

    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. Jos haluat käsitellä napsautuselementtejä, kutsu d3-valintaobjektin on menetelmää. Tämä koskee myös seuraavia: elementsSelection ja 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. Lisää vastaava käsittelijä tapahtumalle contextmenu , jos haluat kutsua valintojen hallinnan showContextMenu menetelmää.

    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. Vuorovaikutteisuuden apuohjelmat kutsuvat bindEvents -menetelmää määrittääkseen funktiot käsittelijöille. Lisää menetelmään seuraavat kutsut 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. - renderSelection menetelmä on vastuussa kaavion elementtien visualisointien tilan päivittämisestä. Malli toteutuksesta renderSelection :

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

  9. Viimeisessä vaiheessa luodaan -esiintymä visual behaviorja kutsutaan bind vuorovaikutteisuuden apuohjelmien esiintymän -menetelmää.

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

    • selectionMergeon d3-valintaobjekti, joka edustaa visualisoinnin kaikkia valittavissa olevia elementtejä.

    • select(this.target)on d3-valintaobjekti, joka edustaa visualisoinnin DOM-pääelementtejä.

    • this.categories ovat datapisteitä, joissa on elementtejä ja joissa liittymä on VisualDataPoint tai categories: VisualDataPoint[];.

    • this.behavior on uusi esiintymä kohteesta visual behavior luotu visualisoinnin konstruktorissa seuraavasti:

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

Liittyvä sisältö