Aracılığıyla paylaş

Power BI görselleri etkileşim yardımcı programları

  • Makale

Etkileşim yardımcı programları (InteractivityUtils), çapraz seçim ve çapraz filtreleme uygulamalarını basitleştirmek için kullanılabilecek bir dizi işlev ve sınıftır.

Dekont

Etkileşim yardımcı programlarının en son güncelleştirmeleri yalnızca araçların en son sürümünü (3.x.x ve üzeri) destekler.

Yükleme

  1. Paketi yüklemek için geçerli Power BI görsel projenizle dizinde aşağıdaki komutu çalıştırın.

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

  2. Aracın 3.0 veya sonraki bir sürümünü kullanıyorsanız bağımlılıkları çözmek için yükleyin powerbi-models .

    npm install powerbi-models --save

  3. Etkileşim yardımcı programlarını kullanmak için Power BI görselinin kaynak kodunda gerekli bileşeni içeri aktarın.

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

CSS dosyalarını dahil et

Paketi Power BI görselinizle kullanmak için aşağıdaki CSS dosyasını dosyanıza aktarın .less .

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

Power BI görselleri aracı dış CSS kurallarını sarmaladığı için CSS dosyasını dosya olarak .less içeri aktarın.

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

SelectableDataPoint özellikleri

Veri noktaları genellikle seçimler ve değerler içerir. Arabirim, arabirimi genişletir SelectableDataPoint .

SelectableDataPoint özellikleri şu şekilde içerir:

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

Veri noktaları için arabirim tanımlama

  1. Etkileşim yardımcı programlarının bir örneğini oluşturun ve nesneyi görselin özelliği olarak kaydedin.

    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. Temel davranış sınıfını genişletin.

    Dekont

    BaseBehavior etkileşim yardımcı programlarının 5.6.x sürümünde tanıtıldı. Daha eski bir sürüm kullanıyorsanız, aşağıdaki örnekten bir davranış sınıfı oluşturun.

  3. Davranış sınıfı seçenekleri için arabirimi tanımlayı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. için visual behaviorbir sınıf tanımlayın. Veya sınıfını BaseBehavior genişletin.

    için bir sınıf tanımlama visual behavior

    sınıfı ve contextmenu fare olaylarının sorumluluğundadırclick.

    Kullanıcı veri öğelerine tıkladığında görsel, veri noktalarını seçmek için seçim işleyicisini çağırır. Kullanıcı görselin arka plan öğesine tıklarsa, net seçim işleyicisini çağırır.

    sınıfı aşağıdaki karşılık gelen yöntemlere sahiptir:

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

    Sınıfını BaseBehavior genişletme

    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. Öğelere tıklamayı işlemek için d3 seçim nesnesi on yöntemini çağırın. Bu, ve clearCatcherSelectioniçin elementsSelection de geçerlidir.

    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. Seçim yöneticisinin showContextMenu yöntemini çağırmak contextmenu için olaya benzer bir işleyici ekleyin.

    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. İşleyicilere işlev atamak için etkileşim yardımcı programları yöntemini çağırır bindEvents . Yöntemine aşağıdaki çağrıları bindEvents ekleyin:

    • 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 yöntemi, grafikteki öğelerin görsel durumunu güncelleştirmekle sorumludur. örnek uygulaması aşağıda verilmiştir renderSelection .

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

  9. Son adım bir örneği visual behavioroluşturmak ve etkileşim yardımcı programları örneğinin yöntemini çağırmaktır bind .

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

    • selectionMerge , görselin seçilebilir tüm öğelerini temsil eden d3 seçim nesnesidir.

    • select(this.target) , görselin ana DOM öğelerini temsil eden d3 seçim nesnesidir.

    • this.categories, arabiriminin veya categories: VisualDataPoint[];olduğu öğelere sahip veri noktalarıdırVisualDataPoint.

    • this.behavior , gösterildiği gibi görselin visual behavior oluşturucusunda oluşturulan yeni bir örneğidir:

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

İlgili içerik