Samouczek: dodawanie opcji formatowania do wizualizacji Circle Card
Podczas tworzenia wizualizacji można dodawać opcje dostosowywania jej właściwości. Niektóre elementy, które można dostosować, obejmują:
- Tytuł
- Tło
- Border
- W tle
- Kolory
Z tego samouczka dowiesz się, jak wykonywać następujące czynności:
- Dodaj właściwości formatowania do wizualizacji.
- Pakowanie wizualizacji
- Importowanie wizualizacji niestandardowej do raportu programu Power BI Desktop lub usługi
Warunek wstępny
W tym samouczku wyjaśniono, jak dodać wspólne właściwości formatowania do wizualizacji. Jako przykład użyjemy wizualizacji Circle Card . Dodamy możliwość zmiany koloru i grubości okręgu. Jeśli nie masz folderu projektu Circle Card utworzonego w tym samouczku, wykonaj ponownie samouczek przed kontynuowaniem.
Dodawanie opcji formatowania
W programie PowerShell przejdź do folderu projektu circle card i uruchom wizualizację circle card. Wizualizacja jest teraz uruchomiona podczas hostowania na komputerze.
pbiviz start
W usłudze Power BI wybierz panel Format.
Powinny zostać wyświetlone ogólne opcje formatowania, ale nie żadne opcje formatowania wizualizacji.
W programie Visual Studio Code otwórz
capabilities.json
plik.Przed tablicą dataViewMappings dodaj obiekty.
"objects": {},
Zapisz plik
capabilities.json
.W usłudze Power BI ponownie przejrzyj opcje formatowania.
Uwaga
Jeśli nie widzisz zmiany opcji formatowania, wybierz pozycję Załaduj ponownie wizualizację niestandardową.
Ustaw opcję Tytuł na Wył. Zwróć uwagę, że wizualizacja nie wyświetla już nazwy miary w lewym górnym rogu.
Dodawanie niestandardowych opcji formatowania
Teraz dodajmy nową grupę o nazwie color do konfigurowania koloru okręgu i grubości konturu okręgu.
W programie PowerShell wprowadź klawisze Ctrl+C, aby zatrzymać wizualizację niestandardową.
W programie Visual Studio Code w
capabilities.json
pliku wstaw następujący fragment JSON do obiektu oznaczonego obiektami."circle": { "properties": { "circleColor": { "type": { "fill": { "solid": { "color": true } } } }, "circleThickness": { "type": { "numeric": true } } } }
Ten fragment JSON opisuje grupę o nazwie circle, która składa się z dwóch zmiennych — circleColor i circleThickness.
Zapisz plik
capabilities.json
.W okienku Eksplorator przejdź do folderu src, a następnie wybierz pozycję settings.ts. Ten plik reprezentuje ustawienia wizualizacji początkowej.
settings.ts
W pliku zastąp wiersze importu i dwie klasy następującym kodem.import { formattingSettings } from "powerbi-visuals-utils-formattingmodel"; import FormattingSettingsCard = formattingSettings.SimpleCard; import FormattingSettingsSlice = formattingSettings.Slice; import FormattingSettingsModel = formattingSettings.Model; export class CircleSettings extends FormattingSettingsCard{ public circleColor = new formattingSettings.ColorPicker({ name: "circleColor", displayName: "Color", value: { value: "#ffffff" }, visible: true }); public circleThickness = new formattingSettings.NumUpDown({ name: "circleThickness", displayName: "Thickness", value: 2, visible: true }); public name: string = "circle"; public displayName: string = "Circle"; public visible: boolean = true; public slices: FormattingSettingsSlice[] = [this.circleColor, this.circleThickness] } export class VisualSettings extends FormattingSettingsModel { public circle: CircleSettings = new CircleSettings(); public cards: FormattingSettingsCard[] = [this.circle]; }
Ten moduł definiuje dwie klasy. Klasa Circle Ustawienia definiuje dwie właściwości o nazwach, które pasują do obiektów zdefiniowanych w pliku capabilities.json (circleColor i circleThickness) i ustawia wartości domyślne. Klasa Visual Ustawienia definiuje obiekt circle zgodnie z właściwościami opisanymi w
capabilities.json
pliku.Zapisz plik
settings.ts
.Otwórz plik
visual.ts
.W pliku zaimportuj
visual.ts
plik :import { VisualSettings } from "./settings"; import { FormattingSettingsService } from "powerbi-visuals-utils-formattingmodel";
i w klasie Visual dodaj następujące właściwości:
private visualSettings: VisualSettings; private formattingSettingsService: FormattingSettingsService;
Ta właściwość przechowuje odwołanie do obiektu Visual Ustawienia opisującego ustawienia wizualizacji.
W klasie Visual wstaw następujący wiersz jako pierwszy wiersz konstruktora:
this.formattingSettingsService = new FormattingSettingsService();
W klasie Visual dodaj następującą metodę po metodzie update.
public getFormattingModel(): powerbi.visuals.FormattingModel { return this.formattingSettingsService.buildFormattingModel(this.visualSettings); }
Ta funkcja jest wywoływana przy każdym renderowaniu okienka formatowania. Umożliwia wybranie obiektów i właściwości, które mają być widoczne dla użytkowników w okienku właściwości.
W metodzie update po deklaracji zmiennej radius dodaj następujący kod.
this.visualSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualSettings, options.dataViews[0]); this.visualSettings.circle.circleThickness.value = Math.max(0, this.visualSettings.circle.circleThickness.value); this.visualSettings.circle.circleThickness.value = Math.min(10, this.visualSettings.circle.circleThickness.value);
Ten kod pobiera opcje formatu. Dostosowuje dowolną wartość przekazaną do właściwości circleThickness i konwertuje ją na liczbę z zakresu od zera do 10.
W elemecie circle zmodyfikuj wartości przekazane do stylu wypełnienia i stylu szerokości pociągnięcia w następujący sposób:
.style("fill", this.visualSettings.circle.circleColor.value.value)
.style("stroke-width", this.visualSettings.circle.circleThickness.value)
Zapisz plik
visual.ts
.W programie PowerShell uruchom wizualizację.
pbiviz start
W usłudze Power BI na przestawnym pasku narzędzi nad wizualizacją wybierz pozycję Przełącz automatyczne ponowne ładowanie.
W opcjach formatu wizualizacji rozwiń węzeł Circle.
Zmodyfikuj opcję koloru i grubości .
Zmodyfikuj opcję grubości na wartość mniejszą niż zero i wartość wyższą niż 10. Następnie zwróć uwagę, że wizualizacja aktualizuje wartość do dopuszczalnej wartości minimalnej lub maksymalnej.
Debugowanie
Aby uzyskać porady dotyczące debugowania wizualizacji niestandardowej , zobacz przewodnik debugowania.
Pakowanie wizualizacji niestandardowej
Teraz, gdy wizualizacja została ukończona i gotowa do użycia, nadszedł czas, aby ją spakować. Spakowaną wizualizację można zaimportować do raportów lub usług usługi Power BI, które mają być używane i używane przez inne osoby.
Gdy wizualizacja jest gotowa, postępuj zgodnie z instrukcjami w temacie Pakowanie wizualizacji usługi Power BI, a następnie, jeśli chcesz, udostępnij ją innym osobom, aby mogli ją zaimportować i cieszyć się nią.