Udostępnij za pośrednictwem

Formatowanie właściwości wizualizacji

  • Artykuł

Podczas edytowania raportu w usłudze Power BI możesz dostosować każdą wizualizację w raporcie przy użyciu opcji Format w okienku Wizualizacje . Możesz dostosować wiele elementów każdej wizualizacji, takich jak tytuł, legenda, tło i etykietka narzędzia. Za pomocą interfejsów API tworzenia raportów usługi Power BI można programowo pobierać, ustawiać lub resetować właściwości wizualizacji bez konieczności edytowania trybu usługi Power BI.

Aby sformatować wizualizację przy użyciu interfejsów API właściwości wizualizacji, musisz uzyskać wizualizację, którą chcesz sformatować. Aby uzyskać listę wszystkich wizualizacji w raporcie, użyj metody getVisuals klasy Page.

Wybieranie obiektu i właściwości formatu

Aby wybrać właściwość, którą chcesz pobrać, ustawić lub zresetować, należy zdefiniować wystąpienie IVisualPropertySelector zawierające objectName i propertyName.

export interface IVisualPropertySelector {
  objectName: string;
  propertyName: string;
}
  • objectName: nazwa obiektu (na przykład: "title").
  • propertyName: nazwa właściwości w obiekcie (na przykład: "titleText").

Dostępne właściwości dla wbudowanych wizualizacji

Wizualizacje gotowe do użycia to wizualizacje usługi Power BI, które są domyślnie wyświetlane w okienku Wizualizacja.

Nazwa obiektu Nazwa właściwości Typ
etykietka narzędzia
widoczny Boolowski
valueColor Kolor szesnastkowy, IThemeColorProperty
labelColor Kolor szesnastkowy, IThemeColorProperty
textSize Numer
fontFamily Struna
backgroundColor Kolor szesnastkowy, IThemeColorProperty
przezroczystość Numer
tło
widoczny Boolowski
Kolor Kolor szesnastkowy, IThemeColorProperty
przezroczystość Numer
visualHeader
widoczny Boolowski
backgroundColor Kolor szesnastkowy, IThemeColorProperty
granica Kolor szesnastkowy, IThemeColorProperty
przezroczystość Numer
iconColor Kolor szesnastkowy, IThemeColorProperty
granica
widoczny Boolowski
Kolor Kolor szesnastkowy, IThemeColorProperty
promień Numer
lockAspect
Włączone Boolowski
tytuł
widoczny Boolowski
wyrównanie Ciąg (TextAlignment)
fontColor Kolor szesnastkowy, IThemeColorProperty
textSize Numer
fontFamily Struna
backgroundColor Kolor szesnastkowy, IThemeColorProperty
titleText Struna
legenda
widoczny Boolowski
pozycja Ciąg (LegendPosition)
dataLabels
widoczny Boolowski
categoryAxis
widoczny Boolowski
valueAxis
widoczny Boolowski

Dostępne właściwości wizualizacji niestandardowych

Twórcy wizualizacji niestandardowych definiują zatem ich właściwości, aby znaleźć objectName i propertyName, należy sprawdzić kod źródłowy wizualizacji niestandardowej. Kod wizualizacji niestandardowych jest typu open source, a ich repozytoria można znaleźć w witrynie GitHub.

Na przykład: patrząc na wizualizację niestandardową wykres Mekko Chart, możesz znaleźć repozytorium open source tutaj. W pliku src/visual.ts można zobaczyć zdefiniowane właściwości .

Poniżej przedstawiono wykresu Mekko Chart zdefiniowanych właściwości wizualizacji niestandardowej.

Nuta

Ta lista została skopiowana z wykresu Mekko kodu źródłowego wizualizacji niestandardowej w styczniu 2021 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" },
    }
};

Nuta

Obiekt dataPoint nie jest obsługiwany.

Definiowanie wartości właściwości

Wartość właściwości jest reprezentowana przez obiekt IVisualPropertyValue.

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

  • schematu — definiuje typ wartości. Dostępne są dwa schematy:

    • Schemat właściwości: "http://powerbi.com/product/schema#property" używany do definiowania właściwości.

    • Schemat domyślny: "http://powerbi.com/product/schema#default" służy do definiowania wartości domyślnej.

  • wartość — wartość, którą chcesz przypisać do właściwości.

Typy wartości właściwości

W tej sekcji wymieniono typy wartości właściwości, które można skonfigurować.

Wartość właściwości Color

Wartość właściwości koloru może być kolorem szesnastkowym (ciągiem), na przykład #0000FF koloru niebieskiego lub IThemeColorProperty, aby ustawić motyw raportu kolor.

interface IThemeColorProperty {
  id: number;
  shade: number;
}
  • identyfikator — identyfikator koloru motywu
  • cieniowanie — definiuje procent cienia koloru, wartości mogą należeć do -1 do 1.

Aby na przykład zdefiniować kolor motywu 2, 50% ciemniejszy, jak pokazano poniżej, obiekt IThemeColorProperty należy zdefiniować w następujący sposób:

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

Zrzut ekranu przedstawiający okno kolorów motywu usługi Power BI.

Wartość właściwości wyrównania tekstu

Definiuje wyrównanie tekstu

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

Wartość właściwości pozycji legendy

Definiuje położenie legendy w wizualizacji

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

Wartość właściwości domyślnej

Wartość używana do definiowania wartości domyślnej właściwości. Możesz na przykład ustawić tytuł na automatycznie wygenerowany tytuł wizualizacji.

interface IDefaultProperty {
}

Jeśli właściwość nie została zmieniona (przy użyciu interfejsu użytkownika lub interfejsu API), jego wartość jest zdefiniowana jako IDefaultProperty, zarówno w getProperty, jak i metodach setProperty.

Wartość właściwości domyślnej powinna być zdefiniowana w następujący sposób:

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

Interfejsy API właściwości

W tej sekcji wymieniono interfejsy API używane do formatowania właściwości wizualizacji.

Pobieranie właściwości

Pobierz wartość właściwości wizualizacji zgodnie z selektorem właściwości.

getProperty(selector: IVisualPropertySelector): Promise<IVisualPropertyValue>

Na przykład:

const selector = { ... };

let propertyValue = await visual.getProperty(selector);

Ustawianie właściwości

Ustaw wartość właściwości na wizualizację zgodnie z selektorem właściwości.

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

Na przykład:

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

await visual.setProperty(selector, propertyValue);

Resetowanie właściwości

Zresetuj wartość właściwości wizualizacji zgodnie z selektorem właściwości. Spowoduje to zwrócenie właściwości do jej wartości domyślnej, na przykład można ustawić tytuł na automatycznie wygenerowany tytuł wizualizacji.

resetProperty(selector: IVisualPropertySelector): Promise<void>

Na przykład:

const selector = { ... };

await visual.resetProperty(selector);

Pełny przykład

Poniżej przedstawiono przykład wyrównania do środka tytułu wizualizacji o nazwie VisualContainer1 (unikatowy identifer).

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

Powiązana zawartość