Добавление контекстного меню в визуальный элемент Power BI

Каждый визуальный элемент Power BI может отображать контекстное меню. Контекстное меню позволяет выполнять различные операции для визуального элемента, такие как анализ, суммирование или копирование. При щелчке правой кнопкой мыши в любом месте окна просмотра визуального элемента (или при длительном нажатии для сенсорных устройств) отображается контекстное меню. Для каждого визуального элемента существует два режима контекстного меню. Отображаемый режим зависит от того, где именно вы щелкнули внутри визуального элемента.

  • Вызов контекстного меню в пустом пространстве выводит базовое контекстное меню для визуального элемента.
  • Вызов контекстного меню для определенной точки данных предоставляет дополнительные параметры, которые можно применить к этой точке данных. В этом случае контекстное меню также содержит параметры Показать точку данных как таблицу, Включить и Исключить, которые применят соответствующий фильтр к этой точке данных.

Добавление контекстного меню

Используйте selectionManager.showContextMenu() с параметрами selectionId и положением (в качестве объекта {x:, y:}), чтобы Power BI отображал контекстное меню для визуального элемента.

Примечание

  • Он selectionManager.showContextMenu() доступен в API Visuals версии 2.2.0.
  • Все визуальные элементы, опубликованные в AppSource, должны поддерживать оба режима ContextMenu (пустое пространство и точка данных).

В следующем примере показано, как добавить контекстное меню в визуальный элемент. Этот код взят из файла barChart.ts, который является частью примера визуального элемента BarChart:

public update(options: VisualUpdateOptions) {
    //...
    //handle context menu
    this.svg.on('contextmenu', (event) => {
        let dataPoint: any = d3Select(event.target).datum();
        this.selectionManager.showContextMenu((dataPoint && dataPoint.data && dataPoint.data.identity) ? dataPoint.data.identity : {}, {
            x: event.clientX,
            y: event.clientY
        });
        event.preventDefault();
    });
}

Следующие шаги