Bagikan melalui

Tutorial: Menambahkan opsi pemformatan ke visual Kartu Lingkaran

Saat membuat visual, Anda dapat menambahkan opsi untuk menyesuaikan propertinya. Beberapa item yang dapat dikustomisasi diformat meliputi:

  • Judul
  • Latar belakang
  • Batas
  • Bayangan
  • Warna

Dalam tutorial ini, Anda akan mempelajari cara:

  • Tambahkan properti pemformatan ke visual Anda.
  • Mengemas visualnya
  • Mengimpor visual kustom ke laporan Power BI Desktop atau Layanan

Prasyarat

Tutorial ini menjelaskan cara menambahkan properti pemformatan umum ke visual. Kita akan menggunakan visual Kartu lingkaran sebagai contoh. Kita akan menambahkan kemampuan untuk mengubah warna dan ketebalan lingkaran. Jika Anda tidak memiliki folder proyek kartu Lingkaran yang Anda buat dalam tutorial tersebut, ulangi tutorial sebelum melanjutkan.

Menambahkan opsi pemformatan

  1. Di PowerShell, Navigasi ke folder proyek kartu lingkaran Anda dan mulai visual kartu lingkaran. Visual Anda sekarang berjalan saat sedang dihosting di komputer Anda.

    pbiviz start

  2. Di Power BI, pilih panel Format.

    Anda akan melihat opsi pemformatan umum, tetapi tidak ada opsi pemformatan visual.

    Screenshot of formatting panel with only general formatting options.

  3. Di Visual Studio Code, buka file capabilities.json.

  4. Sebelum array dataViewMappings, tambahkan objek.

    "objects": {},

    Screenshot of capabilities file with empty objects array.

  5. Simpan file capabilities.json.

  6. Di Power BI, tinjau lagi opsi pemformatan.

    Catatan

    Jika Anda tidak melihat opsi pemformatan berubah, pilih Muat Ulang Visual Kustom.

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

  7. Atur opsi Judul ke Nonaktif. Perhatikan bahwa visual tidak lagi menampilkan nama pengukuran di sudut kiri atas.

    Screenshot of visualizations pane with the Title switch turned off.

    Screenshot of circle card visual without the title row.

Menambahkan opsi pemformatan kustom

Sekarang mari kita tambahkan grup baru yang disebut warna untuk mengonfigurasi warna lingkaran dan ketebalan kerangka lingkaran.

  1. Di PowerShell, masukkan Ctrl+C untuk menghentikan visual kustom.

  2. Dalam Visual Studio Code, dalam file capabilities.json, sisipkan fragmen JSON berikut ke dalam objek berlabel objek.

        "circle": {
        "properties": {
            "circleColor": {
                "type": {
                    "fill": {
                        "solid": {
                            "color": true
                        }
                    }
                }
            },
            "circleThickness": {
                "type": {
                    "numeric": true
                }
            }
        }
    }

    Fragmen JSON ini menjelaskan grup yang disebut lingkaran, yang terdiri dari dua variabel - circleColor dan circleThickness.

  3. Simpan file capabilities.json.

  4. Di panel Explorer, buka folder src, lalu pilih settings.ts. File ini mewakili pengaturan untuk visual pemula.

  5. settings.ts Dalam file, ganti baris impor dan dua kelas dengan kode berikut.

    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];
}

    Modul ini mendefinisikan dua kelas. Kelas Circle Pengaturan menentukan dua properti dengan nama yang cocok dengan objek yang ditentukan dalam file capabilities.json (circleColor dan circleThickness) dan mengatur nilai default. Kelas Visual Pengaturan menentukan objek lingkaran sesuai dengan properti yang dijelaskan dalam capabilities.json file.

  6. Simpan file settings.ts.

  7. Buka file visual.ts.

  8. visual.ts Dalam file, impor :

    import { VisualSettings } from "./settings";
import { FormattingSettingsService } from "powerbi-visuals-utils-formattingmodel";

    dan di kelas Visual tambahkan properti berikut:

    private visualSettings: VisualSettings;
private formattingSettingsService: FormattingSettingsService;

    Properti ini menyimpan referensi ke objek VisualSettings, yang menjelaskan pengaturan visual.

  9. Di kelas Visual, sisipkan yang berikut ini sebagai baris pertama konstruktor:

    this.formattingSettingsService = new FormattingSettingsService();

  10. Di kelas Visual, tambahkan metode berikut setelah metode pembaruan.

    public getFormattingModel(): powerbi.visuals.FormattingModel {
    return this.formattingSettingsService.buildFormattingModel(this.visualSettings);
}

    Fungsi ini dipanggil pada setiap render panel pemformatan. Ini memungkinkan Anda memilih objek dan properti mana yang ingin Anda ekspos ke pengguna di panel properti.

  11. Di metode pembaruan, setelah deklarasi variabel radius, tambahkan kode berikut.

    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);

    Kode ini mengambil opsi format. Ini menyesuaikan nilai apa pun yang diteruskan ke properti circleThickness , dan mengonversinya menjadi angka antara nol dan 10.

    Screenshot of setting circle thickness to between zero and 10.

  12. Di elemen lingkaran, ubah nilai yang diteruskan ke gaya isian dan gaya lebar goresan sebagai berikut:

    .style("fill", this.visualSettings.circle.circleColor.value.value)

    .style("stroke-width", this.visualSettings.circle.circleThickness.value)

    Screenshot of circle elements.

  13. Simpan file visual.ts.

  14. Di PowerShell, mulai visual.

    pbiviz start

  15. Di Power BI, di toolbar yang mengambang di atas visual, pilih Alihkan Muat Ulang Otomatis.

    Screenshot of Toggle Auto Reload icon.

  16. Di opsi format visual, perluas Lingkaran.

    Screenshot of the final circle card visuals format pane elements.

    Ubah opsi warna dan ketebalan.

Ubah opsi ketebalan menjadi nilai kurang dari nol, dan nilai yang lebih tinggi dari 10. Kemudian perhatikan visual memperbarui nilai ke minimum atau maksimum yang dapat ditoleransi.

Awakutu

Untuk tips tentang penelusuran kesalahan visual kustom Anda, lihat panduan penelusuran kesalahan.

Mengemas visual kustom

Sekarang setelah visual selesai dan siap digunakan, saatnya untuk mengemasnya. Visual yang dipaketkan dapat diimpor ke layanan atau laporan Power BI yang akan digunakan dan dinikmati oleh orang lain.

Saat visual Anda siap, ikuti petunjuk dalam Mengemas visual Power BI lalu, jika Anda mau, bagikan dengan orang lain sehingga mereka dapat mengimpor dan menikmatinya.

Konten terkait