Dela via

Knappbeskrivningsverktyg

  • Artikel

Den här artikeln hjälper dig att installera, importera och använda knappbeskrivningsverktyg. Det här verktyget är användbart för anpassningar av knappbeskrivningar i visuella Power BI-objekt.

Förutsättningar

Om du vill använda paketet behöver du:

  • Node.js (vi rekommenderar den senaste LTS-versionen)
  • npm (den lägsta versionen som stöds är 3.0.0)
  • Det anpassade visuella objektet som skapats av PowerBI-visuals-tools

Installation

Om du vill installera paketet bör du köra följande kommando i katalogen med ditt aktuella visuella objekt:

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

Det här kommandot installerar paketet och lägger till ett paket som ett beroende till filen package.json .

Förbrukning

Användningsguiden beskriver ett offentligt API för paketet. Du hittar en beskrivning och några exempel för varje offentligt gränssnitt för paketet.

Det här paketet ger dig ett sätt att skapa TooltipServiceWrapper och metoder för att hantera knappbeskrivningsåtgärder. Den använder knappbeskrivningsgränssnitt – ITooltipServiceWrapper, TooltipEventArgs, TooltipEnabledDataPoint.

Den har specifika metoder (hanterare av beröringshändelser) som är relaterade till mobil utveckling: touchEndEventName, touchStartEventName, usePointerEvents.

TooltipServiceWrapper är det enklaste sättet att ändra knappbeskrivningar.

Den här modulen innehåller följande gränssnitt och funktion:

createTooltipServiceWrapper

Den här funktionen skapar en instans av ITooltipServiceWrapper.

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

ITooltipService Är tillgängligt i IVisualHost.

Exempel:

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 ett exempel på det anpassade visuella objektet här.

ITooltipServiceWrapper

Det här gränssnittet beskriver offentliga metoder för 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

Den här metoden lägger till knappbeskrivningar i den aktuella markeringen.

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

Exempel:

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 ett exempel på det anpassade visuella objektet här.

Se ett exempel på anpassning av knappbeskrivningar i ett anpassat visuellt Gantt-objekt här.

ITooltipServiceWrapper.hide

Den här metoden döljer knappbeskrivningen.

hide(): void;

Exempel:

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

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

tooltipServiceWrapper.hide();

Interfaces

Gränssnitt används när TooltipServiceWrapper skapas och när det används. De nämndes i exempel från tidigare artiklar här.

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 verktygstips hantera flera touchhändelser som är användbara för mobil utveckling.

touchStartEventName

function touchStartEventName(): string

Den här metoden returnerar ett touch start-händelsenamn.

touchEndEventName

function touchEndEventName(): string

Den här metoden returnerar ett namn på en touch end-händelse.

usePointerEvents

function usePointerEvents(): boolean

Den här metoden returnerar den aktuella touchStart-händelsen som är relaterad till en pekare eller inte.