Compartir a través de

Tutorial: Adición de opciones de formato al objeto visual Circle Card

  • Artículo

Al crear un objeto visual, puede agregar opciones para personalizar sus propiedades. Algunos de los elementos a los que se puede aplicar formato personalizado son los siguientes:

  • Título
  • Fondo
  • Frontera
  • Sombra
  • Colores

En este tutorial, aprenderá a:

  • Agregue propiedades de formato al objeto visual.
  • Empaquetar el objeto visual
  • Importar el objeto visual personalizado a un informe de Power BI Desktop o del servicio Power BI.

Prerrequisito

En este tutorial se explica cómo agregar propiedades de formato comunes a un objeto visual. Se usará el objeto visual Circle Card como ejemplo. Agregaremos la capacidad de cambiar el color y el grosor del círculo. Si no tiene la carpeta de proyecto Circle Card que ha creado en ese tutorial, repítalo antes de continuar.

Agregar opciones de formato

  1. En PowerShell, vaya a la carpeta del proyecto Circle card e inicie el objeto visual Circle card. Su objeto visual ahora se ejecuta mientras está hospedado en el equipo.

    pbiviz start

  2. En Power BI, seleccione el panel Formato.

    Debería ver las opciones de formato general, pero no las opciones de formato visual.

    Recorte de pantalla del panel de formato con solo opciones de formato general.

  3. En Visual Studio Code, abre el archivo capabilities.json.

  4. Antes de la matriz dataViewMappings, agregue objects.

    "objects": {},

    Captura de pantalla del archivo de funcionalidades con matriz de objetos vacíos.

  5. Guarde el archivo capabilities.json.

  6. En Power BI, vuelva a revisar las opciones de formato.

    Nota

    Si no ve el cambio de opciones de formato, seleccione Recargar objeto visual personalizado.

    Captura de pantalla de las opciones de formato general y visual en el panel de formato.

  7. Establezca la opción Title (Título) en Off (Desactivar). Tenga en cuenta que el objeto visual ya no muestra el nombre de medida en la esquina superior izquierda.

    Captura de pantalla del panel de visualizaciones con el interruptor Título desactivado.

    Recorte de pantalla del objeto visual Circle Card sin la fila de título.

Adición de opciones de formato personalizado

Ahora vamos a agregar un nuevo grupo denominado color para configurar el color del círculo y el grosor del contorno del círculo.

  1. En PowerShell, introduzca Ctrl+C para detener la visualización personalizada.

  2. En Visual Studio Code, en el archivo capabilities.json, inserte el siguiente fragmento de JSON en el objeto que tiene la etiqueta objects.

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

    Este fragmento JSON describe un grupo denominado círculo, que consta de dos variables: circleColor y circleThickness.

  3. Guarde el archivo capabilities.json.

  4. En el panel explorador de , vaya a la carpeta src y luego seleccione settings.ts. Este archivo representa la configuración del objeto visual de inicio.

  5. En el archivo settings.ts, reemplace las líneas de importación y dos clases por el código siguiente.

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

    Este módulo define las dos clases. La clase circleSettings define dos propiedades con nombres que coinciden con los objetos definidos en el archivo capabilities.json (circleColor y circleThickness) y establece valores predeterminados. La clase VisualSettings define el objeto circle según las propiedades descritas en el archivo .

  6. Guarde el archivo settings.ts.

  7. Abra el archivo visual.ts.

  8. En el archivo visual.ts, importe :

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

    y en la clase Visual agregue las siguientes propiedades:

    private visualSettings: VisualSettings;
private formattingSettingsService: FormattingSettingsService;

    Esta propiedad almacena una referencia al objeto VisualSettings, que describe la configuración del objeto visual.

  9. En la clase Visual, inserte lo siguiente como la primera línea del constructor:

    this.formattingSettingsService = new FormattingSettingsService();

  10. En la clase Visual, agregue el siguiente método después del método update.

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

    Se llama a esta función cada vez que se renderiza el panel de formato. Permite seleccionar cuáles de los objetos y propiedades que desea exponer a los usuarios en el panel de propiedades.

  11. En el método update, después de la declaración de la variable radius, agregue el código siguiente.

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

    Este código recupera las opciones de formato. Ajusta cualquier valor pasado a la propiedad circleThickness y lo convierte en un número entre cero y 10.

    Captura de pantalla de la configuración del grosor del círculo en entre cero y 10.

  12. En el elemento círculo , modifique los valores pasados al estilo de relleno y al estilo de ancho de trazo de la siguiente manera:

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

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

    Captura de pantalla de elementos de círculo.

  13. Guarde el archivo visual.ts.

  14. En PowerShell, inicie el objeto visual.

    pbiviz start

  15. En Power BI, la barra de herramientas flotante sobre el objeto visual, seleccione Activar recarga automática.

    Recorte de pantalla del icono Activar recarga automática.

  16. En las opciones de formato del objeto visual, expanda Circle.

    Recorte de pantalla de los elementos del panel de formato de los objetos visuales Circle Card finales.

    Modifique las opciones de color y grosor.

Modifique la opción de grosor a un valor inferior a cero y un valor superior a 10. A continuación, observe que la visualización ajusta el valor a un mínimo o máximo tolerable.

Depuración

Para obtener sugerencias sobre cómo depurar el objeto visual personalizado, consulte la guía de depuración.

Empaquetado del objeto visual personalizado

Ahora que el objeto visual se ha completado y listo para usarse, es el momento de empaquetarlo. Un objeto visual empaquetado se puede importar a informes o servicios de Power BI que otros usuarios pueden usar y disfrutar de ellos.

Cuando el objeto visual esté listo, siga las instrucciones de Empaquetado de un objeto visual de Power BI y, si lo desea, compártalo con otros usuarios para que puedan importarlo y disfrutarlo.

Contenido relacionado