QuickInfo-Hilfsprogramme

Dieser Artikel unterstützt Sie beim Installieren, Importieren und Verwenden von QuickInfo-Hilfsprogrammen (utils). Dieses Hilfsprogramm eignet sich für die Anpassung von QuickInfos in Power BI-Visuals.

Voraussetzungen

Um das Paket verwenden zu können, benötigen Sie Folgendes:

• Node.js (aktuelle LTS-Version wird empfohlen)
• npm (die unterstützte Mindestversion ist 3.0.0)
• Von PowerBI-visuals-tools erstelltes benutzerdefiniertes Visual

Installation

Führen Sie den folgenden Befehl im Verzeichnis mit Ihrem aktuellen Visual aus, um das Paket zu installieren:

npm install powerbi-visuals-utils-tooltiputils --save

Dieser Befehl installiert das Paket und fügt Ihrer package.json-Datei ein Paket als Abhängigkeit hinzu.

Verwendung

In der folgenden Anleitung zur Verwendung wird eine öffentliche API des Pakets beschrieben. Hier finden Sie eine Beschreibung sowie Beispiele für jede öffentliche Schnittstelle des Pakets.

Mit diesem Paket können Sie TooltipServiceWrapper und Methoden zum Verarbeiten von QuickInfo-Aktionen erstellen. Es verwendet QuickInfo-Schnittstellen: ITooltipServiceWrapper, TooltipEventArgs und TooltipEnabledDataPoint.

Es verfügt über spezifische Methoden (Ereignishandler für Berührungsereignisse) für die Entwicklung für Mobilgeräte: touchEndEventName, touchStartEventName und usePointerEvents.

TooltipServiceWrapper bietet die einfachste Möglichkeit zur Bearbeitung von QuickInfos.

Dieses Modul stellt die folgende Schnittstelle und Funktion zur Verfügung:

• ITooltipServiceWrapper

  • addTooltip
  • hide

• Schnittstellen

  • TooltipEventArgs
  • TooltipEnabledDataPoint
  • TooltipServiceWrapperOptions

• Berührungsereignisse

createTooltipServiceWrapper

Diese Funktion erstellt eine Instanz von ITooltipServiceWrapper.

function createTooltipServiceWrapper(tooltipService: ITooltipService, rootElement: Element, handleTouchDelay?: number,  getEventMethod?: () => MouseEvent): ITooltipServiceWrapper;

Der ITooltipService ist in IVisualHost verfügbar.

Beispiel:

import { createTooltipServiceWrapper } from "powerbi-visuals-utils-tooltiputils";

export class YourVisual implements IVisual {
    // implementation of IVisual.

    constructor(options: VisualConstructorOptions) {
        createTooltipServiceWrapper(
            options.host.tooltipService,
            options.element);

        // returns: an instance of ITooltipServiceWrapper.
    }
}

Sehen Sie sich hier ein Beispiel für das benutzerdefinierte Visual an.

ITooltipServiceWrapper

Diese Schnittstelle beschreibt öffentliche Methoden von TooltipService.

interface ITooltipServiceWrapper {
    addTooltip<T>(selection: d3.Selection<any, any, any, any>, getTooltipInfoDelegate: (args: TooltipEventArgs<T>) => powerbi.extensibility.VisualTooltipDataItem[], getDataPointIdentity?: (args: TooltipEventArgs<T>) => powerbi.visuals.ISelectionId, reloadTooltipDataOnMouseMove?: boolean): void;
    hide(): void;
}

ITooltipServiceWrapper.addTooltip

Diese Methode fügt der aktuellen Auswahl QuickInfos hinzu.

addTooltip<T>(selection: d3.Selection<any>, getTooltipInfoDelegate: (args: TooltipEventArgs<T>) => VisualTooltipDataItem[], getDataPointIdentity?: (args: TooltipEventArgs<T>) => ISelectionId, reloadTooltipDataOnMouseMove?: boolean): void;

Beispiel:

import { createTooltipServiceWrapper, TooltipEventArgs, ITooltipServiceWrapper, TooltipEnabledDataPoint } from "powerbi-visuals-utils-tooltiputils";

let bodyElement = d3.select("body");

let element = bodyElement
    .append("div")
    .style({
        "background-color": "green",
        "width": "150px",
        "height": "150px"
    })
    .classed("visual", true)
    .data([{
        tooltipInfo: [{
            displayName: "Power BI",
            value: 2016
        }]
    }]);

let tooltipServiceWrapper: ITooltipServiceWrapper = createTooltipServiceWrapper(tooltipService, bodyElement.get(0)); // tooltipService is from the IVisualHost.

tooltipServiceWrapper.addTooltip<TooltipEnabledDataPoint>(element, (eventArgs: TooltipEventArgs<TooltipEnabledDataPoint>) => {
    return eventArgs.data.tooltipInfo;
});

// You will see a tooltip if you mouseover the element.

Sehen Sie sich hier ein Beispiel für das benutzerdefinierte Visual an.

Sehen Sie sich hier ein Beispiel für die Anpassung von QuickInfos in einem benutzerdefinierten Gantt-Visual an.

ITooltipServiceWrapper.hide

Diese Methode blendet die QuickInfo aus.

hide(): void;

Beispiel:

import {createTooltipServiceWrapper} from "powerbi-visuals-utils-tooltiputils";

let tooltipServiceWrapper = createTooltipServiceWrapper(options.host.tooltipService, options.element); // options are from the VisualConstructorOptions.

tooltipServiceWrapper.hide();

Interfaces

Diese Schnittstellen werden während der Erstellung und Verwendung von TooltipServiceWrapper verwendet. Sie wurden auch hier in Beispielen aus vorherigen Artikel erwähnt.

TooltipEventArgs

interface TooltipEventArgs<TData> {
    data: TData;
    coordinates: number[];
    elementCoordinates: number[];
    context: HTMLElement;
    isTouchEvent: boolean;
}

TooltipEnabledDataPoint

interface TooltipEnabledDataPoint {
    tooltipInfo?: powerbi.extensibility.VisualTooltipDataItem[];
}

TooltipServiceWrapperOptions

interface TooltipServiceWrapperOptions {
    tooltipService: ITooltipService;
    rootElement: Element;
    handleTouchDelay: number;

Touch events

QuickInfo-Hilfsprogramme können mehrere Berührungsereignisse zu verarbeiten, die nützlich für die Entwicklung für Mobilgeräte sind.

touchStartEventName

function touchStartEventName(): string

Diese Methode gibt einen Berührungsanfang-Ereignisnamen zurück.

touchEndEventName

function touchEndEventName(): string

Diese Methode gibt einen Berührungsende-Ereignisnamen zurück.

usePointerEvents

function usePointerEvents(): boolean

Diese Methode gibt zurück, ob sich das aktuelle touchStart-Ereignis auf einen Zeiger bezieht oder nicht.