Dodawanie strony docelowej do wizualizacji usługi Power BI
Strona docelowa wizualizacji usługi Power BI może wyświetlać informacje na karcie wizualizacji usługi Power BI, zanim karta pobierze dane. Strona docelowa wizualizacji może być wyświetlana:
- Tekst wyjaśniający sposób używania wizualizacji.
- Link do witryny internetowej.
- Link do wideo.
W tym artykule wyjaśniono, jak zaprojektować stronę docelową wizualizacji. Strona docelowa jest wyświetlana za każdym razem, gdy wizualizacja nie ma w niej żadnych danych.
Uwaga
Projektowanie strony docelowej wizualizacji usługi Power BI jest obsługiwane w interfejsie API w wersji 2.3.0 lub nowszej. Aby dowiedzieć się, której wersji używasz, sprawdź apiVersion plik pbiviz.json .
Tworzenie strony docelowej
Aby utworzyć stronę docelową, w pliku muszą być ustawione capabilities.json dwie możliwości.
- Aby strona docelowa działała, włącz polecenie
supportsLandingPage. - Aby strona docelowa była wyświetlana w trybie wyświetlania lub aby wizualizacja była interaktywna nawet wtedy, gdy nie ma trybu ról danych, włącz opcję
supportsEmptyDataView.
{
"supportsLandingPage": true,
"supportsEmptyDataView": true,
}
Przykład wizualizacji ze stroną docelową
Poniższy kod pokazuje, jak można dodać stronę docelową do wizualizacji wykresu słupkowego.
export class BarChart implements IVisual {
//...
private element: HTMLElement;
private isLandingPageOn: boolean;
private LandingPageRemoved: boolean;
private LandingPage: d3.Selection<any>;
constructor(options: VisualConstructorOptions) {
//...
this.element = options.element;
//...
}
public update(options: VisualUpdateOptions) {
//...
this.HandleLandingPage(options);
}
private HandleLandingPage(options: VisualUpdateOptions) {
if(!options.dataViews || !options.dataViews[0]?.metadata?.columns?.length){
if(!this.isLandingPageOn) {
this.isLandingPageOn = true;
const SampleLandingPage: Element = this.createSampleLandingPage(); //create a landing page
this.element.appendChild(SampleLandingPage);
this.LandingPage = d3.select(SampleLandingPage);
}
} else {
if(this.isLandingPageOn && !this.LandingPageRemoved){
this.LandingPageRemoved = true;
this.LandingPage.remove();
}
}
}