Bagikan melalui

Memformat properti visual

Saat mengedit laporan di Power BI, Anda bisa mengkustomisasi setiap visual dalam laporan dengan menggunakan opsi Format di panel Visualisasi . Anda dapat menyesuaikan banyak elemen dari setiap visualisasi, seperti judul, legenda, latar belakang, dan tipsalat. Dengan API penulisan laporan Power BI, Anda dapat mengambil, mengatur, atau mereset properti visual secara terprogram, tanpa perlu Power BI Edit mode.

Untuk memformat visual menggunakan API properti visual, Anda perlu mendapatkan visual yang ingin Anda format. Untuk mendapatkan daftar semua visual dalam laporan, gunakan metode getVisuals dari kelas .

Memilih objek format dan properti

Untuk memilih properti yang ingin Anda ambil, atur, atau atur ulang, Anda perlu menentukan instans IVisualPropertySelector yang mencakup objectName dan propertyName.

export interface IVisualPropertySelector {
  objectName: string;
  propertyName: string;
}
  • objectName: nama objek (misalnya: "judul").
  • propertyName: nama properti dalam objek (misalnya: "titleText").

Properti yang tersedia untuk visual di luar kotak

Visual di luar kotak adalah visual Power BI yang muncul di panel Visualisasi secara default.

Nama objek Nama properti Jenis
tipsalat
terlihat Boolean
valueColor Warna heks, IThemeColorProperty
labelColor Warna heks, IThemeColorProperty
textSize Angka
fontFamily Tali
backgroundColor Warna heks, IThemeColorProperty
transparansi Angka
latar
terlihat Boolean
warna Warna heks, IThemeColorProperty
transparansi Angka
visualHeader
terlihat Boolean
backgroundColor Warna heks, IThemeColorProperty
batas Warna heks, IThemeColorProperty
transparansi Angka
iconColor Warna heks, IThemeColorProperty
batas
terlihat Boolean
warna Warna heks, IThemeColorProperty
radius Angka
lockAspect
Diaktifkan Boolean
titel
terlihat Boolean
Alignment String (TextAlignment)
fontColor Warna heks, IThemeColorProperty
textSize Angka
fontFamily Tali
backgroundColor Warna heks, IThemeColorProperty
titleText Tali
legenda
terlihat Boolean
posisi String (LegendPosisi)
dataLabels
terlihat Boolean
categoryAxis
terlihat Boolean
valueAxis
terlihat Boolean

Properti yang Tersedia untuk visual kustom

Oleh karena itu, pembuat visual kustom menentukan propertinya untuk menemukan objectName dan propertyName, Anda harus memeriksa kode sumber visual kustom. Kode visual kustom bersumber terbuka, dan repositorinya dapat ditemukan di GitHub.

Misalnya: melihat visual kustom Bagan Mekko, Anda dapat menemukan repositori sumber terbuka di sini. Dalam file src/visual.ts, Anda dapat melihat Properti yang ditentukan.

Bagan Mekko properti visual kustom yang ditentukan tercantum di bawah ini.

Nota

Daftar ini disalin dari Mekko Chart kode sumber visual kustom pada Januari 2021.

public static Properties: MekkoChartProperties = <MekkoChartProperties>{
    dataPoint: {
        defaultColor: { objectName: "dataPoint", propertyName: "defaultColor" },
        fill: { objectName: "dataPoint", propertyName: "fill" },
        showAllDataPoints: { objectName: "dataPoint", propertyName: "showAllDataPoints" },
        categoryGradient: { objectName: "dataPoint", propertyName: "categoryGradient" },
        colorGradientEndColor: { objectName: "dataPoint", propertyName: "colorGradientEndColor" },
        colorDistribution: { objectName: "dataPoint", propertyName: "colorDistribution" }
    },
    columnBorder: {
        show: { objectName: "columnBorder", propertyName: "show", },
        color: { objectName: "columnBorder", propertyName: "color" },
        width: { objectName: "columnBorder", propertyName: "width" }
    },
    sortSeries: {
        enabled: { objectName: "sortSeries", propertyName: "enabled", },
        direction: { objectName: "sortSeries", propertyName: "direction" },
        displayPercents: { objectName: "sortSeries", propertyName: "displayPercents" }
    },
    sortLegend: {
        enabled: { objectName: "sortLegend", propertyName: "enabled", },
        direction: { objectName: "sortLegend", propertyName: "direction" },
        groupByCategory: { objectName: "sortLegend", propertyName: "groupByCategory" },
        groupByCategoryDirection: { objectName: "sortLegend", propertyName: "groupByCategoryDirection" }
    },
    xAxisLabels: {
        enableRotataion: { objectName: "xAxisLabels", propertyName: "enableRotataion", },
    },
    categoryColors: {
        color: { objectName: "categoryColors", propertyName: "color" },
    }
};

Nota

Objek dataPoint tidak didukung.

Menentukan nilai properti

Nilai properti diwakili oleh objek IVisualPropertyValue.

export interface IVisualPropertyValue {
  schema?: string;
  value: any;
}

  • skema - Menentukan jenis nilai. Ada dua skema yang tersedia:

    • Skema properti: "http://powerbi.com/product/schema#property" digunakan untuk menentukan properti.

    • Skema default: "http://powerbi.com/product/schema#default" digunakan untuk menentukan nilai default.

  • nilai - Nilai yang ingin Anda tetapkan ke properti .

Jenis nilai properti

Bagian ini mencantumkan jenis nilai properti yang bisa Anda konfigurasi.

Nilai properti warna

Nilai properti warna dapat berupa warna heksa (string), misalnya, #0000FF untuk warna biru, atau IThemeColorProperty untuk mengatur tema laporan warna.

interface IThemeColorProperty {
  id: number;
  shade: number;
}
  • id - Id warna tema
  • bayangan - Menentukan persentase warna bayangan, nilainya bisa dari -1 hingga 1.

Misalnya, untuk menentukan warna Tema 2, 50% lebih gelap, seperti yang terlihat di bawah ini, objek IThemeColorProperty harus didefinisikan sebagai berikut:

let themeColorProperty = {
    id: 2,
  shade: -0.5
};

Cuplikan layar yang memperlihatkan jendela warna tema Power B I.

Nilai properti perataan teks

Menentukan perataan teks

const TextAlignment = {
    Left: 'left',
    Center: 'center',
    Right: 'right',
};

Nilai properti posisi legenda

Menentukan posisi legenda pada visual

const LegendPosition = {
    Top: 'Top',
    Bottom: 'Bottom',
    Right: 'Right',
    Left: 'Left',
    TopCenter: 'TopCenter',
    BottomCenter: 'BottomCenter',
    RightCenter: 'RightCenter',
    LeftCenter: 'LeftCenter',
};

Nilai properti default

Nilai yang digunakan untuk menentukan nilai default properti. Misalnya, Anda dapat mengatur judul ke judul visual yang dihasilkan secara otomatis.

interface IDefaultProperty {
}

Jika properti tidak diubah (menggunakan UI atau API), nilainya didefinisikan sebagai IDefaultProperty, baik pada metode getProperty maupun setProperty.

Nilai properti default harus didefinisikan sebagai berikut:

const defaultValue = {
    schema: "http://powerbi.com/product/schema#default",
    value: {}
};

API Properti

Bagian ini mencantumkan API yang digunakan untuk memformat properti visual.

Mengambil properti

Ambil nilai properti visual sesuai dengan pemilih properti.

getProperty(selector: IVisualPropertySelector): Promise<IVisualPropertyValue>

Misalnya:

const selector = { ... };

let propertyValue = await visual.getProperty(selector);

Mengatur properti

Atur nilai properti ke visual sesuai dengan pemilih properti.

setProperty(selector: IVisualPropertySelector, value: IVisualPropertyValue): Promise<void>

Misalnya:

const selector = { ... };
const propertyValue = { ... };

await visual.setProperty(selector, propertyValue);

Mereset properti

Atur ulang nilai properti visual menurut pemilih properti, ini akan mengembalikan properti ke nilai defaultnya, misalnya, Anda dapat mengatur judul ke judul visual yang dihasilkan secara otomatis.

resetProperty(selector: IVisualPropertySelector): Promise<void>

Misalnya:

const selector = { ... };

await visual.resetProperty(selector);

Contoh lengkap

Di bawah ini Anda dapat melihat contoh penyelarasan ke tengah judul visual dengan nama VisualContainer1 (pengidentifikasi unik).

let pages = await report.getPages()

// Retrieve the active page.
let activePage = pages.find(function (page) {
    return page.isActive
});

let visuals = await activePage.getVisuals();

// Retrieve the wanted visual. (replace "VisualContainer1" with the requested visual name)
let visual = visuals.find(function (visual) {
    return visual.name === "VisualContainer1";
});

// Build a selector for title alignment
const selector = { 
    objectName: "title",
    propertyName: "alignment"
};

// Build the property value
const propertyValue = {
    schema: "http://powerbi.com/product/schema#property",
    value: models.TextAlignment.Center
};

await visual.setProperty(selector, propertyValue);

Konten terkait

  • Last updated on