Udostępnij za pośrednictwem

Dodawanie obsługi zakładek do wizualizacji w raportach usługi Power BI

  • Artykuł

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.

Uwaga

Tworzenie wizualizacji obsługującej zakładki wymaga:

  • Interfejs API wizualizacji w wersji 1.11.0 lub nowszej dla wizualizacji niefiltrujących korzystających z programu SelectionManager.
  • Interfejs API wizualizacji w wersji 2.6.0 lub nowszej dla wizualizacji filtru.
  • Aby dowiedzieć się, której wersji używasz, sprawdź apiVersion plik pbiviz.json .

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 pozycję 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 zaznaczenia (lub filtr) jest przekazywany za pośrednictwem options.jsonFilters właściwości w metodzie update . Może jsonFilters to być wartość Advanced Filter lub Tuple Filter.

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

Wizualizacje z wyborem

Uwaga

InteractivityService została przestarzała.

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:

Użyj interakcyjnościUsługi , aby przywrócić wybrane zakładki — przestarzałe

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

Opcje zakładek można zapisać i odwołać przy użyciu ISelectionManager.registerOnSelectCallback metody 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.

Wygląda datapoints 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 punkty danych i tablicę ids przekazaną callback do funkcji.

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 zaznaczenia przechowywany w filter obiekcie. 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. startDate endDate Masz datę początkową i końcową zakresu.

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

Element docelowy jest tabelą używaną 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 stan wewnętrzny, aby odpowiadała bieżącym warunkom. Stan wewnętrzny obejmuje punkty danych i obiekty wizualizacji (linie, prostokąty itd.).

Wizualizacja Fragmentator osi czasu zmienia selektor zakresu na odpowiednie 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 Granularity wartości właściwości jako stan 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ść