Creación rápida de objetos visuales personalizados

En power BI embedded Crear rápidamente objetos visuales personalizados aplicación de presentación, los usuarios pueden editar los objetos visuales de informe existentes y crear sus propios objetos visuales personalizados, incluso si no tienen experiencia anterior de Power BI. El código de presentación muestra cómo usar las API de creación de informes de Power BI para crear y editar varios tipos de visualizaciones en tiempo de ejecución. Para obtener más información sobre el uso de las API de creación de informes, consulte la introducción a la creación de informes de .

Creación rápida de una experiencia de presentación de objetos visuales personalizados

Contoso, una empresa ficticia, usa el Creación rápida de objetos visuales personalizados que muestran para presentar un informe insertado de Power BI con varias visualizaciones de sus datos de ventas. Un gráfico de columnas, gráfico de áreas, gráfico de barras, gráfico circular y gráfico de líneas muestran ingresos y oportunidades como funciones del tipo del sector, vendedor y estado de oportunidad.

El informe incrustado tiene un botón Crear objeto visual rápido que los usuarios pueden seleccionar para crear nuevos objetos visuales basados en los datos.

Captura de pantalla que muestra el creador de objetos visuales rápidos muestra el informe insertado de Power BI con el botón Crear objeto visual rápido.

Creación de un objeto visual rápido

Los usuarios del informe pueden seleccionar la botón Crear objeto visual rápido en cualquier momento durante su sesión de visualización para crear nuevos objetos visuales basados en los datos de ventas de Contoso.

Por ejemplo, si un usuario quiere ver un gráfico de columnas que muestra Ingresos reales basados en estado de oportunidad, selecciona Crear objeto visual rápido para abrir el cuadro de diálogo Crear objeto visual rápido de . El cuadro de diálogo, que se define en el código de la aplicación, contiene una vista previa visual de informe insertada a la derecha.

En el cuadro de diálogo Crear visual rápido , en Elegir tipo de objeto visual, el usuario selecciona Gráfico de columnas. Hay diferentes campos y valores disponibles en función del tipo visual seleccionado por el usuario. En el gráfico de columnas, el usuario selecciona estado de oportunidad para el campo eje de y ingresos reales para Valores. Opcionalmente, seleccionan de ingresos estimados para información sobre herramientas.

Después de rellenar los eje y campos valores, el usuario puede seleccionar varias opciones de formato, como si se muestran los valores y etiquetas reales. También pueden escribir y dar formato a un título para el objeto visual.

La vista previa del informe insertado en el cuadro de diálogo muestra la visualización a medida que el usuario la compila.

Captura de pantalla que muestra el cuadro de diálogo Crear objeto visual rápido.

Una vez completado el objeto visual, el usuario selecciona Creary la nueva visualización aparece en el informe.

Captura de pantalla que muestra un objeto visual recién creado con una información sobre herramientas que se muestra para uno de los puntos de datos.

Aparece una información sobre herramientas cuando un usuario mantiene el puntero sobre un punto de datos en las visualizaciones. Dado que el usuario especificó de ingresos estimados en información sobre herramientas cuando creó el objeto visual, los datos de ese campo aparecen en la información sobre herramientas. Si el usuario no especifica una información sobre herramientas, solo los datos del eje y del valor aparecen en la información sobre herramientas.

Cambiar un objeto visual existente

Los usuarios del informe pueden cambiar cualquier objeto visual existente en el informe seleccionando las opciones Más opciones puntos suspensivos (...) en la esquina superior derecha del objeto visual y, después, seleccionando Cambiar objeto visual.

Por ejemplo, un usuario de informe podría querer cambiar el número de oportunidades por sector gráfico de áreas a un gráfico de columnas, ya que los datos no son continuos. Cuando el usuario selecciona Cambiar objeto visual, se abre el cuadro de diálogo Crear visual rápido y el usuario puede cambiar cualquiera de las opciones de configuración.

Captura de pantalla que muestra el objeto visual del gráfico de áreas con el comando Cambiar objeto visual.

En este ejemplo, el usuario cambió el tipo de objeto visual a gráfico de columnas. Los datos ahora se muestran como un gráfico de columnas.

Captura de pantalla que muestra el objeto visual cambiado a un gráfico de columnas.

Creación rápida de objetos visuales personalizados que muestran código

El código para implementar la presentación se encuentra en el repositorio PowerBI-Embedded-Showcases GitHub.

  • La aplicación código HTML compila el contenedor de informes incrustado y los elementos, cuadros de diálogo, campos de texto y botones.

  • El informe de código JavaScript define los tipos de visualización, controla los comandos y los eventos y realiza todas las interacciones e inserción de informes.

Puede usar la extensión powerbi-report-authoring para la biblioteca cliente de Power BI para ayudar a crear informes y objetos visuales de forma sencilla y rápida. Para obtener más información, consulte la introducción a la creación de informes de .

Para obtener más información sobre cómo crear objetos visuales y enlazarlos a datos, vea Crear un objeto visual. Para obtener más información sobre las propiedades visuales, vea Formato de propiedades visuales.

Creación y configuración de objetos visuales

Cree objetos visuales de Power BI mediante createVisual y especifique el tipo de objeto visual, como barChart o pieChart. A continuación, se enlaza el tipo de objeto visual a propiedades, roles, campos y datos. El archivo visuals.js de presentación define las propiedades, los roles de datos, los campos de datos y los destinos de los tipos visuales que admite esta aplicación.

En el archivo index.js, el código siguiente crea un objeto visual incrustado dentro del cuadro de diálogo Crear objeto visual rápido y establece y aplica sus propiedades. Por ejemplo, la propiedad legend está habilitada para los objetos visuales de gráfico circular, pero está deshabilitado para gráficos de barras y columnas.

// Based on the state object, create a visual inside the modal
async function createVisualInsideTheModalInEditMode(visualType, dataRoles) {

    // Create visual inside the modal
    const newVisual = await visualCreatorShowcaseState.page.createVisual(visualType, getVisualLayout());

    // Update state
    visualCreatorShowcaseState.newVisual = newVisual.visual;
    visualCreatorShowcaseState.visualType = newVisual.visual.type;
    const visual = newVisual.visual;
    const newVisualType = visual.type;
    
    // Enable the legend property for pie chart
    if (visualCreatorShowcaseState.visualType === "pieChart") {
        visual.setProperty(propertyToSelector("legend"), { schema: schemas.property, value: true });
    }
    
    // Add properties to the created visual
    Object.entries(visualCreatorShowcaseState.properties).forEach(property => {
        let [propertyName, propertyValue] = property;
    ...
        // Check the validity of the given property for the given visual-type and apply it to the visual
        applyValidPropertiesToTheVisual(visual, newVisualType, propertyName, propertyValue);
    });
    
    // Disable the legend for the column and bar charts
    if (visualCreatorShowcaseState.visualType === "columnChart" || visualCreatorShowcaseState.visualType === "barChart") {
        visual.setProperty(propertyToSelector("legend"), { schema: schemas.property, value: false });
    }

Cambiar el tipo de objeto visual

En el cuadro de diálogo Crear objeto visual rápido, todos los campos de edición existentes están disponibles siempre que el tipo de objeto visual seleccionado permanezca sin cambios. Al crear un nuevo objeto visual o cambiar el tipo de objeto visual, los campos de edición pertinentes estarán disponibles después de que el usuario seleccione el nuevo tipo de objeto visual.

El código siguiente cambia el tipo de objeto visual si el usuario edita un objeto visual para cambiar el tipo, por ejemplo, de un gráfico de áreas a un gráfico de columnas. Para obtener más información sobre cómo cambiar el tipo de objeto visual, vea Cambiar el tipo de objeto visual.

        const oldVisualType = selectedVisual.visual.type;
        const oldVisual = selectedVisual.visual;
        if (oldVisualType !== visualCreatorShowcaseState.visualType) {

            // If visual-type is changed, remove all active data-fields on the visual
            await removeAllActiveDataRoles(oldVisual, oldVisualType);

            // Change the visual type
            await oldVisual.changeType(visualCreatorShowcaseState.visualType);
        }

Agregue el comando Cambiar objeto visual al menú Más opciones

El embedConfiguration de informe usa el comando de menú extender API para agregar un comando changeVisual al informe, que aparece en el menú Más opciones de cada visualización.

let config = {
...
    settings: {
        ...
        extensions: [
            {
                command: {
                    name: "changeVisual",
                    title: "Change visual",
                    extend: {
                        visualOptionsMenu: {
                            title: "Change visual",
                            menuLocation: models.MenuLocation.Top,

La configuración también oculta todos los comandos de menú predeterminados y preexistentes de Power BI Más opciones, como Exportar datos y Ordenar. Para obtener más información sobre cómo personalizar comandos visuales, vea Personalizar comandos de menú.

Controlar el objeto visual Cambiar y crear eventos de selección de objetos visuales rápidos

El código siguiente controla la selección de comandos de visual change y botón Crear objeto visual rápido eventos de clic. El código escucha el comando o la selección del botón y abre el Crear objeto visual rápido cuadro de diálogo modal para editar o crear el objeto visual.

    // Listen for the commandTriggered event
    baseReportState.report.on("commandTriggered", function (event) {

        // Open the modal and set the fields, properties and title for the visual
        openModalAndFillState(event.detail);
    });

    baseReportState.report.on("buttonClicked", function () {

        // Show the modal to create the visual
        openModalAndFillState();
    });

Contenido relacionado

  • Last updated on