Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
Se aplica a:✅ Power BI Escritorio y servicio Power BI
El objeto visual de tarjeta de Power BI muestra métricas clave en un formato flexible y visualmente atractivo. Cada tarjeta muestra un valor de medida con imágenes de destaque opcionales, etiquetas de referencia y detalles adicionales. Puede mostrar varias tarjetas en un solo objeto visual, desglosarlas por categorías y personalizar los diseños para que coincidan con el diseño del informe.
La combinación de varias medidas y etiquetas de referencia en un objeto visual mejora el rendimiento del informe al reducir el tiempo de carga visual y optimizar las consultas subyacentes al modelo semántico. También puede usar imágenes controladas por datos para crear visualizaciones personalizadas que respondan a los datos.
Nota:
El visual de tarjeta (nuevo) está disponible de forma general como visual de tarjeta. Los informes con la visualización de tarjeta heredada siguen usando la visualización de tarjeta heredada.
Crear una visualización de tarjeta
En el panel Visualizaciones , seleccione la pestaña Crear objeto visual y, a continuación, seleccione el objeto visual Tarjeta de la galería de objetos visuales.
Agregue una medida o cualquier columna de datos al campo Valores .
Ahora tienes una tarjeta sencilla. Puede agregar tantos valores como desee y más tarjetas aparecen.
Personalización del diseño visual de tarjeta
El objeto visual de tarjeta ofrece varias opciones de diseño para hacer que tus objetos visuales sean más organizados y atractivos. Para acceder a esta configuración, seleccione el icono Formato visual en el panel Visualizaciones y, a continuación, seleccione la pestaña Visual .
Diseño de tarjeta
Eldiseño de > controla cómo se organizan los elementos dentro de cada tarjeta. Cada tarjeta puede tener tres secciones: anotación, imagen y etiquetas de referencia. Use esta configuración para ajustar el posicionamiento, la alineación y el espaciado de estos elementos.
El objeto visual de la tarjeta incluye un diseño de collage dinámico que le permite resaltar una sección, mientras que las otras dos comparten el espacio restante. También puede personalizar el orden de visualización del elemento de llamada, la etiqueta de referencia y la imagen principal, y asignarles a cada uno un color de fondo diferente.
Diseño de la llamada
El
Diseño de etiquetas de referencia
La configuración Diseño de las etiquetas de referencia controla cómo se organizan las etiquetas de referencia dentro de la sección de etiquetas de referencia de cada tarjeta. Puede ajustar la alineación vertical y horizontal de las etiquetas de referencia, y personalizar la apariencia, incluidos los huecos, el relleno, los fondos, etc.
Diseño de varias tarjetas
El diseño de varias tarjetas personaliza cómo encajan varias tarjetas dentro del contenedor visual. Cuando tiene varios valores, esta configuración controla la organización de las tarjetas.
Diseño de varias categorías
El diseño de varias categorías da formato a la forma en que se diseña cada sección de categoría (como Canadá, Alemania). Utilice esta configuración cuando tenga categorías agregadas al visual de tarjeta. Dentro de cada sección de categoría, las tarjetas se organizan según la configuración de diseño de varias tarjetas.
Tamaño fijo y Ajustar al espacio
En la sección Diseño multitarjeta, puede controlar cómo se ajusta el tamaño de las tarjetas dentro del contenedor visual.
- Tamaño fijo: active esta opción para especificar las dimensiones exactas de píxel para cada tarjeta. Cuando el contenedor visual no es lo suficientemente grande como para mostrar todas las tarjetas en el tamaño especificado, las barras de desplazamiento aparecen automáticamente. A medida que cambia el tamaño del objeto visual, las tarjetas mantienen sus dimensiones especificadas en lugar de escalar proporcionalmente.
- Ajustar al espacio: cuando está activado, las tarjetas crecen o se reducen para rellenar el contenedor visual en función de las tarjetas presentes. Cuando está desactivado, el objeto visual reserva espacio para el número especificado de tarjetas, incluso cuando existen menos tarjetas.
El tamaño fijo y el ajuste al espacio son mutuamente excluyentes. Cuando el tamaño fijo está habilitado, Ajustar al espacio está deshabilitado, ya que las dimensiones ahora se controlan explícitamente.
Agregar una imagen
El objeto visual de tarjeta de Power BI le permite crear tarjetas visualmente atractivas que combinan métricas con varias opciones de imagen, entre las que se incluyen:
- Imagen: una imagen grande y destacada que puede mostrar fotos de productos, gráficos de campaña o imágenes de marca directamente dentro de la tarjeta. Configure esta opción en la sección Imagen del panel de formato.
- Imagen de llamada: una imagen más pequeña dentro de la llamada que proporciona mejoras sutiles, funcionando bien para elementos de personalización de marca o indicaciones visuales pequeñas sin sobrecargar la visualización de métricas. Configure esta opción en Callout>Image.
- Imagen de fondo del encabezado de categoría: una imagen de fondo para los encabezados de categoría cuando tiene categorías agregadas a la visualización de tarjeta. Configure esta opción en la sección Encabezado categoría .
Para agregar imágenes a la visualización de tarjeta:
- Agregue una imagen: Con el objeto visual de tarjeta seleccionado, seleccione el icono Formato del objeto visual en el panel Visualizaciones . En la pestaña Visual , expanda la tarjeta Imagen . Seleccione su tarjeta en la lista desplegable Tarjetas y, a continuación, establezca el interruptor de Imagen a activado.
- Agregar una imagen de llamada: en el panel Visualizaciones , seleccione el icono Formato del objeto visual . En la pestaña Visual, amplíe la tarjeta Desplegable. Asegúrese de que la tarjeta está seleccionada en aplicar la configuración, expanda los controles Imagen y, a continuación, establezca el botón de alternancia Imagen en activado.
Para todos los tipos de imagen, puede agregar imágenes cargando desde el dispositivo local, pegando una dirección URL de imagen (incluidos vínculos a archivos de imagen en OneLake) o seleccionando una imagen de una columna de datos. También puede personalizar el ajuste de la imagen y elegir diferentes efectos de imagen para mejorar su apariencia.
Estados de la imagen
La sección Imagen incluye el menú desplegable Estados, que permite definir ajustes de imagen independientes para el estado predeterminado y el estado al pasar el cursor. Use el estado de desplazamiento para cambiar cómo aparece una imagen cuando un usuario apunta a una tarjeta; por ejemplo, intercambiando el origen de la imagen, ajustando el ajuste de la imagen o cambiando el color de fondo.
- Con el objeto visual de tarjeta seleccionado, seleccione el icono Formato del objeto visual en el panel Visualizaciones .
- En la pestaña Visual , expanda la sección Imagen .
- En el área Aplicar configuración a, seleccione la tarjeta que desea formatear en la lista desplegable Tarjetas.
- Establezca Estados en Al pasar el cursor.
- Configure el origen de la imagen, ajuste de imagen, transparencia, efectos y color de fondo para que se aplique cuando un usuario apunte a la tarjeta.
Las opciones que configure para el estado Hover solo se aplican cuando un usuario apunta a la tarjeta. El estado Predeterminado controla la apariencia normal de la imagen.
Nota:
Si agrega una categoría al objeto visual de la tarjeta y todas las tarjetas muestran la misma imagen en lugar de imágenes diferentes, revise la lista desplegable de Aplicar configuración a. Cuando esta configuración es All, el objeto visual aplica la misma imagen a todas las tarjetas. Seleccione el valor de llamada específico para asignar diferentes imágenes por tarjeta, como imágenes de una columna de datos.
Agregar categorías
Puede agregar categorías a la visualización de tarjeta al arrastrar un campo al campo Categorías en la sección Crear visualización del panel Visualizaciones. Al agregar una categoría, la visualización de tarjeta se expande para mostrar una sección independiente para cada valor de categoría, donde cada sección muestra los datos segmentados por esa categoría.
Los encabezados de categoría se pueden seleccionar y filtrar otros objetos visuales del informe cuando se seleccionan. Este comportamiento permite a los usuarios interactuar con la visualización de tarjeta para explorar datos a través de diferentes segmentos.
Selección de categoría
Al seleccionar un encabezado de categoría, las demás tarjetas de categoría se atenuan para indicar la selección actual. Ustedes pueden:
- Seleccione varias categorías: mantenga presionada la tecla Ctrl y seleccione otros encabezados de categoría para filtrar por varios valores.
- Anule la selección de una categoría: seleccione nuevamente el encabezado de la categoría para quitarla de la selección.
- Controlar qué objetos visuales se filtran: Use Editar interacciones en el menú Formato para elegir qué objetos visuales de la página del informe se ven afectados por las selecciones del objeto visual de la tarjeta.
El diseño de las secciones de categoría se controla por la sección Diseño de varias categorías en el panel de formato de la pestaña Visual. Dentro de cada sección de categoría, la disposición de tarjetas individuales sigue estando controlada por la sección Diseño de varias tarjetas. Los elementos de cada tarjeta, como los destacados, la imagen y las etiquetas de referencia, se controlan mediante la sección Diseño de >.
Mostrar números completos o cambiar unidades de visualización
De forma predeterminada, el valor destacado del visual de tarjeta utiliza Unidades de visualización configuradas en Auto para abreviar los números grandes con los sufijos K (miles), M (millones) o B (mil millones). Por ejemplo, 11,732 aparece como 12K. Para mostrar el número completo y quitar el sufijo K, M o B, cambie las unidades de presentación a Ninguno:
- Seleccione un objeto visual de tarjeta.
- En el panel Visualizaciones , seleccione el icono Formato del objeto visual .
- En la pestaña Visual, expanda Valores de llamada>.
- Establezca Unidades de visualización en Ninguno.
Si aplica una cadena de formato personalizado, pero el valor sigue mostrando un sufijo K, M o B, la configuración Unidades de visualización es la causa en lugar de la cadena de formato. Para obtener más información, consulte Solución de problemas de escalado automático no deseado.
Guía paso a paso de tarjetas
Siga este tutorial para crear un objeto visual de tarjeta completo paso a paso.
Nota:
En esta guía se utiliza el tema base Fluent 2, el valor predeterminado para los informes nuevos.
Datos de ejemplo
Para seguir los ejemplos de este tutorial, configure una tabla de ejemplo, medidas y una función de tendencia reutilizable en un informe de escritorio en blanco Power BI.
Abra Power BI Desktop y cree un nuevo informe en blanco.
Seleccione TMDL en el lado izquierdo para abrir la vista TMDL.
Pegue el siguiente script TMDL y seleccione Aplicar:
createOrReplace model Model culture: en-US defaultPowerBIDataSourceVersion: powerBI_V3 sourceQueryCulture: en-US valueFilterBehavior: independent dataAccessOptions legacyRedirects returnErrorValuesAsNull table 'Product Line Sales' /// Total number of products sold across all channels and product lines. measure Units = SUM('Product Line Sales'[_Units]) formatString: #,##0 /// Total sales revenue generated from all transactions. measure Revenue = SUM('Product Line Sales'[_Revenue]) formatString: $#,##0 /// The planned revenue goal used to measure sales performance. measure 'Revenue target' = SUM('Product Line Sales'[_Revenue Target]) formatString: $#,##0 /// Total number of products returned by customers. measure Returns = SUM('Product Line Sales'[_Returns]) formatString: #,##0 /// Shows how close actual revenue is to the target (100% = on target, >100% = exceeding). measure 'Revenue % to target' = DIVIDE([Revenue], [Revenue target]) formatString: 0.0% /// Percentage of sold units that were returned (lower is better). measure 'Return rate' = DIVIDE([Returns], [Units]) formatString: 0.0% /// Dollar amount above or below the revenue target (positive = exceeding, negative = behind). measure 'Revenue variance' = [Revenue] - [Revenue target] formatString: $#,##0 measure 'Units 6mo trend' = TrendSVG([Units], 'Product Line Sales'[Month],6,3,"mmm",FALSE) displayFolder: Card images for trendlines dataCategory: ImageUrl measure 'Units 6mo trend - hover' = TrendSVG([Units], 'Product Line Sales'[Month],6,3,"mmm",TRUE) displayFolder: Card images for trendlines dataCategory: ImageUrl /// Icon showing a # symbol inside a circle to represent units. measure 'Units callout image' = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%230078D4' stroke-width='1.5'/%3E%3Ctext x='12' y='17' text-anchor='middle' font-family='Segoe UI' font-size='14' font-weight='600' fill='%230078D4'%3E%23%3C/text%3E%3C/svg%3E" displayFolder: Card images for callout dataCategory: ImageUrl /// Icon showing a $ symbol inside a circle to represent revenue. measure 'Revenue callout image' = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23107C10' stroke-width='1.5'/%3E%3Ctext x='12' y='17' text-anchor='middle' font-family='Segoe UI' font-size='14' font-weight='600' fill='%23107C10'%3E%24%3C/text%3E%3C/svg%3E" displayFolder: Card images for callout dataCategory: ImageUrl measure 'Revenue 6mo trend' = TrendSVG([Revenue], 'Product Line Sales'[Month],6,3,"mmm",FALSE) displayFolder: Card images for trendlines dataCategory: ImageUrl measure 'Revenue 6mo trend - hover' = TrendSVG([Revenue], 'Product Line Sales'[Month],6,3,"mmm",TRUE) displayFolder: Card images for trendlines dataCategory: ImageUrl column Month formatString: mmm. yyyy summarizeBy: none isNameInferred sourceColumn: [Month] annotation SummarizationSetBy = Automatic annotation PBI_FormatHint = {"isCustom":true} column 'Product Line' summarizeBy: none isNameInferred sourceColumn: [Product Line] annotation SummarizationSetBy = Automatic column Channel summarizeBy: none isNameInferred sourceColumn: [Channel] annotation SummarizationSetBy = Automatic column _Units isHidden formatString: 0 summarizeBy: sum isNameInferred sourceColumn: [_Units] annotation SummarizationSetBy = Automatic column _Revenue isHidden formatString: 0 summarizeBy: sum isNameInferred sourceColumn: [_Revenue] annotation SummarizationSetBy = Automatic column '_Revenue Target' isHidden formatString: 0 summarizeBy: sum isNameInferred sourceColumn: [_Revenue Target] annotation SummarizationSetBy = Automatic column _Returns isHidden formatString: 0 summarizeBy: sum isNameInferred sourceColumn: [_Returns] annotation SummarizationSetBy = Automatic partition 'Product Line Sales' = calculated mode: import source = ``` VAR Anchor = DATE(YEAR(TODAY()), MONTH(TODAY()), 1) VAR M1 = EDATE(Anchor, -5) VAR M2 = EDATE(Anchor, -4) VAR M3 = EDATE(Anchor, -3) VAR M4 = EDATE(Anchor, -2) VAR M5 = EDATE(Anchor, -1) VAR M6 = Anchor RETURN SELECTCOLUMNS( { // Product Line A, Online ( M1, "A", "Online", 130, 9100, 10000, 5 ), ( M2, "A", "Online", 200, 14000, 11500, 6 ), ( M3, "A", "Online", 170, 11900, 13000, 7 ), ( M4, "A", "Online", 210, 14700, 14000, 8 ), ( M5, "A", "Online", 230, 16100, 15500, 9 ), ( M6, "A", "Online", 260, 18200, 16000, 10 ), // Product Line A, Retail ( M1, "A", "Retail", 80, 4800, 12000, 35 ), ( M2, "A", "Retail", 140, 8500, 11000, 30 ), ( M3, "A", "Retail", 100, 6000, 10500, 27 ), ( M4, "A", "Retail", 150, 9100, 9500, 24 ), ( M5, "A", "Retail", 160, 9700, 8500, 21 ), ( M6, "A", "Retail", 170, 10500, 8500, 17 ), // Product Line B, Online ( M1, "B", "Online", 280, 19600, 21000, 10 ), ( M2, "B", "Online", 380, 26600, 23000, 12 ), ( M3, "B", "Online", 340, 23800, 24500, 14 ), ( M4, "B", "Online", 410, 28700, 25500, 16 ), ( M5, "B", "Online", 470, 32900, 27000, 17 ), ( M6, "B", "Online", 520, 36400, 29000, 20 ), // Product Line B, Retail ( M1, "B", "Retail", 180, 12600, 25000, 140 ), ( M2, "B", "Retail", 270, 18900, 22000, 125 ), ( M3, "B", "Retail", 240, 16800, 21000, 110 ), ( M4, "B", "Retail", 280, 19600, 19000, 100 ), ( M5, "B", "Retail", 310, 21700, 17000, 90 ), ( M6, "B", "Retail", 320, 22400, 16000, 75 ), // Product Line C, Online ( M1, "C", "Online", 65, 7800, 8000, 2 ), ( M2, "C", "Online", 100, 12000, 9500, 2 ), ( M3, "C", "Online", 85, 10200, 11000, 3 ), ( M4, "C", "Online", 110, 13200, 12500, 3 ), ( M5, "C", "Online", 115, 13800, 13500, 4 ), ( M6, "C", "Online", 125, 15000, 15500, 4 ), // Product Line C, Retail ( M1, "C", "Retail", 100, 12000, 14000, 4 ), ( M2, "C", "Retail", 170, 20400, 15500, 4 ), ( M3, "C", "Retail", 140, 16800, 17000, 5 ), ( M4, "C", "Retail", 175, 21000, 17500, 5 ), ( M5, "C", "Retail", 180, 21600, 18000, 6 ), ( M6, "C", "Retail", 185, 22200, 18000, 7 ) }, "Month", [Value1], "Product Line", [Value2], "Channel", [Value3], "_Units", [Value4], "_Revenue", [Value5], "_Revenue Target", [Value6], "_Returns", [Value7]) ``` annotation PBI_Id = c8632d7dc9194275b03f266beb0eec91 cultureInfo en-US function TrendSVG = ``` ( valueExpr: ANYREF EXPR, periodCol: ANYREF EXPR, periods: INT64, labelChars: INT64, dateFormat: STRING, hover: BOOLEAN ) => VAR _LastPeriod = MAX ( periodCol ) // Take the N most-recent distinct values of periodCol at or before the // current filter context's max — grain-agnostic (day / month / year / etc.) VAR _BasePeriods = TOPN ( periods, FILTER ( ALL ( periodCol ), periodCol <= _LastPeriod ), periodCol, DESC ) VAR _Data = ADDCOLUMNS ( _BasePeriods, "Value", VAR _v = CALCULATE ( valueExpr ) RETURN IF ( ISBLANK ( _v ), 0, _v ) ) VAR _DataIndexed = ADDCOLUMNS ( _Data, "Idx", RANKX ( _Data, periodCol, periodCol, ASC, DENSE ), "PeriodLabel", UPPER ( LEFT ( FORMAT ( periodCol, dateFormat ), labelChars ) ) ) VAR _Count = COUNTROWS ( _DataIndexed ) VAR _MaxVal = MAXX ( _DataIndexed, [Value] ) // Layout — width scales with period count so labels never crowd VAR _PerPointX = 32 // horizontal space reserved per data point VAR _PadX = 18 VAR _Width = 2 * _PadX + MAX ( 1, _Count - 1 ) * _PerPointX VAR _Height = 86 VAR _PadTop = 10 VAR _LabelBandH = 26 VAR _ChartBottom = _Height - _LabelBandH VAR _GoodColor = "#107C10" VAR _BadColor = "#A80000" VAR _LineColor = "#0078D4" VAR _XStep = IF ( _Count > 1, DIVIDE ( _Width - 2 * _PadX, _Count - 1 ), 0 ) VAR _HasData = _Count >= 2 && NOT ISBLANK ( _MaxVal ) // Polyline point list ("x,y x,y ...") VAR _Points = CONCATENATEX ( _DataIndexed, VAR _Idx = [Idx] VAR _Val = [Value] VAR _Norm = IF ( _MaxVal = 0, 0, DIVIDE ( _Val, _MaxVal ) ) VAR _X = _PadX + ( _Idx - 1 ) * _XStep VAR _Y = _ChartBottom - _Norm * ( _ChartBottom - _PadTop ) RETURN FORMAT ( _X, "0.0" ) & "," & FORMAT ( _Y, "0.0" ), " ", [Idx], ASC ) // Dot marker on every point VAR _Markers = CONCATENATEX ( _DataIndexed, VAR _mIdx = [Idx] VAR _mVal = [Value] VAR _mNorm = IF ( _MaxVal = 0, 0, DIVIDE ( _mVal, _MaxVal ) ) VAR _mX = _PadX + ( _mIdx - 1 ) * _XStep VAR _mY = _ChartBottom - _mNorm * ( _ChartBottom - _PadTop ) RETURN "<circle cx='" & FORMAT ( _mX, "0.0" ) & "' cy='" & FORMAT ( _mY, "0.0" ) & "' r='2.2' fill='" & _LineColor & "' />", "", [Idx], ASC ) // Light vertical guide from each marker down to the label band VAR _GuideBottom = _ChartBottom VAR _Guides = CONCATENATEX ( _DataIndexed, VAR _gIdx = [Idx] VAR _gVal = [Value] VAR _gNorm = IF ( _MaxVal = 0, 0, DIVIDE ( _gVal, _MaxVal ) ) VAR _gX = _PadX + ( _gIdx - 1 ) * _XStep VAR _gY = _ChartBottom - _gNorm * ( _ChartBottom - _PadTop ) RETURN "<line x1='" & FORMAT ( _gX, "0.0" ) & "' y1='" & FORMAT ( _gY, "0.0" ) & "' x2='" & FORMAT ( _gX, "0.0" ) & "' y2='" & FORMAT ( _GuideBottom, "0.0" ) & "' stroke='#CCCCCC' stroke-width='0.75' />", "", [Idx], ASC ) // Period label (e.g. "JAN") — bottom band, upper row VAR _LabelY = _Height - 16 VAR _Labels = CONCATENATEX ( _DataIndexed, VAR _lIdx = [Idx] VAR _lX = _PadX + ( _lIdx - 1 ) * _XStep RETURN "<text x='" & FORMAT ( _lX, "0.0" ) & "' y='" & FORMAT ( _LabelY, "0.0" ) & "' text-anchor='middle' font-family='DIN, "DIN Alternate", "DIN Next", "Segoe UI", Tahoma, Arial, sans-serif' font-size='8' fill='#666'>" & [PeriodLabel] & "</text>", "", [Idx], ASC ) // ---- Hover-only content ---- // Shaded area under each segment (green if rising, red if falling) VAR _Shades = CONCATENATEX ( FILTER ( _DataIndexed, [Idx] < _Count ), VAR _sIdx = [Idx] VAR _sVal = [Value] VAR _sNext = MAXX ( FILTER ( _DataIndexed, [Idx] = _sIdx + 1 ), [Value] ) VAR _sNorm1 = IF ( _MaxVal = 0, 0, DIVIDE ( _sVal, _MaxVal ) ) VAR _sNorm2 = IF ( _MaxVal = 0, 0, DIVIDE ( _sNext, _MaxVal ) ) VAR _sX1 = _PadX + ( _sIdx - 1 ) * _XStep VAR _sX2 = _PadX + _sIdx * _XStep VAR _sY1 = _ChartBottom - _sNorm1 * ( _ChartBottom - _PadTop ) VAR _sY2 = _ChartBottom - _sNorm2 * ( _ChartBottom - _PadTop ) VAR _sColor = IF ( _sNext >= _sVal, _GoodColor, _BadColor ) RETURN "<polygon points='" & FORMAT ( _sX1, "0.0" ) & "," & FORMAT ( _sY1, "0.0" ) & " " & FORMAT ( _sX2, "0.0" ) & "," & FORMAT ( _sY2, "0.0" ) & " " & FORMAT ( _sX2, "0.0" ) & "," & FORMAT ( _ChartBottom, "0.0" ) & " " & FORMAT ( _sX1, "0.0" ) & "," & FORMAT ( _ChartBottom, "0.0" ) & "' fill='" & _sColor & "' fill-opacity='0.05' stroke='none' />", "", [Idx], ASC ) // Bold value label — bottom band, lower row VAR _ValueLabelY = _Height - 6 VAR _DataLabels = CONCATENATEX ( _DataIndexed, VAR _dIdx = [Idx] VAR _dVal = [Value] VAR _dX = _PadX + ( _dIdx - 1 ) * _XStep RETURN "<text x='" & FORMAT ( _dX, "0.0" ) & "' y='" & FORMAT ( _ValueLabelY, "0.0" ) & "' text-anchor='middle' font-family='DIN, "DIN Alternate", "DIN Next", "Segoe UI", Tahoma, Arial, sans-serif' font-size='7' font-weight='bold' fill='#333'>" & FORMAT ( _dVal, "#,0" ) & "</text>", "", [Idx], ASC ) // Assemble VAR _HoverExtras = IF ( hover, _Shades, "" ) VAR _HoverLabels = IF ( hover, _DataLabels, "" ) VAR _SVGContent = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 " & FORMAT ( _Width, "0" ) & " " & FORMAT ( _Height, "0" ) & "' preserveAspectRatio='xMidYMid meet'>" & _HoverExtras & _Guides & "<polyline fill='none' stroke='" & _LineColor & "' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' points='" & _Points & "' />" & _Markers & _Labels & _HoverLabels & "</svg>" RETURN IF ( _HasData, "data:image/svg+xml;utf8," & _SVGContent, BLANK () ) ``` annotation __PBI_TimeIntelligenceEnabled = 0 annotation PBI_QueryOrder = [] annotation PBI_ProTooling = ["TMDLView_Desktop"]El script crea la tabla Product Line Sales con seis meses de datos de ejemplo, las medidas base usadas en el tutorial, las medidas de icono de llamada (
Units callout image,Revenue callout image), las medidas de tendencia (Units 6mo trend,Units 6mo trend - hover,Revenue 6mo trend,Revenue 6mo trend - hover) y unaTrendSVGfunción reutilizable definida por el usuario DAX que representa un gráfico de líneas SVG con una variante de desplazamiento opcional.
Creación de una tarjeta básica
En el panel Visualizaciones , seleccione la pestaña Crear objeto visual y, a continuación, seleccione el objeto visual Tarjeta de la galería de objetos visuales.
Arrastre Unidades al campo Valores .
Arrastre Ingresos al área Valores .
Ahora tiene un visual de tarjetas múltiples que muestra las unidades totales y los ingresos totales.
Adición de una imagen de llamada
Para que la tarjeta sea más atractiva visualmente, agregue una imagen al área de llamada. El script TMDL inicial ya ha creado dos medidas que devuelven iconos SVG simples: Units callout image (un # símbolo dentro de un círculo) y Revenue callout image (un $ símbolo dentro de un círculo). Para asignarlos a las tarjetas:
- Seleccione el objeto visual de la tarjeta.
- En el panel Visualizaciones , seleccione el icono Formato del objeto visual .
- En la pestaña Visual , expanda Llamada.
- En la lista desplegable Aplicar configuración a , seleccione Unidades.
- Expanda Imagen y cámbielo a Activado.
- Establezca Tipo de imagen en Seleccionar desde la base de datos.
- Seleccione Units callout image (Imagen de llamada de unidades ) en la lista desplegable de campos.
- Establezca Ajuste de imagen en Centro.
- Establezca Tamaño en 40 px.
- En la lista desplegable Aplicar configuración a , seleccione Ingresos.
- Expanda Imagen y cámbielo a Activado.
- Establezca Tipo de imagen en Seleccionar desde la base de datos.
- Seleccione Revenue callout image en la lista desplegable de campos.
- Establezca Ajuste de imagen en Centro.
- Establezca Tamaño en 40 px.
Cada tarjeta muestra ahora un icono de símbolo en el área destacada junto con el valor de la métrica.
Mostrar por categoría
Agregue una categoría para mostrar los datos desglosados por segmento.
- En el panel Datos , arrastre Canal al campo Categorías .
- Arrastre Línea de producto al campo Categorías para desglosar aún más los datos por línea de producto dentro de cada canal.
- En el panel Visualizaciones , seleccione el icono Formato del objeto visual .
- En la pestaña Visual , expanda Diseño de varias categorías.
- Expanda Diseño, cambie Ajustar al espacio a Desactivado y establezca Filas en 6 para mostrar todas las categorías.
Nota:
Cuando Ajustar al espacio está activado, el número máximo de filas es 4. Para mostrar más filas, desactive Ajustar al espacio disponible.
El visual de tarjeta ahora muestra una sección independiente para cada combinación de canal y línea de producto, y en cada una se muestran las unidades y la facturación junto con sus imágenes destacadas.
Adición de etiquetas de referencia
Las etiquetas de referencia proporcionan contexto para la métrica principal. También puede agregar valores de detalle a etiquetas de referencia para obtener información más detallada.
- En el panel Visualizaciones , seleccione el icono Formato del objeto visual .
- En la pestaña Visual , expanda la sección Etiquetas de referencia .
- En la lista desplegable Aplicar configuración a , seleccione Unidades.
- Arrastre Returns al campo de datos Agregar etiqueta.
- En la lista desplegable Agregar etiqueta , seleccione Devuelve.
- Expanda la sección Detalle y cambie a Activado.
- Arrastre Velocidad de retorno al campo Datos de detalles .
- En la lista desplegable Aplicar configuración a , seleccione Ingresos.
- Arrastre Varianza de ingresos al campo de datos Agregar etiqueta.
- En la lista desplegable Agregar etiqueta , seleccione Varianza de ingresos.
- Expanda la sección Detalle y cambie a Activado.
- Arrastre Revenue % para dirigirse al campo Datos de detalles .
Las tarjetas ahora muestran etiquetas de referencia con detalles: la tarjeta Unidades muestra devoluciones con tasa de retorno y la tarjeta Ingresos muestra la varianza de ingresos con porcentaje a objetivo. Puede dar formato a las etiquetas de referencia, incluido el uso del formato condicional para ajustar los colores en función de los valores.
Adición de una imagen de nivel superior
El visual de tarjeta puede mostrar una imagen junto al valor destacado en lugar de dentro de este. Este diseño es útil para imágenes más grandes y para SVG que muestran más detalles que un icono de llamada pequeño, como una línea de tendencia.
Para este ejemplo, primero simplifique la tarjeta quitando los elementos adicionales anteriores para que el gráfico de tendencias ocupe el protagonismo:
- Seleccione el objeto visual de la tarjeta.
- Del área del campo Categorías, elimine Canal y Línea de producto.
- En el panel Visualizaciones , seleccione el icono Formato del objeto visual .
- En la pestaña Visual , expanda Etiquetas de referencia. En la lista desplegable Aplicar configuración a , seleccione Todo y, a continuación, seleccione Restablecer al valor predeterminado en la parte inferior de la sección.
Ahora use las medidas de tendencia creadas en el script TMDL inicial para mostrar un gráfico de líneas compacto y cambiar a una variante más completa cuando un usuario apunte a la tarjeta.
Las medidas Units 6mo trend, Units 6mo trend - hover, Revenue 6mo trend y Revenue 6mo trend - hover llaman todas a la función reutilizable TrendSVGdefinida por el usuario de DAX para representar un gráfico lineal SVG durante los últimos seis meses. Las variantes al pasar el cursor añaden segmentos sombreados (en verde cuando suben y en rojo cuando bajan) y etiquetas de valor en negrita para cada periodo.
Para mostrar el gráfico de tendencias como la imagen principal de cada tarjeta y cambiar a la variante al pasar el cursor cuando el usuario pase el cursor sobre la tarjeta:
- Seleccione el objeto visual de la tarjeta.
- En el panel Visualizaciones , seleccione el icono Formato del objeto visual .
- En la pestaña Visual , expanda la sección Imagen .
- En la lista desplegable Aplicar configuración a, seleccione Tarjetas = Unidades.
- Establezca Estados en Predeterminado.
- Cambiar Imagen a Activado.
- Establezca Origen de imagen en Elegir de los datos.
- Seleccione Tendencia de unidades a 6 meses en el menú desplegable del campo.
- Establezca Ajuste de imagen en Ajustar.
- Establezca Estados en Al pasar el cursor.
- Cambiar Imagen a Activado.
- Establezca Origen de imagen en Elegir de los datos.
- Seleccione Tendencia de unidades de 6 meses - al pasar el cursor en el menú desplegable de campos.
- Establezca Ajuste de imagen en Ajustar.
- En la lista desplegable Aplicar configuración a, seleccione Tarjetas = Ingresos.
- Establezca Estados en Predeterminado.
- Cambiar Imagen a Activado.
- Establezca Origen de imagen en Elegir de los datos.
- Seleccione Tendencia de ingresos de 6 meses en el menú desplegable del campo.
- Establezca Ajuste de imagen en Ajustar.
- Establezca Estados en Al pasar el cursor.
- Cambiar Imagen a Activado.
- Establezca Origen de imagen en Elegir de los datos.
- Seleccione Tendencia de ingresos de 6 meses - al pasar el cursor en el menú desplegable del campo.
- Establezca Ajuste de imagen en Ajustar.
Cada tarjeta muestra ahora un gráfico de líneas de los últimos seis meses de la métrica correspondiente, junto al valor destacado. Cuando un usuario coloca el cursor sobre una tarjeta, el gráfico cambia a la variante al pasar el cursor, con segmentos de subida y bajada sombreados y etiquetas de valor.
Para resaltar los gráficos de tendencia junto con los valores destacados, ajuste el diseño de la tarjeta:
- En Callout, desactiva el interruptor Imagen de cada tarjeta para eliminar los iconos de Callout.
- En Diseño>de tarjetas, establezca Organización en Horizontal.
- Establezca el Orden en Llamada, Imagen, Etiquetas de referencia.
- Establezca Tamaño de llamada en 40%.
Aplicar formato condicional
Puede dar formato condicional a muchos elementos del objeto visual de tarjeta, como el color de fuente, el color de fondo y el color del borde. Use el formato condicional para resaltar tarjetas específicas en función de los datos subyacentes. Por ejemplo, resalte una tarjeta en la que los ingresos no alcancen su objetivo. Para más información sobre los tipos de reglas disponibles y cómo configurarlos, consulte Introducción al formato condicional.
Visuales heredados de una sola tarjeta y de múltiples tarjetas
Antes de la versión de noviembre de 2025, Power BI incluía dos objetos visuales de tarjeta independientes: el objeto visual de tarjeta única para mostrar una medida y el objeto visual de varias tarjetas para mostrar varias medidas. Estos objetos visuales heredados siguen estando disponibles para la compatibilidad con versiones anteriores. Los informes existentes que usan estos objetos visuales siguen visualizándose sin modificaciones.
El nuevo objeto visual de tarjeta reemplaza los objetos visuales heredados y se recomienda para los nuevos informes. Al seleccionar el icono Tarjeta en el panel Visualizaciones, crea el nuevo objeto visual de tarjeta introducido en la versión de disponibilidad general de noviembre de 2025.
Para acceder a los objetos visuales heredados de una sola tarjeta y de varias tarjetas:
- En el panel Visualizaciones , seleccione los tres puntos (...).
- Seleccione Restaurar objetos visuales predeterminados.
Los objetos visuales heredados aparecen en el área desanclada del panel Visualizaciones, donde normalmente aparecen objetos visuales personalizados. Los usuarios que necesitan mantener el comportamiento heredado deben seguir usando los objetos visuales de tarjeta heredados existentes en sus informes.
Consideraciones y limitaciones
Preguntas más frecuentes sobre las tarjetas usadas en los informes durante la versión preliminar
¿Por qué la configuración de columna se restablece a 10 o la configuración de fila se restablece a 10 cuando lo he establecido anteriormente en un número diferente?
Durante la versión preliminar, puede establecer un número de columna o fila para una disposición de tarjetas en cuadrícula, vertical u horizontal. Después de la versión de noviembre de 2025, solo se mantiene la configuración de la disposición de cuadrícula. Las disposiciones verticales y horizontales se restablecen a 10 columnas y 10 filas en los informes existentes, incluidos los informes publicados. Las barras de desplazamiento pueden aparecer en los objetos visuales de tarjeta existentes para dar cabida a esta configuración. Solo se ven afectados los informes publicados o creados con la visualización de tarjeta durante la versión preliminar.
Para devolver las tarjetas a la columna y el número de fila anteriores, actualice esta configuración en el Power BI desktop de noviembre de 2025 y publique el informe o edite el informe en la web.
¿Por qué las tarjetas ocupan más espacio?
Durante la versión preliminar, la configuración predeterminada tenía menos relleno en las tarjetas. Después del lanzamiento de noviembre de 2025, se agregaron más relleno y opciones de relleno a la tarjeta. El nuevo valor predeterminado es 12px.
Para buscar y ajustar esta configuración, busque "Relleno" en el panel de formato y ajuste según sea necesario. En algunos casos, activar el relleno individual puede restaurar la configuración de relleno anterior.
El relleno se puede establecer en un archivo de tema personalizado o agregarlo a su propio archivo de tema personalizado para aplicarlos a todas las tarjetas del informe.
{
"$schema": "https://raw.githubusercontent.com/microsoft/powerbi-desktop-samples/main/Report%20Theme%20JSON%20Schema/reportThemeSchema-2.149.json",
"name": "CardVisualGA",
"visualStyles": {
"cardVisual": {
"*": {
"*": [{
"$id": "default",
"paddingUniform": 0
}]
}
}
}
}
Para más información, consulte Temas de informes de Power BI.
¿Por qué hay un área de etiqueta de referencia en tarjetas sin una etiqueta de referencia?
Durante la versión preliminar, las etiquetas de referencia formaban parte del área de llamada cuando el divisor estaba desactivado. Después de noviembre de 2025, las etiquetas de referencia tienen su propio área. Una vez que se usa un área en al menos una tarjeta, las otras tarjetas mantienen esa área disponible para mantener la coherencia entre tarjetas.
¿Por qué la etiqueta de referencia oculta el texto en la llamada?
Durante la versión preliminar, las etiquetas de referencia formaban parte del área de llamada. Después de noviembre de 2025, las etiquetas de referencia tienen su propio área. También ahora ocupan el 50% de la tarjeta de forma predeterminada.
Para ajustar los tamaños de área de las tarjetas, vaya a Tarjetas, asegúrese de que el control Aplicar configuración a está establecido en todo, y a continuación, en Diseño ajuste el tamaño del aviso %.
¿Por qué se agrega un color de fondo a la etiqueta de referencia de tarjeta?
Durante la vista previa, el color de fondo solo se muestra cuando la etiqueta de referencia tenía un divisor. El divisor le otorgó a las etiquetas de referencia su propia sección en la tarjeta para luego aplicarles un fondo. Después de la versión de noviembre de 2025, las etiquetas de referencia siempre tienen su propio área con o sin un divisor y se usa un fondo predeterminado.
Para desactivar el fondo, vaya alfondo de > de etiquetas de referencia en el panel de formato y desactive la configuración.
Esta configuración se puede establecer en un archivo de tema personalizado o agregarlo a su propio archivo de tema personalizado para aplicarlos a todas las tarjetas del informe.
{
"$schema": "https://raw.githubusercontent.com/microsoft/powerbi-desktop-samples/main/Report%20Theme%20JSON%20Schema/reportThemeSchema-2.149.json",
"name": "CardVisualGA",
"visualStyles": {
"cardVisual": {
"*": {
"*": [{
"$id": "default",
"backgroundTransparency": 100
}]
}
}
}
}
Para más información, consulte Temas de informes de Power BI.
¿Por qué no puedo ver la configuración de la imagen en el panel de formato?
Durante la versión preliminar, la imagen de llamada se agregó mediante la sección Imagen del panel de formato y se mostró en el área de llamada junto al texto. Después de noviembre de 2025, esas imágenes agregadas anteriormente se mantuvieron en el área de llamada y su configuración se movió a la sección Imagen de llamada> en el panel de formato. Al establecer la sección Imagen del panel de formato, ahora se agrega una nueva imagen a la tarjeta con su propio área.
¿Por qué mi imagen ahora está ampliada?
Durante la versión preliminar, la configuración predeterminada para el tamaño de la imagen tenía algunos errores corregidos por la actualización de noviembre de 2025. Dependiendo de la configuración inicial, la imagen puede parecer "ampliada" o diferente de antes.
Para corregir la imagen, en el panel de formato, ajuste la configuración de imagen de llamada para que la imagen se ajuste o se centre, y verifique los controles de tamaño y de tamaño del área de imagen en la misma sección de formato. Tenga en cuenta que esta configuración está en una nueva ubicación y la sección Imagen de nivel superior ahora es para la imagen de tarjeta.
¿Por qué mi imagen de encabezado de categoría ha desaparecido?
Vaya a Configuración de encabezado de categoría y vuelva a activar agregar imagen. Su imagen aún debería estar allí.
¿Por qué el visual de tarjeta nuevo en un informe publicado tiene un aspecto diferente al que se ve en la aplicación de escritorio?
Las diferencias entre Desktop y el servicio pueden producirse en dos escenarios.
- Está utilizando una versión de Escritorio previa a noviembre de 2025, cuando la tarjeta estaba en vista previa. Cuando se publicó en el servicio, se actualizó para ser la versión disponible de forma general de la nueva visualización de tarjeta. Actualice Power BI Desktop o edite el informe en el sitio web después de publicarlo para ajustar el estilo.
- Está utilizando la versión de noviembre de 2025 de Power BI Desktop, y la actualización de la tarjeta generalmente disponible no está en su región de servicio. Una vez actualizada la región del servicio, la tarjeta tiene el mismo aspecto. Este comportamiento solo debe ocurrir en algunas regiones a finales de noviembre de 2025.
Cambios en el comportamiento predeterminado desde la versión preliminar
El comportamiento predeterminado del visual de tarjeta difiere de su comportamiento en vista previa. En disponibilidad general y en las actualizaciones posteriores, hemos realizado cambios para mejorar la coherencia del diseño, la alineación visual y la experiencia general del usuario.
- Alineación de la imagen de llamada: Durante la versión preliminar, la imagen de llamada alineada estaba restringida al texto de la etiqueta de llamada, que puede dejar parte del contenedor de llamadas vacío. Ahora la imagen se alinea con el contenedor de llamadas.
- Ajuste de imagen de fondo: Durante la versión preliminar, la imagen de fondo podría repetirse para rellenar el contenedor. Ahora las opciones de ajuste de imagen se alinean con otras opciones visuales de imagen, como ajustar, estirar, rellenar y centrar.
- Espaciado externo de la etiqueta de referencia: Durante la versión preliminar, las etiquetas de referencia tenían una configuración de relleno exterior que afectaba involuntariamente al área de llamada mediante la inserción de elementos fuera del lugar alrededor del divisor. Ahora, la configuración de relleno externo se quita de las etiquetas de referencia.
- Ajustar al espacio (cambiado por Autogrid): Durante la versión preliminar, los objetos visuales dejarían una columna vacía para que coincida con el número especificado de columnas. Con la adición de Fit to space, organiza tarjetas para rellenar el contenedor visual en función de las tarjetas presentes. Esta configuración se puede desactivar para volver al comportamiento anterior.
Configuración de formato
- El visual de tarjeta (nuevo) está disponible de forma general como visual de tarjeta. Si utilizó el visual de tarjeta durante la fase de vista previa, es posible que observe cambios en el comportamiento o en el formato que reflejan las mejoras introducidas con la disponibilidad general y en las actualizaciones posteriores.
- El nuevo visual Tarjeta incluye estilos predeterminados actualizados. Las tarjetas recién creadas pueden ser diferentes de las tarjetas heredadas y de las tarjetas creadas durante la versión preliminar, mientras que los objetos visuales existentes permanecen sin cambios.
- Al formatear la visualización de tarjeta, es posible que observe que algunas de las opciones de formato están en una ubicación diferente o nueva, o se ha cambiado el nombre de la configuración.
- En versiones anteriores del objeto visual de tarjeta, la imagen de llamada estaba disponible como parte de la tarjeta Imagen. Esta imagen está ahora en la sección Llamada del panel Formato .
- Determinadas disposiciones de diseño podrían afectar a los informes existentes que usaron el visual de tarjeta durante la fase de vista previa. Este efecto se debe a las actualizaciones realizadas a todos los componentes de tarjeta como parte de la versión de disponibilidad general, incluidas las mejoras en el diseño, el estilo y el control de imágenes.
- Si anteriormente se basaba en el diseño de la tarjeta de imagen, actualice los objetos visuales según corresponda mediante el panel Formato para acceder y configurar los ajustes de la imagen de llamada.
Contenido relacionado
- Descripción general de Visualizations en Power BI
- Visualizaciones de solución de problemas en Power BI