Aracılığıyla paylaş

Görsel özelliklerini biçimlendirme

Power BI'da bir raporu düzenlerken, Görselleştirmeler bölmesindeki Biçim seçeneğini kullanarak rapordaki her görseli özelleştirebilirsiniz. Her görselleştirmenin başlık, gösterge, arka plan ve araç ipucu gibi birçok öğesini özelleştirebilirsiniz. Power BI rapor yazma API'leriyle, Power BI Düzenleme moduna gerek kalmadan görsel özelliklerini program aracılığıyla alabilir, ayarlayabilir veya sıfırlayabilirsiniz.

Görsel özellikleri API'lerini kullanarak bir görseli biçimlendirmek için, biçimlendirmek istediğiniz görseli almanız gerekir. Rapordaki tüm görsellerin listesini almak için sınıfının Page yöntemini kullanın.

Biçim nesnesini ve özelliğini seçme

Almak, ayarlamak veya sıfırlamak istediğiniz özelliği seçmek için, objectName ve propertyNameiçeren bir IVisualPropertySelector örneği tanımlamanız gerekir.

export interface IVisualPropertySelector {
  objectName: string;
  propertyName: string;
}
  • objectName: nesnenin adı (örneğin: "title").
  • propertyName: nesne içindeki özelliğin adı (örneğin: "titleText").

Kullanıma hazır görseller için kullanılabilir özellikler

Hazır görseller, varsayılan olarak Görselleştirme bölmesinde görünen Power BI görselleridir.

Nesne adı Özellik adı Tür
araç ipucu
Görünür Boolean
valueColor Onaltılık renk, IThemeColorProperty
labelColor Onaltılık renk, IThemeColorProperty
textSize Sayı
fontFamily Dizgi
backgroundColor Onaltılık renk, IThemeColorProperty
şeffaflık Sayı
arka plan
Görünür Boolean
Renk Onaltılık renk, IThemeColorProperty
şeffaflık Sayı
visualHeader
Görünür Boolean
backgroundColor Onaltılık renk, IThemeColorProperty
sınır Onaltılık renk, IThemeColorProperty
şeffaflık Sayı
iconColor Onaltılık renk, IThemeColorProperty
sınır
Görünür Boolean
Renk Onaltılık renk, IThemeColorProperty
yarıçap Sayı
lockAspect
Etkin Boolean
başlık
Görünür Boolean
Hizalama Dize (TextAlignment)
fontColor Onaltılık renk, IThemeColorProperty
textSize Sayı
fontFamily Dizgi
backgroundColor Onaltılık renk, IThemeColorProperty
titleText Dizgi
efsane
Görünür Boolean
konum Dize (LegendPosition)
dataLabels
Görünür Boolean
categoryAxis
Görünür Boolean
valueAxis
Görünür Boolean

Özel görseller için Kullanılabilir Özellikler

Özel görsel oluşturucular özelliklerini tanımlar, bu nedenle objectName ve propertyNamebulmak için özel görsel kaynak kodunu denetlemeniz gerekir. Özel görsel kodu açık kaynaklıdır ve depoları GitHub'da bulunabilir.

Örneğin: Mekko Chartözel görsele baktığınızda, açık kaynak depoyu buradabulabilirsiniz. src/visual.ts dosyasında, tanımlanan Özelliklergörebilirsiniz.

Mekko Grafiği özel görselin tanımlı özellikleri aşağıda listelenmiştir.

Not

Bu liste, Ocak 2021'de özel görselin kaynak kodu Mekko Grafiği'nden kopyalanmıştır.

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" },
    }
};

Not

dataPoint nesnesi desteklenmiyor.

Özellik değerini tanımlama

Özellik değeri bir IVisualPropertyValue nesnesiyle temsil edilir.

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

  • şema - Değerin türünü tanımlar. Kullanılabilir iki şema vardır:

    • Özellik şeması: özelliği tanımlamak için kullanılan "http://powerbi.com/product/schema#property".

    • Varsayılan şema: varsayılan değeri tanımlamak için kullanılan "http://powerbi.com/product/schema#default".

  • değeri - Özelliğine atamak istediğiniz değerdir.

Özellik değeri türleri

Bu bölümde yapılandırabileceğiniz özellik değeri türleri listelenir.

Color özelliği değeri

Renk özelliği değeri, örneğin mavi renk için #0000FF onaltılık bir renk (dize) veya rapor teması renk ayarlamak için IThemeColorProperty olabilir.

interface IThemeColorProperty {
  id: number;
  shade: number;
}
  • kimliği - Tema renginin kimliği
  • gölge - Renk gölgesinin yüzdesini tanımlar, değerler -1'den 1'e kadar olabilir.

Örneğin, aşağıda gösterildiği gibi Tema rengi 2, 50% daha koyutanımlamak için, IThemeColorProperty nesnesi aşağıdaki gibi tanımlanmalıdır:

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

Power BI tema renkleri penceresini gösteren ekran görüntüsü.

Metin hizalama özelliği değeri

Metin hizalamasını tanımlar

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

Gösterge konumu özellik değeri

Görseldeki gösterge konumunu tanımlar

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

Varsayılan özellik değeri

Özellik varsayılan değerini tanımlamak için kullanılan değer. Örneğin, başlığı görselin otomatik olarak oluşturulan başlığına ayarlayabilirsiniz.

interface IDefaultProperty {
}

Bir özellik değiştirilmediyse (kullanıcı arabirimi veya API kullanılarak), değeri hem getProperty hem de setProperty yöntemlerinde IDefaultPropertyolarak tanımlanır.

Varsayılan özellik değeri aşağıdaki gibi tanımlanmalıdır:

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

Özellikler API'leri

Bu bölümde, görsel özellikleri biçimlendirmek için kullanılan API'ler listelenir.

Özellik alınıyor

Özellik seçiciye göre bir görselin özellik değerini alın.

getProperty(selector: IVisualPropertySelector): Promise<IVisualPropertyValue>

Mesela:

const selector = { ... };

let propertyValue = await visual.getProperty(selector);

Özellik ayarlama

Özellik seçiciye göre bir görsele özellik değeri ayarlayın.

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

Mesela:

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

await visual.setProperty(selector, propertyValue);

Özelliği sıfırlama

Özellik seçiciye göre bir görselin özellik değerini sıfırlarsanız, bu özellik varsayılan değerine döndürülecektir; örneğin, başlığı görselin otomatik olarak oluşturulan başlığına ayarlayabilirsiniz.

resetProperty(selector: IVisualPropertySelector): Promise<void>

Mesela:

const selector = { ... };

await visual.resetProperty(selector);

Tam örnek

Aşağıda, VisualContainer1 (benzersiz identifer) adıyla görselin başlığını ortaya hizalama örneğini görebilirsiniz.

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

İlgili içerik

  • Last updated on