Pridanie kontextovej ponuky do vizuálu služby Power BI

Každý vizuál služby Power BI môže zobraziť kontextovú ponuku. Kontextová ponuka umožňuje vykonávať rôzne operácie na vizuáli, napríklad ich analýzu, sumarizovanie alebo kopírovanie. Keď kliknete pravým tlačidlom myši na ľubovoľné miesto vnútri zobrazenia vizuálu (alebo dlhým stlačením v prípade dotykového zariadenia), zobrazí sa kontextová ponuka. Každý vizuál má dva režimy svojej kontextovej ponuky. Režim zobrazenia závisí od toho, kam kliknete vo vnútri vizuálu:

  • Ak zavoláte kontextovú ponuku na prázdnom mieste, zobrazí sa základná kontextová ponuka pre vizuál.
  • Volaním kontextovej ponuky pre konkrétny údajový bod získate možnosti, ktoré možno použiť na tento údajový bod. V tomto prípade kontextová ponuka tiež obsahuje možnosti Zobraziť údajový bod ako tabuľku , Zahrnúť a Vylúčiť, ktoré budú používať zodpovedajúci filter na tento údajový bod.

Pridanie kontextovej ponuky

Ak selectionManager.showContextMenu() chcete, selectionId aby power BI zobrazal kontextovú ponuku pre vizuál, použite {x:, y:} s parametrami a pozíciou (ako objekt).

Poznámka

  • Je selectionManager.showContextMenu() k dispozícii len z rozhrania Visuals API verzie 2.2.0.
  • Všetky vizuály publikované v AppSource musia podporovať obidva ContextMenu režimy (prázdne miesto a údajový bod).

Nasledujúci príklad ukazuje, ako pridať kontextovú ponuku do vizuálu. Kód sa pre vziať zo barChart.ts súboru, ktorý je súčasťou vzorového vizuálu BarChart:

    public update(options: VisualUpdateOptions) {
        //...
        //handle context menu
        this.svg.on('contextmenu', () => {
            const mouseEvent: MouseEvent = d3.event as MouseEvent;
            const eventTarget: EventTarget = mouseEvent.target;
            let dataPoint = d3.select(eventTarget).datum();
            this.selectionManager.showContextMenu(dataPoint? dataPoint.selectionId : {}, {
                x: mouseEvent.clientX,
                y: mouseEvent.clientY
            });
            mouseEvent.preventDefault();
        });

Ďalšie kroky