Compartir a través de

Dar formato a las propiedades visuales

  • Artículo

Al editar un informe en Power BI, puede personalizar cada objeto visual del informe mediante la opción Formato de en el panel Visualizaciones. Puede personalizar muchos elementos de cada visualización, como título, leyenda, fondo e información sobre herramientas. Con las API de creación de informes de Power BI, puede recuperar, establecer o restablecer las propiedades visuales mediante programación, sin necesidad de power BI editar modo.

Para dar formato a un objeto visual mediante las API de propiedades visuales, debe obtener el objeto visual al que le gustaría dar formato. Para obtener una lista de todos los objetos visuales de un informe, use el método getVisuals de la clase Page.

Selección del objeto de formato y la propiedad

Para seleccionar la propiedad que desea recuperar, establecer o restablecer, debe definir una instancia de IVisualPropertySelector que incluya un objectName y un propertyName.

export interface IVisualPropertySelector {
  objectName: string;
  propertyName: string;
}
  • objectName: el nombre del objeto (por ejemplo: "title").
  • propertyName: el nombre de la propiedad dentro del objeto (por ejemplo: "titleText").

Propiedades disponibles para objetos visuales predefinidos

Los objetos visuales predefinidos son objetos visuales de Power BI que aparecen en el panel visualización de de forma predeterminada.

Nombre del objeto Nombre de propiedad Tipo
información sobre herramientas
visible Booleano
valueColor Color hexadecimal, IThemeColorProperty
labelColor Color hexadecimal, IThemeColorProperty
textSize Número
fontFamily Cuerda
backgroundColor Color hexadecimal, IThemeColorProperty
transparencia Número
fondo
visible Booleano
Color Color hexadecimal, IThemeColorProperty
transparencia Número
visualHeader
visible Booleano
backgroundColor Color hexadecimal, IThemeColorProperty
frontera Color hexadecimal, IThemeColorProperty
transparencia Número
iconColor Color hexadecimal, IThemeColorProperty
frontera
visible Booleano
Color Color hexadecimal, IThemeColorProperty
radio Número
lockAspect
Habilitado Booleano
título
visible Booleano
alineación String (TextAlignment)
fontColor Color hexadecimal, IThemeColorProperty
textSize Número
fontFamily Cuerda
backgroundColor Color hexadecimal, IThemeColorProperty
titleText Cuerda
leyenda
visible Booleano
posición String (LegendPosition)
dataLabels
visible Booleano
categoryAxis
visible Booleano
valueAxis
visible Booleano

Propiedades disponibles para objetos visuales personalizados

Los creadores visuales personalizados definen sus propiedades, por lo tanto, para buscar el objectName y propertyName, debe comprobar el código fuente del objeto visual personalizado. El código de objetos visuales personalizados es de código abierto y sus repositorios se pueden encontrar en GitHub.

Por ejemplo: si examina el objeto visual personalizado gráfico de Mekko, puede encontrar el repositorio de código abierto aquí. En el archivo src/visual.ts, puede ver las propiedades de definidas.

A continuación se enumeran las propiedades definidas del objeto visual personalizado gráfico mekko.

Nota

Esta lista se copió del Mekko Chart código fuente del objeto visual personalizado en enero de 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

No se admite el objeto dataPoint.

Definición del valor de propiedad

El valor de la propiedad se representa mediante un objeto IVisualPropertyValue.

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

  • de esquema: define el tipo del valor. Hay dos esquemas disponibles:

    • Esquema de propiedades: "http://powerbi.com/product/schema#property" se usa para definir una propiedad.

    • Esquema predeterminado: "http://powerbi.com/product/schema#default" se usa para definir un valor predeterminado.

  • valor: el valor que desea asignar a la propiedad .

Tipos de valor de propiedad

En esta sección se enumeran los tipos de valor de propiedad que puede configurar.

Valor de la propiedad Color

Un valor de propiedad de color puede ser un color hexadecimal (cadena), por ejemplo, #0000FF para el color azul o un IThemeColorProperty para establecer un tema de informe de color.

interface IThemeColorProperty {
  id: number;
  shade: number;
}
  • id.: identificador del color del tema
  • sombreado: define el porcentaje del tono de color, los valores pueden ser de -1 a 1.

Por ejemplo, para definir color de tema 2, 50% más oscuro, como se muestra a continuación, el objeto IThemeColorProperty debe definirse de la siguiente manera:

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

Captura de pantalla que muestra una ventana de colores de tema de Power BI.

Valor de propiedad de alineación de texto

Define la alineación del texto.

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

Valor de propiedad de posición de leyenda

Define la posición de la leyenda en el objeto visual.

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

Valor de propiedad predeterminado

Valor que se usa para definir el valor predeterminado de la propiedad. Por ejemplo, puede establecer el título en el título generado automáticamente del objeto visual.

interface IDefaultProperty {
}

Si no se cambió una propiedad (mediante la interfaz de usuario o la API), su valor se define como IDefaultProperty, tanto en el getProperty como en los métodos setProperty.

El valor de propiedad predeterminado debe definirse de la siguiente manera:

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

API de propiedades

En esta sección se enumeran las API que se usan para dar formato a las propiedades visuales.

Recuperación de una propiedad

Recupere un valor de propiedad de un objeto visual según el selector de propiedades.

getProperty(selector: IVisualPropertySelector): Promise<IVisualPropertyValue>

Por ejemplo:

const selector = { ... };

let propertyValue = await visual.getProperty(selector);

Establecimiento de una propiedad

Establezca un valor de propiedad en un objeto visual según el selector de propiedades.

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

Por ejemplo:

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

await visual.setProperty(selector, propertyValue);

Restablecer una propiedad

Restablezca un valor de propiedad de un objeto visual según el selector de propiedades, lo que devolverá la propiedad a su valor predeterminado, por ejemplo, puede establecer el título en el título generado automáticamente del objeto visual.

resetProperty(selector: IVisualPropertySelector): Promise<void>

Por ejemplo:

const selector = { ... };

await visual.resetProperty(selector);

Ejemplo completo

A continuación puede ver un ejemplo de alineación con el centro del título del objeto visual con el nombre VisualContainer1 (identificador único).

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

Contenido relacionado