Nota
O acesso a esta página requer autorização. Pode tentar iniciar sessão ou alterar os diretórios.
O acesso a esta página requer autorização. Pode tentar alterar os diretórios.
Aplica-se a:✅ Power BI Desktop e serviço Power BI
O visual do cartão no Power BI apresenta métricas-chave num formato flexível e visualmente apelativo. Cada cartão mostra um valor de medida com imagens de destaque opcionais, etiquetas de referência e detalhes complementares. Pode exibir vários cartões num único visual, dividi-los por categorias e personalizar layouts para corresponder ao design do seu relatório.
Combinar múltiplas medidas e rótulos de referência num único visual melhora o desempenho do relatório ao reduzir o tempo de carregamento visual e otimizar as consultas subjacentes ao modelo semântico. Também pode usar imagens orientadas por dados para criar visualizações personalizadas que respondam aos seus dados.
Nota
O visual (novo) da carta está geralmente disponível como o visual da carta. Os relatórios com a imagem da carta legada continuam a usar a imagem da carta legada.
Crie um visual de cartão
No painel de Visualizações, selecione o separador Criar visualização e depois selecione o visual de Cartão da galeria visual.
Adicione uma medida ou qualquer coluna de dados ao campo Valores .
Agora tem um cartão simples. Podes adicionar quantos valores quiseres e mais cartas aparecem.
Personalize a disposição visual da carta
O visual de cartas oferece várias opções de layout para tornar os seus visuais mais organizados e visualmente apelativos. Acesse estas definições selecionando o ícone Formatar visual no painel de Visualizações, depois seleccione o separador Visual.
Disposição dos cartões
O Layout das Cartas> controla como os elementos estão organizados dentro de cada carta. Cada cartão pode ter três secções: anotação, imagem e etiquetas de referência. Use estas definições para ajustar a posição, alinhamento e espaçamento desses elementos.
O visual do cartão inclui um layout de colagem dinâmica que permite destacar uma secção enquanto as outras duas partilham o espaço restante. Também podes personalizar a ordem de exibição da chamada, da etiqueta de referência e da imagem do herói, atribuindo-lhes cores de fundo diferentes.
Disposição do callout
O Layout de Chamadas> controla o alinhamento vertical e o tamanho da chamada dentro da secção de chamada de cada carta.
Disposição das etiquetas de referência
A configuração de layout de etiquetas de referência controla como as etiquetas de referência são organizadas dentro da secção de etiquetas de referência de cada cartão. Pode ajustar o alinhamento vertical e horizontal das etiquetas de referência, e personalizar o aspeto e a sensação, incluindo espaços, almofadas, fundos e muito mais.
Disposição multi-cartão
O Layout de Multi-cartões personaliza a forma como múltiplos cartões encaixam no recipiente visual. Quando tens múltiplos valores, esta configuração controla a disposição das cartas.
Disposição multicategoria
O layout Multi-Categoria formata a forma como está organizada cada secção de categoria (tais como no Canadá e na Alemanha). Usa esta definição quando tiveres categorias adicionadas ao visual do teu cartão. Dentro de cada secção de categoria, os cartões são organizados de acordo com as configurações de disposição de múltiplos cartões.
Tamanho fixo e ajuste ao espaço
Na secção de layout Multicard , podes controlar o tamanho das cartas dentro do contentor visual:
- Tamanho fixo: Ative esta opção para especificar as dimensões exatas dos pixels para cada placa. Quando o contentor visual não é suficientemente grande para mostrar todas as cartas no tamanho especificado, as barras de scroll aparecem automaticamente. À medida que redimensionas o visual, as cartas mantêm as dimensões especificadas em vez de escalarem proporcionalmente.
- Ajuste ao espaço: Quando ativo, os cartões crescem ou encolhem para preencher o recipiente visual com base nos cartões presentes. Quando desligado, o visual reserva espaço para o número especificado de cartas, mesmo quando existem menos cartas.
Tamanho fixo e ajuste ao espaço são mutuamente exclusivos. Quando o tamanho fixo está ativado, o ajuste ao espaço fica desativado, uma vez que as dimensões passam a ser controladas explicitamente.
Adicionar uma imagem
O visual do cartão no Power BI permite-lhe criar cartões visualmente apelativos que combinam métricas com múltiplas opções de imagem, incluindo:
- Imagem: Uma imagem grande e proeminente que pode mostrar fotos de produtos, gráficos de campanhas ou imagens de marca diretamente dentro do cartão. Configure esta opção na secção Imagem do painel de formato.
- Imagem do callout: Uma imagem mais pequena dentro do callout que oferece melhorias subtis, funcionando bem para elementos de branding ou pequenos sinais visuais sem sobrecarregar a visualização métrica. Configure esta opção em Explicação>Imagem.
- Imagem de fundo do cabeçalho de categoria: Uma imagem de fundo para cabeçalhos de categoria quando tem categorias adicionadas ao visual do cartão. Configure esta opção na secção cabeçalho da Categoria.
Para adicionar imagens ao visual do seu cartão:
- Adicione uma imagem: Com o visual da carta selecionado, selecione o ícone Formatar visual no painel de Visualizações . No separador Visual, expanda a secção Imagem. Selecione o seu cartão no menu Suspenso de Cartões e, em seguida, altere o alternador de Imagem para on.
- Adicionar uma imagem de destaque: No painel Visualizações, selecione o ícone Formatar visual. No separador Visual, expanda o cartão Callout. Garante que o teu cartão está selecionado em Aplicar definições, expande os controlos de Imagem e depois alterna o controlo de Imagem para ligado.
Para todos os tipos de imagem, pode adicionar imagens carregando a partir do seu dispositivo local, colando uma URL de imagem (incluindo ligações para ficheiros de imagem no OneLake) ou selecionando uma imagem de uma coluna de dados. Também pode personalizar o ajuste da imagem e escolher diferentes efeitos para realçar a sua aparência.
Os estados da imagem
A secção Imagem inclui uma lista pendente Estados que lhe permite definir configurações de imagem separadas para os estados predefinido e ao passar com o cursor. Use o estado de hover para alterar a forma como uma imagem aparece quando um utilizador aponta para um cartão — por exemplo, trocando a fonte da imagem, ajustando o ajuste da imagem ou alterando a cor de fundo.
- Com o visual da carta selecionado, selecione o ícone Formatar visual no painel de Visualizações .
- No separador Visual , expanda a secção Imagem .
- Na área Aplicar definições a, selecione o cartão que pretende formatar na lista pendente Cartões.
- Defina Estados como Hover.
- Configure a fonte da imagem, o ajuste da imagem, a transparência, os efeitos e a cor de fundo para se aplicarem quando o utilizador aponta para o cartão.
As definições que configuras para o estado de Hover aplicam-se apenas quando um utilizador aponta para o cartão. O estado Default controla a aparência normal da imagem.
Nota
Se adicionar uma categoria à visualização de cartões e todas as cartas mostrarem a mesma imagem em vez de imagens diferentes, verifique o menu suspenso Aplicar definições a. Quando esta configuração é Tudo, o visual aplica a mesma imagem a todas as cartas. Selecione o valor específico do callout para atribuir diferentes imagens por cartão, como imagens de uma coluna de dados.
Adicionar categorias
Pode adicionar categorias ao visual do seu cartão arrastando um campo para o campo Categorias na secção Construir Visual do painel de Visualizações. Quando adicionas uma categoria, o visual do cartão expande-se para mostrar uma secção separada para cada valor de categoria, com cada secção a mostrar dados segmentados para essa categoria.
Os cabeçalhos das categorias são selecionáveis e filtram outros elementos visuais no relatório quando selecionados. Este comportamento permite aos utilizadores interagir com a visualização do seu cartão para explorar dados em diferentes segmentos.
Seleção de categorias
Quando seleciona um cabeçalho de categoria, os outros cartões de categoria escurecem para indicar a seleção atual. É possível:
- Selecione várias categorias: Mantenha pressionado Ctrl e selecione outros cabeçalhos de categoria para filtrar por múltiplos valores.
- Desmarcar uma categoria: Selecione novamente o cabeçalho da categoria para removê-lo da seleção.
- Controla os visuais que são filtrados: Usa Editar interações no menu Formatar para escolher quais visuais na página do relatório são afetados pelas seleções no visual do cartão.
A disposição das secções de categoria é controlada pela secção Layout Multi-categoria no painel de formato sob a aba Visual. Dentro de cada secção de categoria, a disposição das cartas individuais continua a ser controlada pela secção Layout Multi-cartão. Elementos dentro de cada cartão, como as etiquetas de chamada, imagem e referência, são controlados pela secção de Disposição das Cartas>.
Mostrar números completos ou alterar unidades de visualização
Por predefinição, o valor de destaque do visual de cartão utiliza Unidades de visualização definidas como Auto, o que abrevia números grandes com o sufixo K (milhares), M (milhões) ou B (mil milhões). Por exemplo, 11,732 aparece como 12K. Para mostrar o número completo e remover o sufixo K, M ou B, altere as unidades de visualização para Nenhuma:
- Selecione o visual do cartão.
- No painel Visualizações , selecione o ícone Formatar visual.
- No separador Visual, expanda Valores de destaque>Valores.
- Defina as unidades de exibição para nenhuma.
Se aplicares uma cadeia de formato personalizada, mas o valor continuar a apresentar um sufixo K, M ou B, isso deve-se à definição Unidades de visualização e não à cadeia de formato. Para mais informações, veja Resolução de problemas escalonamento automático indesejado.
Guia passo a passo de cartões
Siga este tutorial para construir uma visualização completa do cartão passo a passo.
Nota
Esta guia utiliza o tema base do Fluent 2, o padrão para novos relatórios.
Dados de exemplo
Para acompanhar os exemplos deste guia, configure uma tabela de exemplo, medidas e uma função de tendência reutilizável num relatório Power BI Desktop em branco.
Abra o Power BI Desktop e crie um novo relatório em branco.
Selecione TMDL no lado esquerdo para abrir a vista TMDL.
Cole o seguinte script TMDL e selecione 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"]O script cria a tabela Product Line Sales com seis meses de dados de exemplo, as medidas base usadas ao longo do guia passo a passo, as medidas de ícones de destaque (
Units callout image,Revenue callout image), as medidas de tendência (Units 6mo trend,Units 6mo trend - hover,Revenue 6mo trend,Revenue 6mo trend - hover) e uma função DAX reutilizável definida pelo utilizadorTrendSVGque gera um gráfico de linhas SVG com uma variante opcional ao passar o cursor.
Crie um cartão básico
No painel de Visualizações, selecione o separador Criar visualização e depois selecione o visual de Cartão da galeria visual.
Arrasta bem as Unidades para o campo Valores .
Arrasta a Receita para o campo Valores.
Agora tem um visual multi-cartão que mostra as unidades totais e a receita total.
Adicionar uma imagem de destaque
Para tornar o seu cartão mais visualmente apelativo, adicione uma imagem à área de chamada. O script TMDL inicial já criou duas medidas que retornam ícones SVG simples: Units callout image (um # símbolo dentro de um círculo) e Revenue callout image (um $ símbolo dentro de um círculo). Para os atribuir aos cartões:
- Selecione o visual do seu cartão.
- No painel Visualizações , selecione o ícone Formatar visual.
- No separador Visual, expanda Chamar.
- No menu suspenso Aplicar definições a, selecione Unidades.
- Expanda a Imagem e alterne para Ativado.
- Definir o tipo de imagem para Selecionar entre dados.
- Selecione imagem de referência de unidades no menu pendente do campo.
- Configure Enquadramento da imagem para Centro.
- Define o tamanho para 40 px.
- No menu suspenso Aplicar definições a, selecione Receita.
- Expanda a Imagem e alterne para Ativado.
- Definir o tipo de imagem para Selecionar entre dados.
- Selecione a imagem de destaque de receita no menu pendente.
- Configure Enquadramento da imagem para Centro.
- Define o tamanho para 40 px.
Cada carta apresenta agora um ícone de símbolo na área de chamada juntamente com o seu valor métrico.
Mostrar por categoria
Adicione uma categoria para mostrar os seus dados divididos por segmentos.
- No painel de Dados, arraste Canal para a área Categorias.
- Arraste Linha de Produto para a área do campo Categorias para decompor ainda mais os dados por linha de produto em cada canal.
- No painel Visualizações , selecione o ícone Formatar visual.
- No separador Visual, expanda Multi-categorias.
- Expanda Layout, desative Ajustar ao espaço em Desativado e defina Linhas como 6 para mostrar todas as categorias.
Nota
Quando Ajustar ao espaço estiver ativado, o número máximo de linhas é 4. Para mostrar mais linhas, desative o Ajustar ao espaço.
O visual de cartão mostra agora uma secção separada para cada combinação de canal e linha de produto, com cada secção a apresentar unidades e receita, juntamente com as respetivas imagens de destaque.
Adicionar etiquetas de referência
As etiquetas de referência fornecem contexto para a sua métrica principal. Também pode adicionar valores de detalhe às etiquetas de referência para obter informações mais detalhadas.
- No painel Visualizações , selecione o ícone Formatar visual.
- No separador Visual , expanda a secção de Etiquetas de Referência .
- No menu suspenso Aplicar definições a, selecione Unidades.
- Arrastar Devoluções para o campo de dados Adicionar rótulo.
- No menu pendente Adicionar etiqueta, selecione Returns.
- Expande a secção de Detalhes e alterna para Ativado.
- Arraste a taxa de retorno para o campo de dados Detalhes .
- No menu suspenso Aplicar definições a, selecione Receita.
- Arraste a variação de receita para o campo de dados Adicionar etiqueta.
- No menu suspenso do rótulo Adicionar , selecione Variação de receita.
- Expande a secção de Detalhes e alterna para Ativado.
- Arraste % da Receita à Meta para o campo de dados 'Detalhes'.
Os seus cartões agora mostram etiquetas de referência com detalhes: o cartão de Unidades mostra as devoluções com taxa de devolução, e o cartão de Receita mostra a variação de receita com percentagem em relação ao alvo. Pode formatar ainda mais etiquetas de referência, incluindo o uso de formatação condicional para ajustar as cores com base nos valores.
Adicionar uma imagem de topo
O visual de cartão pode apresentar uma imagem ao lado do valor em destaque, em vez de dentro dele. Este layout é útil para imagens maiores e para SVGs que mostram mais detalhe do que um pequeno ícone de chamada, como uma linha de tendência.
Para este exemplo, simplifique primeiro o cartão removendo os extras anteriores para que o gráfico de tendência possa ser o destaque:
- Selecione o visual do seu cartão.
- Do campo Categorias , bem, remova Canal e Linha de Produtos.
- No painel Visualizações , selecione o ícone Formatar visual.
- No separador Visual, expanda Rótulos de referência. Na lista pendente Aplicar definições a, selecione Todos e, em seguida, selecione Repor predefinições na parte inferior da secção.
Agora use as medidas de tendência criadas no script TMDL inicial para mostrar um gráfico de linhas compacto e mude para uma variante mais rica quando o utilizador aponta para o cartão.
As medidas Units 6mo trend, Units 6mo trend - hover, Revenue 6mo trend e Revenue 6mo trend - hover invocam todas a TrendSVGfunção DAX reutilizável definida pelo utilizador para gerar um gráfico de linhas SVG ao longo dos últimos seis meses. As variantes de hover adicionam segmentos sombreados (verde ao subir, vermelho ao descer) e rótulos de valor a negrito para cada período.
Para mostrar o gráfico de tendência como a imagem principal em cada cartão e mudar para a variante ao passar o cursor quando um utilizador passar o cursor sobre o cartão:
- Selecione o visual do seu cartão.
- No painel Visualizações , selecione o ícone Formatar visual.
- No separador Visual , expanda a secção Imagem .
- No menu suspenso Aplicar definições em, selecione Cartões = Unidades.
- Defina os estados como padrão.
- Ativar a imagem.
- Defina a fonte da imagem para Selecionar entre dados.
- Selecione Tendência de 6 meses das unidades na lista pendente do campo.
- Defina Ajuste da imagem para Ajustar.
- Defina Estados como Hover.
- Ativar a imagem.
- Defina a fonte da imagem para Selecionar entre dados.
- Selecione Tendência de 6 meses das unidades - ao passar o rato na lista pendente do campo.
- Defina Ajuste da imagem para Ajustar.
- Na lista pendente Aplicar definições a, selecione Cartões = Receitas.
- Defina os estados como padrão.
- Ativar a imagem.
- Defina a fonte da imagem para Selecionar entre dados.
- Selecione Tendência das receitas dos últimos 6 meses na lista pendente do campo.
- Defina Ajuste da imagem para Ajustar.
- Defina Estados como Hover.
- Ativar a imagem.
- Defina a fonte da imagem para Selecionar entre dados.
- Selecione tendência da receita em 6 meses - ao passar o rato na lista pendente do campo.
- Defina Ajuste da imagem para Ajustar.
Cada cartão mostra agora um gráfico de linhas dos últimos seis meses da respetiva métrica ao lado do valor em destaque. Quando um utilizador aponta para uma carta, o gráfico muda para a variante de hover com segmentos sombreados de subida e descida e rótulos de valor.
Para enfatizar os gráficos de tendência juntamente com os valores em destaque, ajuste a disposição do cartão:
- Em Callout, desligue o botão Imagem de cada carta para remover os ícones de callout.
- Em Cartas>Layout, defina Arrangement para Horizontal.
- Defina a Ordem para Legenda, Imagem, Etiquetas de referência.
- Defina o tamanho do Callout para 40%.
Aplicar formatação condicional
Podes formatar condicionalmente muitos elementos no visual do cartão, como a cor da fonte, a cor do fundo e a cor da borda. Use formatação condicional para chamar a atenção para cartões específicos com base nos dados subjacentes. Por exemplo, destaca um cartão onde a receita fica aquém do seu objetivo. Para detalhes sobre os tipos de regras disponíveis e como os configurar, veja Visão geral de formatação condicional.
Visuais legados de cartão único e de vários cartões
Antes do lançamento de novembro de 2025, o Power BI incluía dois visuais de cartão separados: o visual de placa única para mostrar uma medida e o visual multi-cartão para mostrar múltiplas medidas. Estes visuais legados continuam disponíveis para compatibilidade retroativa. Relatórios existentes que usam estes elementos visuais continuam a ser renderizados sem alterações.
O novo visual da carta substitui ambos os visuais antigos e é recomendado para novos relatórios. Quando seleciona o ícone de Cartão no painel de Visualizações, é criada a nova visualização de cartão introduzida na versão de disponibilidade geral de novembro de 2025.
Para aceder às visualizações antigas de cartão único e de múltiplos cartões:
- No painel de Visualizações , selecione os três pontos (...).
- Selecione Restaurar visuais predefinidos.
Os visuais antigos aparecem na área não fixada do painel de Visualizações, onde normalmente aparecem visuais personalizados. Os utilizadores que precisam de manter o comportamento antigo devem continuar a usar os visuais de cartões antigos existentes nos seus relatórios.
Considerações e limitações
Perguntas frequentes sobre os cartões em uso nos relatórios durante o modo de pré-visualização
Porque é que a configuração da coluna reinicia para 10 ou a configuração da linha para 10 quando anteriormente a defini para um número diferente?
Durante a pré-visualização, pode definir um número de coluna ou linha para uma grelha, vertical ou horizontal de cartas. Após o lançamento de novembro de 2025, apenas a configuração da grelha é mantida. As disposições verticais e horizontais são reiniciadas para 10 colunas e 10 linhas nos relatórios existentes, incluindo relatórios publicados. Barras de rolagem podem aparecer nos gráficos de cartões existentes para acomodar estas definições. Apenas os relatórios publicados ou criados com o visual do cartão durante a pré-visualização são afetados.
Para retornar os cartões ao número da coluna e da linha anteriores, atualize estas definições na versão de novembro de 2025 do Power BI Desktop e publique o relatório ou edite o relatório na web.
Porque é que as cartas ocupam mais espaço?
Durante a pré-visualização, as definições padrão tinham menos margem interna nos cartões. Após o lançamento de novembro de 2025, foram adicionadas mais opções de enchimento e almofadamento ao cartão. O novo padrão é 12px.
Para encontrar e ajustar estas definições, procure por "Enchido" no painel de formato e ajuste conforme necessário. Em alguns casos, alternar o padding individual pode restaurar as definições de padding anteriores.
O preenchimento pode ser definido num ficheiro de tema personalizado ou adicionado ao seu próprio ficheiro de tema personalizado para os aplicar a todos os cartões do seu relatório.
{
"$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 mais informações, consulte os temas dos relatórios do Power BI.
Porque é que existe uma área de etiqueta de referência em cartões sem etiqueta de referência?
Durante a pré-visualização, as etiquetas de referência faziam parte da área de chamada quando o divisor era desligado. Após novembro de 2025, as etiquetas de referência passaram a ter a sua própria área. Uma vez que uma área é usada em pelo menos uma carta, as outras cartas mantêm essa área disponível para manter a consistência entre as cartas.
Porque é que a etiqueta de referência está a obscurecer o texto na chamada?
Durante a pré-visualização, os rótulos de referência faziam parte da área de chamada. Após novembro de 2025, as etiquetas de referência passaram a ter a sua própria área. Agora, por predefinição, também ocupam 50% do cartão.
Para ajustar o tamanho da área das cartas, vá a Cartas, certifique-se de que a definição Aplicar para controlar está definida para Todos, depois, no Layout , ajuste o tamanho do Callout %.
Porque é que há uma cor de fundo adicionada à etiqueta de referência da carta?
Durante a pré-visualização, a cor de fundo só aparecia quando a etiqueta de referência tinha um divisor. O divisor deu às etiquetas de referência uma área própria no cartão para depois aplicar um fundo. Após o lançamento de novembro de 2025, as etiquetas de referência têm sempre a sua área própria, com ou sem divisor, e utiliza-se um fundo padrão.
O fundo pode ser desligado indo a Reference Labels layout>background no painel de formato e desativando a definição.
Esta definição pode ser definida num ficheiro de tema personalizado ou adicionada ao seu próprio ficheiro de tema personalizado para as aplicar a todos os cartões do seu relatório.
{
"$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 mais informações, consulte os temas dos relatórios do Power BI.
Porque é que não consigo ver as minhas definições de imagem no painel de formato?
Durante a pré-visualização, a imagem de chamada era adicionada usando a secção Imagem do painel de formato e mostrada na área de chamada ao lado do texto. A partir de novembro de 2025, as imagens anteriormente adicionadas foram mantidas na área de chamada, e as suas configurações foram movidas para a secção Chamada Imagem> no painel de formato. Definir a secção Imagem do painel de formato adiciona agora uma nova imagem ao cartão com a sua própria área.
Porque é que a minha imagem está agora ampliada?
Durante a pré-visualização, as definições padrão para o tamanho da imagem tiveram alguns bugs corrigidos pela atualização de novembro de 2025. Dependendo das definições iniciais, a imagem pode parecer "ampliada" ou diferente da anterior.
Para corrigir a imagem, no painel de formato, ajusta as definições de Chamada da Imagem para o "ajuste da imagem" ser "ajustar" ou "centrar", e verifica os controlos de tamanho e da área da imagem na mesma secção de formatação. Note que esta definição está numa nova localização, e a secção de imagem de nível superior é agora para a imagem do cartão.
Porque é que a imagem do cabeçalho da minha categoria desapareceu?
Vá para as definições do cabeçalho de categoria e volte a ativar adicionar imagem. A tua imagem ainda deve estar lá.
Porque é que a nova imagem do cartão num relatório publicado parece diferente do que aparece no Desktop?
As diferenças entre o Desktop e o serviço podem ocorrer em dois cenários.
- Está a usar uma versão do Desktop anterior a novembro de 2025, quando o cartão estava em pré-visualização. Quando foi publicado no serviço, foi atualizado para ser a versão disponibilizada de forma geral do novo visual de cartão. Ou atualiza o seu Power BI Desktop ou edita o relatório na web depois de publicar para ajustar o estilo.
- Está a usar a versão de novembro de 2025 do Power BI Desktop, e a atualização para a placa geralmente disponível não está na sua região de serviço. Depois de a região de serviço ser atualizada, o cartão continua igual. Este comportamento só deverá ocorrer em algumas regiões no final de novembro de 2025.
Alterações ao comportamento predefinido na pré-visualização
O comportamento predefinido do visual de cartão difere do seu comportamento na pré-visualização. Na disponibilidade geral e nas atualizações subsequentes, fizemos alterações para melhorar a consistência do layout, o alinhamento visual e a experiência geral do utilizador.
- Alinhamento da imagem de chamada: Durante a pré-visualização, a imagem de chamada alinhada estava limitada ao texto do rótulo de chamada, o que pode deixar parte do contentor de chamada vazia. Agora a imagem alinha-se com o contentor de chamada.
- Ajuste da imagem de fundo: Durante a pré-visualização, a imagem de fundo podia repetir-se para encher o contentor. Agora, as opções de ajuste da imagem alinham-se com outras opções visuais de imagem: ajuste, alongamento, preenchimento e centro.
- Margem externa da etiqueta de referência: Durante a pré-visualização, as etiquetas de referência tinham uma configuração de margem externa que afetava involuntariamente a área de chamada ao empurrar elementos para fora do lugar à volta do divisor. Agora, a configuração de enchimento exterior foi removida das etiquetas de referência.
- Ajuste ao espaço (renomeado de Autogrid): Durante a pré-visualização, os elementos visuais deixavam uma coluna vazia para corresponder ao número especificado de colunas. Com a adição do Ajuste ao espaço, dispõe as cartas para preencher o recipiente visual com base nas cartas presentes. Esta configuração pode ser desativada para regressar ao comportamento anterior.
Configurações de formato
- O visual (novo) da carta está geralmente disponível como o visual da carta. Se usou o visual do cartão durante a fase de pré-visualização, poderá notar alterações no comportamento ou na formatação que refletem melhorias introduzidas na disponibilidade geral e em atualizações subsequentes.
- O novo visual do Card inclui um estilo padrão que foi atualizado. As cartas recém-criadas podem parecer diferentes das cartas legadas e das cartas criadas durante a pré-visualização, enquanto os visuais existentes permanecem inalterados.
- Ao formatar visualmente o cartão, pode notar que algumas definições de formato estão num local diferente ou novo, ou que o nome da definição é alterado.
- Nas versões anteriores do visual do cartão, a imagem Callout estava disponível como parte do cartão de Imagem. Esta imagem encontra-se agora na secção de Chamadas do painel de Formato .
- Certos arranjos de Layout podem afetar relatórios existentes que usaram o visual do cartão durante a sua fase de pré-visualização. Este efeito deve-se a atualizações feitas a todos os componentes das placas como parte da versão de disponibilidade geral, incluindo melhorias no layout, estilo e gestão de imagens.
- Se antes dependia do layout de cartão de imagem, atualize os seus visuais em conformidade utilizando o painel de Formatação para aceder e configurar as definições da imagem de destaque.