Dodaj obsługę zakładek do wizualizacji w raportach Power BI

Za pomocą zakładek raportu usługi Power BI można przechwytywać i zapisywać skonfigurowany widok strony raportu. Następnie możesz wrócić do zapisanego widoku szybko i łatwo, gdy chcesz. Zakładka zapisuje całą konfigurację, w tym opcje i filtry.

Aby uzyskać więcej informacji na temat zakładek, zobacz Używanie zakładek do udostępniania szczegółowych informacji i tworzenia scenariuszy w usłudze Power BI.

Wizualizacje obsługujące zakładki

Wizualizacja usługi Power BI, która obsługuje zakładki, musi być w stanie zapisać i podać poprawne informacje w razie potrzeby. Jeśli wizualizacja współdziała z innymi wizualizacjami, wybiera punkty danych lub filtruje inne wizualizacje, musisz zapisać stan zakładki we właściwościach filterState wizualizacji.

Jak wizualizacje usługi Power BI współdziałają z usługą Power BI w zakładkach raportu

Załóżmy, że chcesz utworzyć kilka zakładek na stronie raportu z każdą zakładką z wybranymi różnymi punktami danych.

Najpierw wybierz co najmniej jeden punkt danych w wizualizacji. Wizualizacja przekazuje wybrane opcje do hosta. Następnie wybierz Dodaj w okienku Zakładka. Usługa Power BI zapisuje bieżące opcje dla nowej zakładki.

Wykonaj to kilka razy, aby utworzyć nowe zakładki. Po utworzeniu zakładek można przełączać się między nimi.

Za każdym razem, gdy wybierzesz zakładkę, usługa Power BI przywraca zapisany filtr lub stan zaznaczenia i przekazuje go do wizualizacji. Wizualizacje w raporcie są wyróżnione lub filtrowane zgodnie ze stanem przechowywanym w zakładce. Aby przywrócić prawidłowy stan, wizualizacja musi przekazać prawidłowy stan zaznaczenia do hosta (na przykład kolory renderowanych punktów danych).

Nowy stan wyboru (lub filtr) jest przekazywany przez właściwość options.jsonFilters w metodzie update. jsonFilters może być zarówno Advanced Filter, jak i Tuple Filter.

• Jeśli wizualizacja zawiera wybrane punkty danych, zresetuj zaznaczenie do wybranej zakładki przy użyciu funkcji wywołania zwrotnegoregisterOnSelectCallback w ISelectionManager.
• Jeśli wizualizacja używa filtrów do wybierania danych, zresetuj wartości filtru do odpowiednich wartości wybranej zakładki.

Wizualizacje z możliwością wyboru

Jeśli wizualizacja współdziała z innymi wizualizacjami przy użyciu opcji Selection, możesz dodać obsługę zakładek na jeden z dwóch sposobów:

• Za pomocą interakcyjnościUsługi do zarządzania wyborami użyj .applySelectionFromFilter Jest to przestarzała metoda.
• Za pomocą selectionManager.

Użyj usługi interaktywności, aby przywrócić wybrane zakładki — przestarzały

Jeśli wizualizacja używa usługi InteractivityService, nie potrzebujesz żadnych innych akcji do obsługi zakładek w wizualizacji.

Po wybraniu zakładki narzędzie automatycznie obsługuje stan wyboru wizualizacji.

Przywracanie zaznaczeń zakładek za pomocą narzędzia SelectionManager

Można zapisać i odtworzyć wybory zakładek przy użyciu metody ISelectionManager.registerOnSelectCallback w następujący sposób:

Po wybraniu zakładki usługa Power BI wywołuje callback metodę wizualizacji z odpowiednimi opcjami.

this.selectionManager.registerOnSelectCallback(
    (ids: ISelectionId[]) => {
        //called when a selection was set by Power BI
    });
);

Załóżmy, że punkt danych został utworzony w metodzie visualTransform wizualizacji.

Element datapoints wygląda następująco:

visualDataPoints.push({
    category: categorical.categories[0].values[i],
    color: getCategoricalObjectValue<Fill>(categorical.categories[0], i, 'colorSelector', 'fill', defaultColor).solid.color,
    selectionId: host.createSelectionIdBuilder()
        .withCategory(categorical.categories[0], i)
        .createSelectionId(),
    selected: false
});

Masz teraz visualDataPoints jako swoje punkty danych oraz tablicę ids przekazaną do funkcji callback.

Na tym etapie wizualizacja powinna porównać tablicę ISelectionId[] z wyborami w visualDataPoints tablicy, a następnie oznaczyć odpowiednie punkty danych jako wybrane.

this.selectionManager.registerOnSelectCallback(
    (ids: ISelectionId[]) => {
        visualDataPoints.forEach(dataPoint => {
            ids.forEach(bookmarkSelection => {
                if (bookmarkSelection.equals(dataPoint.selectionId)) {
                    dataPoint.selected = true;
                }
            });
        });
    });
);

Po zaktualizowaniu punktów danych będą odzwierciedlać bieżący stan wyboru przechowywany w obiekcie filter. Następnie po renderowaniu punktów danych stan wyboru wizualizacji niestandardowej jest zgodny ze stanem zakładki.

Wizualizacje z filtrem

Załóżmy, że wizualizacja tworzy filtr danych według zakresu dat. Masz startDate i endDate jako daty początkową i końcową zakresu.

Wizualizacja tworzy zaawansowany filtr i wywołuje metodę hosta applyJsonFilter w celu filtrowania danych według odpowiednich warunków.

Celem jest tabela używana do filtrowania.

import { AdvancedFilter } from "powerbi-models";

const filter: IAdvancedFilter = new AdvancedFilter(
    target,
    "And",
    {
        operator: "GreaterThanOrEqual",
        value: startDate
            ? startDate.toJSON()
            : null
    },
    {
        operator: "LessThanOrEqual",
        value: endDate
            ? endDate.toJSON()
            : null
    });

this.host.applyJsonFilter(
    filter,
    "general",
    "filter",
    (startDate && endDate)
        ? FilterAction.merge
        : FilterAction.remove
);

Za każdym razem, gdy wybierzesz zakładkę, wizualizacja niestandardowa otrzymuje wywołanie update .

W metodzie update wizualizacja sprawdza filtr w obiekcie:

const filter: IAdvancedFilter = FilterManager.restoreFilter(
    && options.jsonFilters
    && options.jsonFilters[0] as any
) as IAdvancedFilter;

filter Jeśli obiekt nie ma wartości null, wizualizacja przywraca warunki filtrowania z obiektu:

const jsonFilters: AdvancedFilter = this.options.jsonFilters as AdvancedFilter[];

if (jsonFilters
    && jsonFilters[0]
    && jsonFilters[0].conditions
    && jsonFilters[0].conditions[0]
    && jsonFilters[0].conditions[1]
) {
    const startDate: Date = new Date(`${jsonFilters[0].conditions[0].value}`);
    const endDate: Date = new Date(`${jsonFilters[0].conditions[1].value}`);

    // apply restored conditions
} else {
    // apply default settings
}

Następnie wizualizacja zmienia swój stan wewnętrzny, aby odpowiadać bieżącym warunkom. Stan wewnętrzny obejmuje punkty danych i obiekty wizualizacji (linie, prostokąty itd.).

Wizualizacja Fragmentatora osi czasu zmienia selektor zakresu na odpowiadające zakresy danych.

Zapisywanie stanu filtru wizualizacji

Oprócz zapisywania warunków filtru dla zakładki można również zapisać inne aspekty filtru.

Na przykład fragmentator osi czasu przechowuje wartości właściwości w formie stanu filtru. Umożliwia ona zmianę szczegółowości osi czasu (dni, miesięcy, lat itp.) podczas zmieniania zakładek.

Właściwość filterState zapisuje aspekt filtru jako właściwość. Wizualizacja może przechowywać różne filterState wartości w zakładkach.

Aby zapisać wartość właściwości jako stan filtru, ustaw właściwość obiektu w taki sposób, jak "filterState": true w pliku capabilities.json .

Powiązana zawartość

• Co to są zakładki
• Tworzenie zakładek w raportach pulpitu