Události
Mistrovství Světa v Power BI DataViz
14. 2. 16 - 31. 3. 16
Se 4 šance na vstup, můžete vyhrát konferenční balíček a udělat to na LIVE Grand Finale v Las Vegas
Další informaceTento prohlížeč se už nepodporuje.
Upgradujte na Microsoft Edge, abyste mohli využívat nejnovější funkce, aktualizace zabezpečení a technickou podporu.
Popisy představují elegantní způsob, jak poskytnout více kontextových informací a podrobností datovým bodům ve vizuálu. Rozhraní API popisů Power BI může zpracovávat následující interakce:
Popisy můžou zobrazit textový prvek s názvem, hodnotou v dané barvě a neprůhledností v zadané sadě souřadnic. Tato data se poskytují rozhraní API a hostitel Power BI je vykresluje stejným způsobem jako popisy pro nativní vizuály.
Styl popisů můžete změnit nebo přidat akce procházení povolením moderní funkce popisů .
Následující obrázek ukazuje popis v ukázkovém pruhovém grafu:
Obrázek výše uvedeného popisu znázorňuje jednu kategorii a hodnotu pruhu. Popis můžete rozšířit tak, aby zobrazoval více hodnot.
Popisy ve vizuálu ITooltipService
můžete spravovat prostřednictvím rozhraní. ITooltipService
upozorní hostitele, že je třeba zobrazit, odebrat nebo přesunout popis.
interface ITooltipService {
enabled(): boolean;
show(options: TooltipShowOptions): void;
move(options: TooltipMoveOptions): void;
hide(options: TooltipHideOptions): void;
}
Vizuál by měl podle potřeby detekovat události myši ve vizuálu a volat show()
objekty , move()
a hide()
delegáty s odpovídajícím obsahem vyplněným v objektech popisů options
.
TooltipShowOptions
a TooltipHideOptions
naopak definujte, co se má v těchto událostech zobrazovat a jak se chovat.
Volání těchto metod zahrnuje uživatelské události, jako jsou pohyby myši a dotykové události, takže je vhodné vytvořit naslouchací procesy pro tyto události, které by zase vyvolaly TooltipService
členy.
Následující příklad agreguje ve třídě s názvem TooltipServiceWrapper
.
Základní myšlenkou za touto třídou je uchovávat instanci TooltipService
, poslouchat události myši D3 přes relevantní prvky a pak provést volání show()
a hide()
prvky v případě potřeby.
Třída uchovává a spravuje všechny relevantní stavy a logiky pro tyto události, které jsou většinou zaměřené na propojení se základním kódem D3. Propojení a převod D3 je mimo rozsah tohoto článku.
Ukázkový kód v tomto článku je založený na vizuálu SampleBarChart. Zdrojový kód můžete prozkoumat v barChart.ts.
Konstruktor pruhového grafu má nyní TooltipServiceWrapper
člena, který se vytvoří instance v konstruktoru s instancí hostitele tooltipService
.
private tooltipServiceWrapper: ITooltipServiceWrapper;
this.tooltipServiceWrapper = createTooltipServiceWrapper(this.host.tooltipService, options.element);
Třída TooltipServiceWrapper
obsahuje tooltipService
instanci, také jako kořenový prvek D3 vizuálních a dotykových parametrů.
class TooltipServiceWrapper implements ITooltipServiceWrapper {
private handleTouchTimeoutId: number;
private visualHostTooltipService: ITooltipService;
private rootElement: Element;
private handleTouchDelay: number;
constructor(tooltipService: ITooltipService, rootElement: Element, handleTouchDelay: number) {
this.visualHostTooltipService = tooltipService;
this.handleTouchDelay = handleTouchDelay;
this.rootElement = rootElement;
}
.
.
.
}
Jedním vstupním bodem této třídy pro registraci naslouchacích procesů událostí je addTooltip
metoda.
public addTooltip<T>(
selection: d3.Selection<Element>,
getTooltipInfoDelegate: (args: TooltipEventArgs<T>) => VisualTooltipDataItem[],
getDataPointIdentity: (args: TooltipEventArgs<T>) => ISelectionId,
reloadTooltipDataOnMouseMove?: boolean): void {
if (!selection || !this.visualHostTooltipService.enabled()) {
return;
}
...
...
}
Jak vidíte, ukončí se bez akce, addTooltip
pokud tooltipService
je zakázaná nebo neexistuje žádný skutečný výběr.
Metoda addTooltip
dále naslouchá události D3 mouseover
, jak je znázorněno v následujícím kódu:
...
...
selection.on("mouseover.tooltip", () => {
// Ignore mouseover while handling touch events
if (!this.canDisplayTooltip(d3.event))
return;
let tooltipEventArgs = this.makeTooltipEventArgs<T>(rootNode, true, false);
if (!tooltipEventArgs)
return;
let tooltipInfo = getTooltipInfoDelegate(tooltipEventArgs);
if (tooltipInfo == null)
return;
let selectionId = getDataPointIdentity(tooltipEventArgs);
this.visualHostTooltipService.show({
coordinates: tooltipEventArgs.coordinates,
isTouchEvent: false,
dataItems: tooltipInfo,
identities: selectionId ? [selectionId] : [],
});
});
Další zpracování najdete v ukázce a mouseout
mousemove
událostech.
Další informace najdete v úložišti vizuálu SampleBarChart.
Třída BarChart byla přidána s getTooltipData
členem, který jednoduše extrahuje category
, value
a color
datový bod do VisualTooltipDataItem[] elementu.
private static getTooltipData(value: any): VisualTooltipDataItem[] {
return [{
displayName: value.category,
value: value.value.toString(),
color: value.color,
header: 'ToolTip Title'
}];
}
V předchozí implementaci header
je člen konstantní, ale můžete ho použít pro složitější implementace, které vyžadují dynamické hodnoty. Můžete naplnit VisualTooltipDataItem[]
více než jedním prvkem, který do popisu přidá více řádků. Může být užitečné ve vizuálech, jako jsou skládané pruhové grafy, ve kterých může popis zobrazovat data z více než jednoho datového bodu.
Posledním krokem je volání addTooltip
metody, když se můžou skutečná data změnit. Toto volání probíhá v BarChart.update()
metodě. Volání se provádí pro monitorování výběru všech "pruhových" prvků, které předávají pouze BarChart.getTooltipData()
, jak jsme zmínili dříve.
this.tooltipServiceWrapper.addTooltip(this.barContainer.selectAll('.bar'),
(tooltipEvent: TooltipEventArgs<number>) => BarChart.getTooltipData(tooltipEvent.data),
(tooltipEvent: TooltipEventArgs<number>) => null);
Pokud chcete přidat podporu popisů stránky sestavy (možnost upravit popisy v podokně formátu stránky sestavy), přidejte tooltips
objekt do souboru capabilities.json .
Příklad:
{
"tooltips": {
"supportedTypes": {
"default": true,
"canvas": true
},
"roles": [
"tooltips"
]
}
}
Popisy pak můžete definovat v podokně Formátování stránky sestavy.
supportedTypes
: Konfigurace popisu podporovaná vizuálem a promítnutá do polí.
default
: Určuje, zda je podporována "automatická" vazba popisů prostřednictvím datového pole.canvas
: Určuje, jestli jsou podporované popisy stránky sestavy.roles
: (Volitelné) Po definování dává pokyn, jaké role dat jsou vázané na vybranou možnost popisu v polích.
Další informace najdete v pokynech k používání popisů stránky sestavy.
Pokud chcete zobrazit popis stránky sestavy, po volání ITooltipService.Show(options: TooltipShowOptions)
hostitele Power BI nebo ITooltipService.Move(options: TooltipMoveOptions)
, spotřebuje selectionId (identities
vlastnost předchozího options
argumentu). Pokud chcete načíst popisek, měl by SelectionId představovat vybraná data (kategorie, řady atd.) položky, na kterou jste najeti myší.
Příklad odeslání selectionId do volání zobrazení popisu se zobrazí v následujícím kódu:
this.tooltipServiceWrapper.addTooltip(this.barContainer.selectAll('.bar'),
(tooltipEvent: TooltipEventArgs<number>) => BarChart.getTooltipData(tooltipEvent.data),
(tooltipEvent: TooltipEventArgs<number>) => tooltipEvent.data.selectionID);
Z rozhraní API verze 3.8.3 můžete také vytvářet moderní vizuální popisy. Moderní vizuální popisy přidávají akce přechodu k podrobnostem datového bodu do popisů a aktualizují styl tak, aby odpovídaly motivu sestavy. Pokud chcete zjistit, kterou verzi používáte, podívejte se do apiVersion
souboru pbiviz.json .
Pokud chcete spravovat podporu moderních popisů stránek sestavy, přidejte supportEnhancedTooltips
do objektu tooltips
v souboru capabilities.json vlastnost.
Příklad:
{
"tooltips": {
... ,
"supportEnhancedTooltips": true
}
}
Podívejte se na příklad moderní funkce popisů, která se používá v kódu SampleBarChart .
Poznámka
Přidání této funkce do souboru capabilities.json dává uživateli možnost povolit tuto funkci pro sestavu. Mějte na paměti, že uživatel bude muset v nastavení sestavy povolit moderní funkci popisu.
Události
Mistrovství Světa v Power BI DataViz
14. 2. 16 - 31. 3. 16
Se 4 šance na vstup, můžete vyhrát konferenční balíček a udělat to na LIVE Grand Finale v Las Vegas
Další informaceŠkolení
Postup výuky
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