Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
Aplica-se a:✅ Power BI Desktop e serviço do Power BI
O visual do cartão no Power BI exibe as principais métricas em um formato flexível e visualmente atraente. Cada cartão mostra um valor de medida com imagens de destaque opcionais, rótulos de referência e detalhes de suporte. Você pode exibir vários cartões em um único visual, dividi-los por categorias e personalizar layouts para corresponder ao design do relatório.
A combinação de várias medidas e rótulos de referência em um visual melhora o desempenho do relatório, reduzindo o tempo de carga visual e otimizando consultas subjacentes ao modelo semântico. Você também pode usar imagens controladas por dados para criar visualizações personalizadas que respondam aos seus dados.
Observação
O visual do cartão (novo) geralmente está disponível como o visual do cartão. Os relatórios com o visual de cartão herdado continuam a usar o visual do cartão herdado.
Criar um visual de cartão
No painel Visualizações, selecione a guia Criar visual e, em seguida, selecione o visual Cartão na galeria visual.
Adicione uma medida ou qualquer coluna de dados ao campo Valores bem.
Agora você tem um cartão simples. Você pode adicionar quantos valores quiser, e mais cartões aparecerão.
Personalizar o layout visual do cartão
O visual do cartão oferece várias opções de layout para tornar seus visuais mais organizados e visualmente atraentes. Acesse essas configurações selecionando o ícone Formatar visual no painel Visualizações e depois selecione a guia Visual.
Esquema de cartão
O Layout> controla como os elementos são organizados em cada cartão. Cada cartão pode ter três seções: texto explicativo, imagem e rótulos de referência. Use essas configurações para ajustar o posicionamento, o alinhamento e o espaçamento desses elementos.
O visual do cartão inclui um layout de colagem dinâmica que permite realçar uma seção enquanto as outras duas compartilham o espaço restante. Você também pode personalizar a ordem de exibição do texto explicativo, do rótulo de referência e da imagem principal e atribuir a cada um uma cor de plano de fundo diferente.
Layout de chamada
OLayout> controla o alinhamento vertical e o tamanho do texto explicativo na seção de texto explicativo de cada cartão.
Layout de rótulos de referência
A configuração de disposição dos rótulos de referência controla como os rótulos de referência são organizados na seção de rótulos de referência de cada cartão. Você pode ajustar o alinhamento vertical e horizontal dos rótulos de referência e personalizar a aparência, incluindo lacunas, preenchimento, planos de fundo e muito mais.
Layout de múltiplos cartões
O layout de vários cartões personaliza como vários cartões se encaixam dentro do contêiner visual. Quando você tem vários valores, essa configuração controla a disposição dos cartões.
Layout de várias categorias
O layout de várias categorias formata como cada seção de categoria é disposta (como Canadá, Alemanha). Use essa configuração quando você tiver categorias adicionadas ao visual do cartão. Em cada seção de categoria, os cartões são organizados de acordo com as configurações de layout de vários cartões.
Tamanho fixo e Ajustar ao espaço
Na seção Layout Multicard, você pode controlar como os cartões são dimensionados dentro do contêiner visual.
- Tamanho fixo: alterne essa opção para especificar as dimensões exatas de pixel para cada cartão. Quando o contêiner visual não é grande o suficiente para exibir todos os cartões no tamanho especificado, as barras de rolagem aparecem automaticamente. À medida que você redimensiona o visual, os cartões mantêm suas dimensões especificadas em vez de dimensionar proporcionalmente.
- Ajuste ao espaço: quando ativado, os cartões aumentam ou diminuem para preencher o contêiner visual de acordo com os cartões presentes. Quando desativado, o visual reserva espaço para o número especificado de cartões, mesmo quando há menos cartões.
O tamanho fixo e o ajuste ao espaço são mutuamente exclusivos. Quando o tamanho fixo está habilitado, o ajuste ao espaço é desabilitado, pois as dimensões agora são controladas explicitamente.
Adicionar uma imagem
O visual do cartão no Power BI permite criar cartões visualmente atraentes que combinam métricas com várias opções de imagem, incluindo:
- Imagem: Uma imagem grande e proeminente que pode mostrar fotos de produtos, gráficos de campanha ou imagens de marca diretamente dentro do cartão. Configure essa opção na seção Imagem do painel de formato.
- Imagem de chamada: uma imagem menor dentro da chamada que fornece aprimoramentos sutis, funcionando bem para elementos de marca ou pequenas indicações visuais sem sobrecarregar a exibição da métrica. Configure essa opção em Texto Explicativo>Imagem.
- Imagem de plano de fundo do cabeçalho de categoria: uma imagem de plano de fundo para cabeçalhos de categoria quando você tiver categorias adicionadas à visualização do cartão. Configure essa opção na seção Cabeçalho categoria .
Para adicionar imagens ao visual do cartão:
- Adicione uma imagem: Com o visual do cartão selecionado, selecione o ícone Formatar visual no painel Visualizações. Na guia Visual, expanda o cartão Image. Selecione seu cartão na lista suspensa Cartões e, em seguida, defina a alternância de imagem como ativada.
- Adicionar uma imagem de destaque: no painel Visualizações, selecione o ícone Formatar visual. Na guia Visual, expanda o cartão Callout. Verifique se o cartão está selecionado nas configurações Aplicar, expanda os controles de imagem e, em seguida, defina a alternância de imagem como ativada.
Para todos os tipos de imagem, você pode adicionar imagens carregando de seu dispositivo local, colando uma URL de imagem (incluindo links para arquivos de imagem no OneLake) ou selecionando uma imagem de uma coluna de dados. Você também pode personalizar o ajuste da imagem e escolher diferentes efeitos de imagem para aprimorar sua aparência.
Estados de imagem
A seção Imagem inclui um menu suspenso Estados que permite definir configurações de imagem separadas para os estados padrão e de passagem do mouse. Use o estado de foco para alterar a forma como uma imagem aparece quando um usuário aponta para um cartão, por exemplo, trocando a origem da imagem, ajustando o ajuste da imagem ou alterando a cor da tela de fundo.
- Com o visual de cartão selecionado, selecione o ícone Formatar visual no painel Visualizações.
- Na guia Visual , expanda a seção Imagem .
- Na área Aplicar configurações , selecione o cartão que você deseja formatar na lista suspensa Cartões .
- Definir Estados como Passar o mouse.
- Configure a origem da imagem, o ajuste da imagem, a transparência, os efeitos e a cor da tela de fundo a serem aplicadas quando um usuário aponta para o cartão.
As configurações que você configura para o estado Hover se aplicam somente quando um usuário aponta para o cartão. O estado padrão controla a aparência normal da imagem.
Observação
Se você adicionar uma categoria ao visual do cartão e todos os cartões exibirem a mesma imagem em vez de imagens diferentes, verifique a lista suspensa Aplicar configurações a. Quando essa configuração é All, o visual aplica a mesma imagem a cada cartão. Selecione o valor específico de chamada para atribuir imagens diferentes a cada cartão, como imagens de uma coluna de dados.
Adicionar categorias
Você pode adicionar categorias ao visual do cartão arrastando um campo para o campo Categorias na seção Construir visual do painel Visualizações. Quando você adiciona uma categoria, o visual do cartão se expande para exibir uma seção separada para cada valor de categoria, com cada seção mostrando dados fatiados nessa categoria.
Os cabeçalhos de categoria são selecionáveis e filtram outros visuais no relatório quando selecionados. Esse comportamento permite que os usuários interajam com seu visual de cartão para explorar dados em diferentes segmentos.
Seleção de categoria
Quando você seleciona um cabeçalho de categoria, os outros cartões de categoria diminuem para indicar a seleção atual. É possível:
- Selecione várias categorias: segure Ctrl e selecione outros cabeçalhos de categoria para filtrar por vários valores.
- Desmarque uma categoria: selecione o cabeçalho de categoria novamente para removê-lo da seleção.
- Controlar quais visuais são filtrados: use Editar interações no menu de Formatar para escolher quais visuais na página de relatório são afetados pelas seleções no visual do cartão.
O layout das seções de categoria é controlado pela seção layout de múltiplas categorias no painel de formatação na guia Visual. Em cada seção de categoria, a disposição de cartões individuais ainda é controlada pela seção layout de múltiplos cartões. Elementos em cada cartão, como o texto explicativo, imagem e rótulos de referência, são controlados pela seçãoLayout de >.
Mostrar números completos ou alterar unidades de exibição
Por padrão, o valor de texto explicativo do visual do cartão usa unidades de exibição definidas como Auto, que abrevia grandes números com um sufixo K (milhares), M (milhões) ou B (bilhõ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 exibição para Nenhuma:
- Selecione o visual do cartão.
- No painel Visualizações, selecione o ícone Formatar visual.
- Na guia Visual, expanda Valores de destaque>Valores.
- Defina unidades de exibição como Nenhuma.
Se você aplicar uma string de formato personalizada, mas o valor ainda exibir um sufixo K, M ou B, a causa é a configuração Unidades de exibição, e não a string de formato. Para obter mais informações, consulte Solução de problemas de dimensionamento automático indesejado.
Passo a passo do cartão
Siga este guia passo a passo para criar um visual de cartão abrangente.
Observação
Este passo a passo usa o tema base do Fluent 2, o padrão para novos relatórios.
Dados de exemplo
Para acompanhar os exemplos neste passo a passo, configure uma tabela de exemplo, medidas e uma função de tendência reutilizável em um 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 o modo de exibição 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 Vendas por Linha de Produto com seis meses de dados de exemplo, as medidas base usadas em todo o passo a passo, medidas de ícones de destaque (
Units callout image,Revenue callout image), 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 usuárioTrendSVGque renderiza um gráfico de linhas SVG com uma variante opcional ao passar o cursor.
Criar um cartão básico
No painel Visualizações, selecione a guia Criar visual e, em seguida, selecione o visual Cartão na galeria visual.
Arraste Unidades para o campo Valores.
Arraste bem a Receita para o campo Valores .
Agora você tem um visual com vários cartões exibindo o total de unidades e a receita total.
Adicionar uma imagem de destaque
Para tornar seu cartão mais atraente visualmente, adicione uma imagem à área de texto explicativo. 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 atribuí-los aos cartões:
- Selecione o visual do cartão.
- No painel Visualizações, selecione o ícone Formatar visual.
- Na guia Visual , expanda o Texto explicativo.
- Na lista suspensa Aplicar configurações , selecione Unidades.
- Expanda a imagem e alterne-a para Ativar.
- Defina o tipo de imagem como Selecionar dos dados.
- Selecione a imagem de texto explicativo unidades na lista suspensa do campo.
- Defina o ajuste de imagem para o Centro.
- Defina o Tamanho como 40 px.
- Na lista suspensa Aplicar configurações , selecione Receita.
- Expanda a imagem e alterne-a para Ativar.
- Defina o tipo de imagem como Selecionar dos dados.
- Selecione imagem de destaque de receita na lista suspensa do campo.
- Defina o ajuste de imagem para o Centro.
- Defina o Tamanho como 40 px.
Cada cartão agora exibe um ícone de símbolo na área de destaque ao lado do valor da métrica.
Mostrar por categoria
Adicione uma categoria para exibir os dados divididos por segmento.
- No painel Dados , arraste bem o Canal para o campo Categorias .
- Arraste a Linha do Produto para o campo Categorias para dividir ainda mais os dados por linha do produto em cada canal.
- No painel Visualizações, selecione o ícone Formatar visual.
- Na guia Visual , expanda o layout de várias categorias.
- Expanda Layout, alterne Ajustar ao espaço para Desativado e defina Linhas para 6 para exibir todas as categorias.
Observação
Quando o ajuste ao espaço está ativado, o número máximo de linhas é 4. Para exibir mais linhas, desative Ajustar ao espaço.
O visual do cartão agora mostra uma seção separada para cada combinação de canal e linha de produto, com cada seção exibindo unidades e receita junto com suas imagens de texto explicativo.
Adicionar rótulos de referência
Os rótulos de referência fornecem contexto para sua métrica principal. Você também pode adicionar valores de detalhes aos rótulos de referência para obter informações mais granulares.
- No painel Visualizações, selecione o ícone Formatar visual.
- Na guia Visual , expanda a seção Rótulos de referência .
- Na lista suspensa Aplicar configurações , selecione Unidades.
- Arraste Retornos para o campo de Adicionar rótulo.
- Na lista suspensa Adicionar rótulo, selecione Retornos.
- Expanda a seção Detalhes e alterne-a para Ativar.
- Arraste a taxa de retorno para o campo de dados Detalhes .
- Na lista suspensa Aplicar configurações , selecione Receita.
- Arraste Variação de Receita para o campo de dados Adicionar rótulo.
- Na lista suspensa Adicionar rótulo, selecione Variação da Receita.
- Expanda a seção Detalhes e alterne-a para Ativar.
- Arraste Receita % para alvo para o campo de dados Detalhes.
Seus cartões agora exibem rótulos de referência com detalhes: o cartão de Unidades mostra devoluções com taxa de devolução, e o cartão de Receita mostra a variação de receita com percentual para a meta. Você pode formatar ainda mais rótulos de referência, incluindo o uso de formatação condicional para ajustar cores com base em valores.
Adicionar uma imagem de nível superior
O visual do cartão pode exibir uma imagem junto com o valor do texto explicativo em vez de dentro dela. Esse layout é útil para imagens maiores e para SVGs que mostram mais detalhes do que um pequeno ícone de texto explicativo, como uma linha de tendência.
Para este exemplo, primeiro simplifique o cartão removendo os extras anteriores para que o gráfico de tendências possa assumir os holofotes:
- Selecione o visual do cartão.
- No campo Categorias , remova o Canal e a Linha do Produto.
- No painel Visualizações, selecione o ícone Formatar visual.
- Na guia Visual, expanda Rótulos de referência. Na lista suspensa Aplicar configurações , selecione Todos e, em seguida, selecione Redefinir para padrão na parte inferior da seção.
Agora, use as medidas de tendência criadas no script TMDL inicial para exibir um gráfico de linhas compacto e alterne para uma versão mais completa quando o usuário passar o cursor sobre o cartão.
As medidas Units 6mo trend, Units 6mo trend - hover, Revenue 6mo trend e Revenue 6mo trend - hover todas chamam a TrendSVGfunção DAX reutilizável definida pelo usuário para gerar um gráfico de linhas SVG dos últimos seis meses. As variantes ao passar o cursor adicionam segmentos sombreados (em verde quando sobem, em vermelho quando caem) e rótulos de valores em negrito de cada período.
Para exibir o gráfico de tendências como a imagem de nível superior em cada cartão e alternar para a variante hover quando um usuário aponta para o cartão:
- Selecione o visual do cartão.
- No painel Visualizações, selecione o ícone Formatar visual.
- Na guia Visual , expanda a seção Imagem .
- Na lista suspensa Aplicar configurações em, selecione Cartões = Unidades.
- Defina Estados como Padrão.
- Alternar Imagem para Ligado.
- Defina a origem da imagem como Selecionar dos dados.
- Selecione a tendência de Unidades 6mo na lista suspensa do campo.
- Defina Ajuste da imagem como Ajustar.
- Definir Estados como Passar o mouse.
- Alternar Imagem para Ligado.
- Defina a origem da imagem como Selecionar dos dados.
- Selecione Tendência de unidades em 6 meses - ao passar o mouse no menu suspenso do campo.
- Defina Ajuste da imagem como Ajustar.
- Na lista suspensa Aplicar configurações em, selecione Cartões = Receita.
- Defina Estados como Padrão.
- Alternar Imagem para Ligado.
- Defina a origem da imagem como Selecionar dos dados.
- Selecione a tendência de receita de 6 meses na lista suspensa do campo.
- Defina Ajuste da imagem como Ajustar.
- Definir Estados como Passar o mouse.
- Alternar Imagem para Ligado.
- Defina a origem da imagem como Selecionar dos dados.
- Selecione Tendência de receita em 6 meses - passar o mouse sobre no menu suspenso do campo.
- Defina Ajuste da imagem como Ajustar.
Cada cartão agora mostra um gráfico de linhas dos últimos seis meses da métrica correspondente, junto com o valor em destaque. Quando um usuário aponta para um cartão, o gráfico alterna para a variante hover com segmentos de aumento e queda sombreados e rótulos de valor.
Para enfatizar os gráficos de tendência ao lado dos valores em destaque, ajuste o layout do cartão:
- Em Texto explicativo, desative a alternância imagem para cada cartão para remover os ícones de texto explicativo.
- Em Layout de Cartões>, defina Disposição como Horizontal.
- Defina Order como Chamada, Imagem, Rótulos de referência.
- Defina tamanho do callout como 40%.
Aplicar formatação condicional
Você pode formatar condicionalmente muitos elementos no visual do cartão, como cor da fonte, cor da tela de fundo e cor da borda. Use a formatação condicional para chamar a atenção para cartões específicos com base nos dados subjacentes. Por exemplo, realce um cartão cuja receita não atinge sua meta. Para obter detalhes sobre os tipos de regra disponíveis e como configurá-los, consulte a visão geral da formatação condicional.
Visuais de cartão único e multicartão legados
Antes da versão de novembro de 2025, o Power BI incluía dois visuais de cartão separados: o visual de cartão único para exibir uma medida e o visual de várias placas para exibir várias medidas. Esses visuais herdados permanecem disponíveis para compatibilidade com versões anteriores. Os relatórios existentes que usam esses visuais continuam a ser renderizados sem alterações.
O novo visual de cartão substitui ambos os visuais herdados e é recomendado para novos relatórios. Quando você seleciona o ícone Cartão no painel Visualizações, ele cria o novo visual de cartão introduzido na versão de disponibilidade geral de novembro de 2025.
Para acessar os visuais herdados de cartão único e de vários cartões:
- No painel Visualizações , selecione os três pontos (...).
- Selecione Restaurar visuais padrão.
Os visuais herdados aparecem na área não fixada do painel de Visualizações, onde os visuais personalizados normalmente aparecem. Os usuários que precisam manter o comportamento legado devem continuar usando os visuais de cartão legado existentes em seus relatórios.
Considerações e limitações
Perguntas frequentes sobre cartões usados em relatórios durante a pré-visualização
Por que a configuração da coluna é redefinida para 10 ou a configuração da linha é redefinida para 10 quando eu a defini anteriormente como um número diferente?
Durante a visualização, você pode definir um número de coluna ou linha para uma grade, vertical ou horizontal de cartões. Após a versão de novembro de 2025, somente a configuração de disposição da grade será mantida. As configurações verticais e horizontais são redefinidas para 10 colunas e 10 linhas em relatórios já existentes, incluindo os publicados. As barras de rolagem podem aparecer em seus visuais de cartão existentes para acomodar essas configurações. Somente os relatórios publicados ou criados com o visual do cartão durante a pré-visualização são afetados.
Para retornar seus cartões para a coluna anterior e o número da linha, atualize essas configurações no Power BI Desktop de novembro de 2025 e publique o relatório ou edite o relatório na Web.
Por que as cartas ocupam mais espaço?
Durante a visualização, as configurações padrão tinham menos espaçamento interno nos cartões. Após o lançamento de novembro de 2025, mais preenchimento e opções de preenchimento foram adicionados ao cartão. O novo padrão é 12px.
Para localizar e ajustar essas configurações, pesquise "Espaçamento interno" no painel de formato e ajuste conforme necessário. Em alguns casos, alternar no preenchimento individual pode restaurar as configurações de preenchimento anteriores.
O preenchimento pode ser definido em um arquivo de tema personalizado ou adicionado ao seu próprio arquivo de tema personalizado para aplicá-los a todos os cartões em 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 obter mais informações, consulte temas de relatório do Power BI.
Por que há uma área de rótulo de referência em cartões que não possuem um rótulo de referência?
Durante a visualização, os rótulos de referência faziam parte da área de texto explicativo quando o divisor estava desativado. Após novembro de 2025, os rótulos de referência têm sua própria área. Depois que uma área é usada em pelo menos um cartão, os outros cartões mantêm essa área disponível para manter a consistência entre os cartões.
Por que o rótulo de referência está ocultando o texto no texto explicativo?
Durante a visualização, os rótulos de referência faziam parte da área de texto explicativo. Após novembro de 2025, os rótulos de referência têm sua própria área. Eles também agora ocupam 50% do cartão por padrão.
Para ajustar os tamanhos da área do cartão, vá para Cartões, verifique se o controle Aplicar configuração a está definido como Todos e, em Layout, ajuste o % do tamanho do Destaque.
Por que há uma cor de plano de fundo adicionada ao rótulo de referência do cartão?
Durante a visualização, a cor de fundo só aparecia quando a etiqueta de referência tinha um divisor. O divisor deu aos rótulos de referência sua própria área no cartão para, em seguida, aplicar um plano de fundo. Após o lançamento de novembro de 2025, os rótulos de referência sempre têm sua própria área com ou sem um divisor, e um fundo padrão é usado.
A tela de fundo pode ser desativada acessando layout de rótulos de referência>tela de fundo no painel de formato e desativando a configuração.
Essa configuração pode ser definida em um arquivo de tema personalizado ou adicionada ao seu próprio arquivo de tema personalizado para aplicá-los a todos os cartões em 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 obter mais informações, consulte temas de relatório do Power BI.
Por que não consigo ver minhas configurações de imagem no painel de formato?
Durante a visualização, a imagem de destaque foi adicionada usando a seção Imagem do painel de formato e mostrada na área ao lado do texto. Após novembro de 2025, essas imagens adicionadas anteriormente foram mantidas na área de Texto Explicativo e suas configurações foram movidas para a seçãoTexto Explicativo>Imagem no painel de formato. Definir a seção Imagem do painel de formato agora adiciona uma nova imagem ao cartão com sua própria área.
Por que minha imagem agora está ampliada?
Durante a visualização, as configurações padrão para o tamanho da imagem tiveram alguns bugs corrigidos pela atualização de novembro de 2025. Dependendo das configurações iniciais, a imagem pode parecer "ampliada" ou diferente de antes.
Para corrigir a imagem, no painel de formato, ajuste as configurações
Por que minha imagem de cabeçalho de categoria desapareceu?
Vá para as configurações de cabeçalho da categoria e ative novamente adicionar imagem. Sua imagem ainda deve estar lá.
Por que o novo visual do cartão em um relatório publicado tem uma aparência diferente da aparência no Power BI Desktop?
As diferenças entre a Área de Trabalho e o serviço podem ocorrer em dois cenários.
- Você está usando uma versão da Área de Trabalho antes de novembro de 2025, quando o cartão estava em versão prévia. Quando publicado no serviço, ele foi atualizado para ser a versão geralmente disponível do novo visual de cartão. Atualize seu Power BI Desktop ou edite o relatório na Web após a publicação para ajustar o estilo.
- Você está usando a versão de novembro de 2025 do Power BI Desktop e a atualização para o cartão geralmente disponível não está em sua região de serviço. Depois que a região do serviço é atualizada, o cartão tem a mesma aparência. Esse comportamento só deve ocorrer em algumas regiões no final de novembro de 2025.
Alterações no comportamento padrão da versão preliminar
O comportamento padrão do visual do cartão difere de seu comportamento de visualização. Em disponibilidade geral e em atualizações subsequentes, fizemos alterações para aprimorar a consistência do layout, o alinhamento visual e a experiência geral do usuário.
- Alinhamento da imagem de chamada: Durante a visualização, o alinhamento da imagem de chamada foi limitado pelo texto do rótulo de chamada, o que pode deixar parte do container de chamada vazio. Agora, a imagem se alinha ao contêiner de texto explicativo.
- Ajuste de imagem de plano de fundo: Durante a visualização, a imagem de plano de fundo pode se repetir para preencher o contêiner. Agora, as opções de ajuste de imagem se alinham com outras opções de imagem visual de ajuste, alongamento, preenchimento e centro.
- Preenchimento externo do rótulo de referência: Durante a visualização, os rótulos de referência tinham uma configuração de preenchimento externo que afetava involuntariamente a área de chamada, deslocando elementos ao redor do divisor. Agora, a configuração de preenchimento externo é removida dos rótulos de referência.
- Ajustar ao espaço (renomeado de Autogrid): Durante a pré-visualização, os elementos visuais deixariam uma coluna vazia para corresponder ao número especificado de colunas. Com a adição de Ajuste ao espaço, ele organiza cartões para preencher o contêiner visual com base nos cartões presentes. Essa configuração pode ser desativada para retornar ao comportamento anterior.
Configurações de formato
- O visual do cartão (novo) geralmente está disponível como o visual do cartão. Se você usou o visual do cartão durante a fase de visualização, poderá observar alterações de comportamento ou formatação que refletem melhorias introduzidas na disponibilidade geral e nas atualizações subsequentes.
- O novo visual de Cartão inclui o estilo padrão atualizado. Os cartões recém-criados podem parecer diferentes dos cartões legados e dos cartões criados durante a visualização, enquanto os visuais existentes permanecem inalterados.
- Ao formatar o visual do cartão, você pode notar que algumas das configurações de formato estão em um local diferente ou novo ou o nome da configuração é alterado.
- Nas versões anteriores do visual do cartão, a imagem do Texto Explicativo estava disponível como parte do cartão de imagem. Esta imagem agora está na seção Texto explicativo do painel Formatar .
- Certas configurações de Layout podem afetar relatórios existentes que usavam o visual de cartão durante sua fase de prévia. Esse efeito ocorre devido a atualizações feitas em todos os componentes do cartão como parte da versão de disponibilidade geral, incluindo aprimoramentos no layout, estilo e manipulação de imagem.
- Se você confiava anteriormente no layout de cartão de imagem, atualize seus visuais de acordo usando o painel Formatar para acessar e configurar as configurações de imagem de Destaque.
Conteúdo relacionado
- Visão geral das visualizações no Power BI
- Solucione os problemas de visualizações no Power BI