Hendelser
14. feb., 16 - 31. mars, 16
Med fire sjanser til å delta, kan du vinne en konferansepakke og komme deg til LIVE Grand Finale i Las Vegas
Finn ut merDenne nettleseren støttes ikke lenger.
Oppgrader til Microsoft Edge for å dra nytte av de nyeste funksjonene, sikkerhetsoppdateringene og den nyeste tekniske støtten.
Denne artikkelen hjelper deg med å installere, importere og bruke verktøytipsverktøy. Dette verktøyet er nyttig for tilpassinger av verktøytips i Power BI-visualobjekter.
Hvis du vil bruke pakken, må du:
PowerBI-visuals-tools
Hvis du vil installere pakken, bør du kjøre følgende kommando i katalogen med gjeldende visualobjekt:
npm install powerbi-visuals-utils-tooltiputils --save
Denne kommandoen installerer pakken og legger til en pakke som en avhengighet i package.json
filen.
Bruksveiledningen beskriver en offentlig API for pakken. Du finner en beskrivelse og noen eksempler for hvert offentlige grensesnitt i pakken.
Denne pakken gir deg en måte å opprette TooltipServiceWrapper
og metoder for å håndtere verktøytipshandlinger på. Den bruker verktøytipsgrensesnitt - , ITooltipServiceWrapper
, TooltipEventArgs
TooltipEnabledDataPoint
.
Den har spesifikke metoder (behandling av berøringshendelser) relatert til mobilutvikling: touchEndEventName
, , touchStartEventName
usePointerEvents
.
TooltipServiceWrapper
gir den enkleste måten å manipulere verktøytips på.
Denne modulen gir følgende grensesnitt og funksjon:
Denne funksjonen oppretter en forekomst av ITooltipServiceWrapper
.
function createTooltipServiceWrapper(tooltipService: ITooltipService, rootElement: Element, handleTouchDelay?: number, getEventMethod?: () => MouseEvent): ITooltipServiceWrapper;
Er ITooltipService
tilgjengelig 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å det egendefinerte visualobjektet her.
Dette grensesnittet 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;
}
Denne metoden legger til verktøytips i det merkede området.
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å det egendefinerte visualobjektet her.
Se et eksempel på tilpasning av verktøytips i et egendefinert Gantt-visualobjekt her.
Denne metoden skjuler verktøytipset.
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();
Grensesnitt brukes under oppretting av TooltipServiceWrapper og når det brukes. De ble nevnt i eksempler fra tidligere artikler her.
interface TooltipEventArgs<TData> {
data: TData;
coordinates: number[];
elementCoordinates: number[];
context: HTMLElement;
isTouchEvent: boolean;
}
interface TooltipEnabledDataPoint {
tooltipInfo?: powerbi.extensibility.VisualTooltipDataItem[];
}
interface TooltipServiceWrapperOptions {
tooltipService: ITooltipService;
rootElement: Element;
handleTouchDelay: number;
Nå kan verktøytipsverktøy håndtere flere berøringshendelser som er nyttige for mobilutvikling.
function touchStartEventName(): string
Denne metoden returnerer navnet på en berøringsstarthendelse.
function touchEndEventName(): string
Denne metoden returnerer navnet på en touch end-hendelse.
function usePointerEvents(): boolean
Denne metoden returnerer gjeldende touchStart-hendelse relatert til en peker eller ikke.
Hendelser
14. feb., 16 - 31. mars, 16
Med fire sjanser til å delta, kan du vinne en konferansepakke og komme deg til LIVE Grand Finale i Las Vegas
Finn ut merOpplæring
Læringsbane
Use advance techniques in canvas apps to perform custom updates and optimization - Training
Use advance techniques in canvas apps to perform custom updates and optimization