Share via

Samouczek: dodawanie opcji formatowania do wizualizacji Circle Card

  • Artykuł

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

  1. W programie PowerShell przejdź do folderu projektu circle card i uruchom wizualizację circle card. Wizualizacja jest teraz uruchomiona podczas hostowania na komputerze.

    pbiviz start

  2. W usłudze Power BI wybierz panel Format.

    Powinny zostać wyświetlone ogólne opcje formatowania, ale nie żadne opcje formatowania wizualizacji.

    Screenshot of formatting panel with only general formatting options.

  3. W programie Visual Studio Code otwórz capabilities.json plik.

  4. Przed tablicą dataViewMappings dodaj obiekty.

    "objects": {},

    Screenshot of capabilities file with empty objects array.

  5. Zapisz plik capabilities.json.

  6. W usłudze Power BI ponownie przejrzyj opcje formatowania.

    Uwaga

    Jeśli nie widzisz zmiany opcji formatowania, wybierz pozycję Załaduj ponownie wizualizację niestandardową.

    Screenshot of general and visual formatting options on the formatting pane.

  7. Ustaw opcję Tytuł na Wył. Zwróć uwagę, że wizualizacja nie wyświetla już nazwy miary w lewym górnym rogu.

    Screenshot of visualizations pane with the Title switch turned off.

    Screenshot of circle card visual without the title row.

Dodawanie niestandardowych opcji formatowania

Teraz dodajmy nową grupę o nazwie color do konfigurowania koloru okręgu i grubości konturu okręgu.

  1. W programie PowerShell wprowadź klawisze Ctrl+C, aby zatrzymać wizualizację niestandardową.

  2. 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.

  3. Zapisz plik capabilities.json.

  4. W okienku Eksplorator przejdź do folderu src, a następnie wybierz pozycję settings.ts. Ten plik reprezentuje ustawienia wizualizacji początkowej.

  5. 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.

  6. Zapisz plik settings.ts.

  7. Otwórz plik visual.ts.

  8. 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.

  9. W klasie Visual wstaw następujący wiersz jako pierwszy wiersz konstruktora:

    this.formattingSettingsService = new FormattingSettingsService();

  10. 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.

  11. W metodzie update po deklaracji zmiennej radius dodaj następujący kod.

    this.visualSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualSettings, options.dataViews);
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.

    Screenshot of setting circle thickness to between zero and 10.

  12. 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)

    Screenshot of circle elements.

  13. Zapisz plik visual.ts.

  14. W programie PowerShell uruchom wizualizację.

    pbiviz start

  15. W usłudze Power BI na przestawnym pasku narzędzi nad wizualizacją wybierz pozycję Przełącz automatyczne ponowne ładowanie.

    Screenshot of Toggle Auto Reload icon.

  16. W opcjach formatu wizualizacji rozwiń węzeł Circle.

    Screenshot of the final circle card visuals format pane elements.

    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ą.

Powiązana zawartość