Del via

Hjælpeprogrammer til værktøjstip

  • Artikel

Denne artikel hjælper dig med at installere, importere og bruge hjælpeprogrammer til værktøjstip. Dette hjælpeværktøj er nyttigt til tilpasninger af værktøjstip i Power BI-visualiseringer.

Forudsætninger

Hvis du vil bruge pakken, skal du bruge:

  • Node.js (vi anbefaler den nyeste LTS-version)
  • npm (den minimale understøttede version er 3.0.0)
  • Den brugerdefinerede visualisering, der er oprettet af PowerBI-visuals-tools

Installation

Hvis du vil installere pakken, skal du køre følgende kommando i mappen med den aktuelle visualisering:

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

Denne kommando installerer pakken og tilføjer en pakke som en afhængighed til filen package.json .

Brug

Brugsvejledningen beskriver en offentlig API for pakken. Du kan finde en beskrivelse og nogle eksempler for hver offentlig grænseflade i pakken.

Denne pakke giver dig mulighed for at oprette TooltipServiceWrapper og metoder, der kan hjælpe med at håndtere handlinger med værktøjstip. Den bruger grænseflader til værktøjstip – ITooltipServiceWrapper, TooltipEventArgs, TooltipEnabledDataPoint.

Den har specifikke metoder (berøringshændelseshandlere), der er relateret til mobiludvikling: touchEndEventName, , touchStartEventNameusePointerEvents.

TooltipServiceWrapper er den nemmeste måde at manipulere værktøjstip på.

Dette modul indeholder følgende grænseflade og funktion:

createTooltipServiceWrapper

Denne funktion opretter en forekomst af ITooltipServiceWrapper.

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

ITooltipService er tilgængelig i IVisualHost.

Eksempel:

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.
    }
}

Se et eksempel på den brugerdefinerede visualisering her.

ITooltipServiceWrapper

Denne grænseflade beskriver offentlige metoder for 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

Denne metode føjer værktøjstip til den aktuelle markering.

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

Eksempel:

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.

Se et eksempel på den brugerdefinerede visualisering her.

Se et eksempel på tilpasning af værktøjstip i en brugerdefineret Gantt-visualisering her.

ITooltipServiceWrapper.hide

Denne metode skjuler værktøjstippet.

hide(): void;

Eksempel:

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

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

tooltipServiceWrapper.hide();

Interfaces

Grænseflader bruges under oprettelse af TooltipServiceWrapper, og når de bruges. De blev nævnt i eksempler fra tidligere artikler her.

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

Nu kan værktøjstiphjælpeprogrammer håndtere flere berøringshændelser, der er nyttige til mobiludvikling.

touchStartEventName

function touchStartEventName(): string

Denne metode returnerer et navn på en touchstarthændelse.

touchEndEventName

function touchEndEventName(): string

Denne metode returnerer et navn på en berøringsafslutningshændelse.

usePointerEvents

function usePointerEvents(): boolean

Denne metode returnerer den aktuelle touchStart-hændelse, der er relateret til en pointer eller ej.