Nástroje pro interaktivitu vizuálů Power BI
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
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
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
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
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; }
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.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>; }
Definujte třídu pro
visual behavior
. Nebo rozšiřteBaseBehavior
třídu.Definování třídy pro
visual behavior
Třída zodpovídá za
click
události myši acontextmenu
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řídyimport 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> { // ... }
Chcete-li zpracovat kliknutí na prvky, zavolejte metodu objektu výběru
on
d3. To platí i proelementsSelection
aclearCatcherSelection
.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); }); }
Přidejte podobnou obslužnou rutinu
contextmenu
události, která zavolá metodushowContextMenu
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(); } }); }
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(); }
Metoda
renderSelection
zodpovídá za aktualizaci vizuálního stavu prvků v grafu. Ukázková implementacerenderSelection
následuje.public renderSelection(hasSelection: boolean): void { this.options.elementsSelection.style("opacity", (category: any) => { if (category.selected) { return 0.5; } else { return 1; } }); }
Posledním krokem je vytvoření instance
visual behavior
ná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 });
selectionMerge
je 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 jeVisualDataPoint
rozhraní nebocategories: VisualDataPoint[];
.this.behavior
je nová instancevisual 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
Váš názor
https://aka.ms/ContentUserFeedback.
Připravujeme: V průběhu roku 2024 budeme postupně vyřazovat problémy z GitHub coby mechanismus zpětné vazby pro obsah a nahrazovat ho novým systémem zpětné vazby. Další informace naleznete v tématu:Odeslat a zobrazit názory pro