適用対象:✅Power BI デスクトップとPower BI サービス
Power BI の カード ビジュアル には、柔軟で視覚的に魅力的な形式で主要なメトリックが表示されます。 各カードには、オプションの吹き出し画像、参照ラベル、補足情報を含む測定値が表示されます。 1 つのビジュアルに複数のカードを表示したり、カテゴリ別に分割したり、レポート デザインに合わせてレイアウトをカスタマイズしたりできます。
複数のメジャーと参照ラベルを 1 つのビジュアルに結合すると、ビジュアルの読み込み時間が短縮され、基になるクエリがセマンティック モデルに最適化されるため、レポートのパフォーマンスが向上します。 データドリブン イメージを使用して、データに応答するカスタム視覚化を作成することもできます。
注記
(新しい) カード ビジュアルは、カード ビジュアルとして一般提供されています。 レガシ カード ビジュアルを含むレポートでは、引き続きレガシ カード ビジュアルが使用されます。
カード ビジュアルを作成する
[ 視覚化 ] ウィンドウで、[ビジュアルの ビルド ] タブを選択し、ビジュアル ギャラリーから カード ビジュアルを選択します。
メジャーまたは任意のデータ列を [値 ] フィールド ウェルに追加します。
![[視覚化] ウィンドウの [値] フィールドウェルに StoreCount メジャーと TotalSalesLY メジャーが追加された [データ] ペインのスクリーンショット。](media/power-bi-visualization-card-visual/build-card.png)
![[視覚化] ウィンドウの [値] フィールドウェルに StoreCount メジャーと TotalSalesLY メジャーが追加された [データ] ペインのスクリーンショット。](media/power-bi-visualization-card-visual/build-card.png#lightbox)
これで、単純なカードが作成されました。 必要な数の値を追加して、表示されるカードを増やすことができます。
カードビジュアルレイアウトをカスタマイズする
カード ビジュアルには、ビジュアルをより整理して視覚的に魅力的にするために、いくつかのレイアウト オプションが用意されています。 [視覚化] ウィンドウで [ビジュアルの書式設定] アイコンを選択し、[ビジュアル] タブを選択して、これらの設定にアクセスします。
カード レイアウト
カード>レイアウトは、各カード内での要素の配置方法を制御します。 各カードには、吹き出し、画像、および参照ラベルの 3 つのセクションを含めることができます。 これらの設定を使用して、これらの要素の配置、配置、間隔を調整します。
カードビジュアルには動的 なコラージュ レイアウトが含まれており、1つのセクションを強調表示し、残りの2つのセクションは残りのスペースを共有します。 吹き出し、参照ラベル、ヒーロー イメージの表示順序をカスタマイズし、それぞれ異なる背景色を付けることもできます。
![適用できるカードと画像の設定が表示された [イメージ] ウィンドウのスクリーンショット。](media/power-bi-visualization-card-visual/enhanced-layout.png#lightbox)
吹き出しレイアウト
吹き出し>レイアウトは、各カードの吹き出しセクション内の吹き出しの垂直方向の配置とサイズを制御します。
参照ラベルのレイアウト
[参照ラベル] レイアウト設定は、各カードの参照ラベル セクション内での参照ラベルの編成方法を制御します。 参照ラベルの垂直方向と水平方向の配置を調整したり、ギャップ、パディング、背景などを含む外観をカスタマイズしたりできます。
マルチカード レイアウト
マルチカード レイアウトでは、ビジュアル コンテナー内に複数のカードがどのように収まるかをカスタマイズします。 複数の値がある場合、この設定はカードの配置を制御します。
複数カテゴリのレイアウト
複数カテゴリのレイアウトでは、各カテゴリ セクションのレイアウト方法が書式設定されます (カナダ、ドイツなど)。 カード ビジュアルにカテゴリを追加する場合は、この設定を使用します。 各カテゴリ セクション内で、カードはマルチカード レイアウトの設定に従って配置されます。
固定サイズとスペースに合わせたフィット
[ マルチカード レイアウト ] セクションでは、ビジュアル コンテナー内でカードのサイズを制御できます。
- 固定サイズ: このオプションをオンに切り替えて、各カードの正確なピクセルサイズを指定します。 指定したサイズのすべてのカードを表示するのに十分な大きさのビジュアル コンテナーがない場合は、スクロール バーが自動的に表示されます。 ビジュアルのサイズを変更すると、カードは比例してスケーリングされるのではなく、指定された寸法を維持します。
- スペースに合わせる: オンにすると、カードは存在するカードに基づいてビジュアルコンテナを埋めるように拡大または縮小されます。 オフにすると、少ないカードが存在する場合でも、指定したカード数の領域がビジュアルによって予約されます。
固定サイズとスペースに合わせるは相互に排他的です。 固定サイズを有効にすると、寸法が明示的に制御されるようになったため、[スペースに合わせる]は無効になります。
画像の追加
Power BI のカード ビジュアルを使用すると、メトリックと複数の画像オプションを組み合わせた視覚的に魅力的なカードを作成できます。
- 画像: 製品の写真、キャンペーン グラフィック、またはブランド化された画像をカード内で直接紹介できる、大きく目立つ画像。 書式設定ウィンドウの [イメージ ] セクションで、このオプションを構成します。
- 吹き出しの画像: 微妙な機能強化を提供する吹き出し内の小さな画像。メトリックの表示を圧倒することなく、ブランド化要素や小さな視覚的な手掛かりに適しています。 吹き出し>イメージでこのオプションを設定します。
- カテゴリ ヘッダーの背景画像: カード ビジュアルにカテゴリを追加した場合のカテゴリ ヘッダーの背景画像。 [カテゴリ ヘッダー] セクションでこのオプションを構成します。
カード ビジュアルに画像を追加するには:
- イメージを追加します。 カード ビジュアルが選択されている状態で、[視覚化] ウィンドウの [ビジュアルの書式設定 ] アイコン を 選択します。 [ ビジュアル ] タブで、[ イメージ ] カードを展開します。 [ カード ] ドロップダウンでカードを選択し、[ イメージ ] トグルを オンに設定します。
- 吹き出しイメージを追加する: [視覚化 ] ウィンドウで、[ ビジュアルの書式設定 ] アイコンを選択します。 [ ビジュアル ] タブで、[ 吹き出し ] カードを展開します。 [ 設定の適用] でカードが選択されていることを確認し、[ イメージ ] コントロールを展開して、[ イメージ ] トグルを オンに設定します。
すべての画像の種類について、ローカル デバイスからアップロードするか、画像 URL ( OneLake の画像ファイルへのリンクを含む) を貼り付けるか、データ列から画像を選択することで、画像を追加できます。 また、イメージのフィット感をカスタマイズしたり、さまざまな画像効果を選択して外観を向上させることもできます。
画像の状態
[Image]\(イメージ\) セクションには、[States]\(状態\) ドロップダウンがあり、既定の状態とホバー状態に個別の画像設定を定義できます。 ホバー状態を使用して、ユーザーがカードをポイントしたときのイメージの表示方法を変更します。たとえば、イメージ ソースのスワップ、イメージのフィットの調整、背景色の変更などです。
- カード ビジュアルが選択されている状態で、[視覚化] ウィンドウの [ビジュアルの書式設定 ] アイコン を 選択します。
- [ ビジュアル ] タブの [ イメージ ] セクションを展開します。
- 設定の適用先 領域で、カード ドロップダウンから書式設定するカードを選択します。
- 状態をホバーに設定します。
- ユーザーがカードをポイントしたときに適用するイメージ ソース、イメージのフィット、透明度、効果、背景色を構成します。
ホバー状態に対して構成する設定は、ユーザーがカードをポイントする場合にのみ適用されます。 既定の状態は、イメージの通常の外観を制御します。
注記
カードビジュアルにカテゴリを追加し、すべてのカードが異なる画像ではなく同じ画像を表示する場合は、[ 設定を適用する ] ドロップダウンをオンにします。 この設定が [すべて] の場合、ビジュアルはすべてのカードに同じ画像を適用します。 カードごとに異なる画像を割り当てるには、データ列の画像など、特定のコールアウト値を選択します。
![画像をアップロードしてカスタマイズするために[イメージ]が選択されている [ビジュアル] ペインのスクリーンショット。](media/power-bi-visualization-card-visual/add-image.png#lightbox)
カテゴリを追加する
カード ビジュアルにカテゴリを追加するには、[視覚化] ウィンドウの [ビジュアルの作成] セクションの [カテゴリ] フィールドウェルにフィールドをドラッグします。 カテゴリを追加すると、カードビジュアルが展開され、カテゴリ値ごとに個別のセクションが表示され、各セクションにはそのカテゴリにスライスされたデータが表示されます。
カテゴリ ヘッダーは選択可能であり、選択するとレポート内の他のビジュアルをフィルター処理できます。 この動作により、ユーザーはカード ビジュアルを操作して、さまざまなセグメントのデータを探索できます。
カテゴリの選択
カテゴリ ヘッダーを選択すると、他のカテゴリ カードが淡色表示され、現在の選択が示されます。 次のようにすることができます。
- 複数のカテゴリを選択する: Ctrl キーを押 しながら他のカテゴリ ヘッダーを選択し、複数の値でフィルター処理します。
- カテゴリの選択を解除する: カテゴリ ヘッダーをもう一度選択して、選択項目から削除します。
- フィルター処理対象のビジュアルを制御: 書式設定メニューでインタラクションの編集を使用し、カード ビジュアルの選択に影響を受けるレポート ページ上のビジュアルを選択します。
カテゴリ セクションのレイアウトは、[ビジュアル] タブの下の [書式] ウィンドウの [複数カテゴリ レイアウト] セクションによって制御されます。各カテゴリ セクション内では、個々のカードの配置は、マルチカード レイアウト セクションによって引き続き制御されます。 各カード内の要素 (吹き出し、画像、参照ラベルなど) は、[ カード>レイアウト ] セクションによって制御されます。
完全な番号の表示または表示単位の変更
既定では、カード ビジュアルのコールアウト値は、表示単位 が Auto に設定されており、大きい数値は K (千)、M (百万)、または B (10 億) の接尾辞を付けて省略表示されます。 たとえば、 11,732 は 12Kとして表示されます。 完全な数値を表示し、K、M、または B のサフィックスを削除するには、表示単位を None に変更します。
- カードビジュアルを選択します。
- [視覚化] ウィンドウで、[ビジュアルの書式設定] アイコンを選択します。
- [ ビジュアル ] タブで、[ 吹き出しの値>Values] を展開します。
- [表示単位] を [なし] に設定します。
カスタム書式指定文字列を適用しても、値に K、M、または B のサフィックスが表示される場合は、 表示単位 の設定が書式指定文字列ではなく原因になります。 詳細については、 不要な自動スケーリングのトラブルシューティングを参照してください。
カードのチュートリアル
このチュートリアルに従って、包括的なカード ビジュアルを段階的に構築します。
注記
このチュートリアルでは、新しいレポートの既定値である Fluent 2 基本テーマを使用します。
サンプル データ
このチュートリアルの例に従うには、空白の Power BI Desktop レポートにサンプル テーブル、メジャー、および再利用可能な傾向関数を設定します。
Power BI Desktop を開き、新しい空のレポートを作成します。
左側の TMDL を選択して TMDL ビューを開きます。
次の TMDL スクリプトを貼り付けて、[ 適用] を選択します。
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"]このスクリプトでは、6 か月間のサンプル データ、チュートリアル全体で使用される基本メジャー、引き出しアイコン メジャー (、
Units callout image)、傾向メジャー (Revenue callout image、Units 6mo trend、Units 6mo trend - hover、Revenue 6mo trend)、およびオプションのホバーバリアントを含む SVG 折れ線グラフをレンダリングする再利用可能なRevenue 6mo trend - hoverDAX ユーザー定義関数を含むTrendSVGテーブルが作成されます。
基本カードを作成する
[ 視覚化 ] ウィンドウで、[ビジュアルの ビルド ] タブを選択し、ビジュアル ギャラリーから カード ビジュアルを選択します。
[単位] を [値] フィールドウェルにドラッグします。
[収益] を [値] フィールドウェルにドラッグします。
これで、合計ユニット数と総収益を表示するマルチカード ビジュアルが作成されました。
吹き出しイメージを追加する
カードをより視覚的に魅力的にするには、吹き出し領域に画像を追加します。 最初の TMDL スクリプトでは、単純な SVG アイコンを返す 2 つのメジャーが既に作成されています。 Units callout image (円内の # 記号) と Revenue callout image (円内の $ 記号)。 それらをカードに割り当てるには:
- カードビジュアルを選択します。
- [視覚化] ウィンドウで、[ビジュアルの書式設定] アイコンを選択します。
- [ ビジュアル ] タブで、[ 吹き出し] を展開します。
- [ 設定を適用する ] ドロップダウンで、[ 単位] を選択します。
- [イメージ] を展開し、[オン] に切り替えます。
- [イメージの種類] を [データから選択] に設定します。
- フィールドドロップダウンから[単位吹き出しイメージ]を選択します。
- [イメージのフィット] を [中央] に設定します。
- サイズを 40 px に設定します。
- [ 設定を適用する ] ドロップダウンで、[収益] を選択 します。
- [イメージ] を展開し、[オン] に切り替えます。
- [イメージの種類] を [データから選択] に設定します。
- フィールドドロップダウンから 収益吹き出し画像 を選択します。
- [イメージのフィット] を [中央] に設定します。
- サイズを 40 px に設定します。
各カードには、メトリック値と共に吹き出し領域にシンボル アイコンが表示されるようになりました。
カテゴリ別に表示
セグメントごとに分類されたデータを表示するカテゴリを追加します。
- [ データ ] ウィンドウで、[ チャネル ] を [カテゴリ ] フィールドウェルにドラッグします。
- [Product Line]\(製品ライン\) を [カテゴリ] フィールドウェルにドラッグして、各チャネル内の製品ラインごとにデータをさらに分割します。
- [視覚化] ウィンドウで、[ビジュアルの書式設定] アイコンを選択します。
- [ ビジュアル ] タブで、[ 複数カテゴリレイアウト] を展開します。
- [ レイアウト] を展開し、[ スペースに合わせる] を オフに切り替え、[ 行] を 6 に設定してすべてのカテゴリを表示します。
注記
[スペースに合わせる] がオンの場合、行の最大数は 4 です。 さらに行を表示するには、[ スペースに合わせる] をオフにします。
カード ビジュアルには、チャネルと製品ラインの組み合わせごとに個別のセクションが表示され、各セクションには、ユニットと収益が吹き出し画像と共に表示されます。
参照ラベルを追加する
参照ラベルは、メイン メトリックのコンテキストを提供します。 詳細な値を参照ラベルに追加して、より詳細な情報を得ることもできます。
- [視覚化] ウィンドウで、[ビジュアルの書式設定] アイコンを選択します。
- [ ビジュアル ] タブの [ 参照ラベル ] セクションを展開します。
- [ 設定を適用する ] ドロップダウンで、[ 単位] を選択します。
- 返却 を ラベル追加 データフィールドにドラッグします。
- [ ラベルの追加] ドロップダウンで、[ 戻る] を選択します。
- [詳細] セクションを展開し、[オン] に切り替えます。
- [戻り率] を [詳細] データ フィールドにドラッグします。
- [ 設定を適用する ] ドロップダウンで、[収益] を選択 します。
- [収益差異] を [ラベルデータ追加] フィールドにドラッグします。
- [ ラベルの追加] ドロップダウンで、[ 収益差異] を選択します。
- [詳細] セクションを展開し、[オン] に切り替えます。
- Revenue % を [詳細] データ フィールドのターゲットにドラッグします。
カードに詳細を含む参照ラベルが表示されるようになりました。[単位] カードには返品率が表示され、[収益] カードには目標に対する収益の差異が表示されます。 条件付き書式を使用して値に基づいて色を調整するなど、参照ラベルをさらに書式設定できます。
最上位レベルのイメージを追加する
カード ビジュアルでは、画像をカード内ではなくコールアウト値と並べて表示できます。 このレイアウトは、大きな画像や、傾向線などの小さな吹き出しアイコンよりも詳細を表示する SVG に役立ちます。
この例では、まず、前の追加部分を削除してカードを簡略化し、傾向グラフがスポットライトを浴びることができるようにします。
- カードビジュアルを選択します。
- [カテゴリ] フィールドウェルから、チャネルと製品ラインを削除します。
- [視覚化] ウィンドウで、[ビジュアルの書式設定] アイコンを選択します。
- [ ビジュアル ] タブで、[ 参照ラベル] を展開します。 [ 設定を適用する ] ドロップダウンで、[ すべて] を選択し、セクションの下部にある [ 既定値にリセット ] を選択します。
次に、最初の TMDL スクリプトで作成した傾向メジャーを使用してコンパクトな折れ線グラフを表示し、ユーザーがカードにポインターを合わせたときに、より詳細なバリアントに切り替えます。
Units 6mo trend、Units 6mo trend - hover、Revenue 6mo trend、およびRevenue 6mo trend - hoverはすべて、再利用可能な TrendSVGDAX ユーザー定義関数を呼び出して、過去 6 か月間の SVG 折れ線グラフをレンダリングします。 ホバーバリアントは、各期間に網掛けされたセグメント(上昇時は緑、落下時は赤)と太字の値ラベルを追加します。
傾向グラフを各カードの最上位の画像として表示し、ユーザーがカードをポイントしたときにホバー バリアントに切り替えるには:
- カードビジュアルを選択します。
- [視覚化] ウィンドウで、[ビジュアルの書式設定] アイコンを選択します。
- [ ビジュアル ] タブの [ イメージ ] セクションを展開します。
- [ 設定を適用する ] ドロップダウンで、[ カード = Units] を選択します。
- 状態を既定値に設定します。
- [イメージ] を [オン] に切り替えます。
- [イメージ ソース] を [データから選択] に設定します。
- フィールドのドロップダウンから単位 6か月推移を選択します。
- [イメージのフィット] を [フィット] に設定します。
- 状態をホバーに設定します。
- [イメージ] を [オン] に切り替えます。
- [イメージ ソース] を [データから選択] に設定します。
- フィールドのドロップダウンからUnits 6mo trend - hoverを選択します。
- [イメージのフィット] を [フィット] に設定します。
- [ Apply settings to]\(設定を適用する\ ) ドロップダウンで、[ カード = Revenue] を選択します。
- 状態を既定値に設定します。
- [イメージ] を [オン] に切り替えます。
- [イメージ ソース] を [データから選択] に設定します。
- フィールドのドロップダウンから [Revenue 6mo trend]\(収益 6mo の傾向 \) を選択します。
- [イメージのフィット] を [フィット] に設定します。
- 状態をホバーに設定します。
- [イメージ] を [オン] に切り替えます。
- [イメージ ソース] を [データから選択] に設定します。
- [ Revenue 6mo trend - hover from the field dropdown]\(収益 6mo 傾向 - ホバー \) をフィールド ドロップダウンから選択します。
- [イメージのフィット] を [フィット] に設定します。
各カードには、メトリックの末尾の 6 か月間の折れ線グラフが引き出し値と共に表示されるようになりました。 ユーザーがカードをポイントすると、グラフは、影付きの立ち上がりセグメントと立ち下がりセグメントと値ラベルを持つホバー バリアントにスワップされます。
引き出し値と共に傾向グラフを強調するには、カードレイアウトを調整します。
- 吹き出し で、各カードの 画像 トグルをオフにして、吹き出しアイコンを非表示にします。
- [ カード>レイアウト] で、[ 配置] を [水平] に設定します。
- 順序 を 吹き出し、画像、参照ラベル に設定します。
- 吹き出しのサイズを 40%に設定します。
条件付き書式を適用する
カード ビジュアルでは、フォントの色、背景色、罫線の色など、多くの要素を条件付きで書式設定できます。 条件付き書式を使用して、基になるデータに基づいて特定のカードに注意を引きます。 たとえば、収益が目標を下回るカードを強調表示します。 使用可能なルールの種類とその構成方法の詳細については、「 条件付き書式の概要」を参照してください。
従来のシングル カードとマルチカードのビジュアル
2025 年 11 月のリリースより前の Power BI には、2 つの個別のカード ビジュアル (1 つのメジャーを表示するための シングル カード ビジュアルと、複数のメジャーを表示するための マルチカード ビジュアル) が含まれていました。 これらのレガシー ビジュアルは、後方互換性のために引き続き利用可能です。 これらのビジュアルを使用する既存のレポートは、変更なしで引き続き表示されます。
新しい カード ビジュアル は、両方のレガシ ビジュアルに代わるものであり、新しいレポートに推奨されます。 [視覚化] ウィンドウで [カード] アイコンを選択すると、2025 年 11 月の一般提供リリースで導入された新しいカード ビジュアルが作成されます。
従来のシングル カードとマルチカードのビジュアルにアクセスするには:
- [視覚化] ウィンドウで、3 つのドット (...) を選択します。
- [ 既定のビジュアルを復元する] を選択します。
従来のビジュアルは、カスタムビジュアルが通常表示される[ビジュアル化ペイン]の固定されていない領域に表示されます。 従来の動作を維持する必要があるユーザーは、引き続きレポートで既存のレガシ カード ビジュアルを使用する必要があります。
考慮事項と制限事項
プレビュー期間中にレポートで使用されるカードについてよく寄せられる質問
以前に別の数値に設定した場合、列設定が 10 にリセットされるか、行設定が 10 にリセットされるのはなぜですか?
プレビュー中は、グリッド、垂直、または水平方向のカードの配置に列または行番号を設定できます。 2025 年 11 月のリリース後は、グリッド配置設定のみが保持されます。 垂直方向と水平方向の配置は、パブリッシュされたレポートを含む既存のレポートで 10 列と 10 行にリセットされます。 これらの設定に合わせて、既存のカード ビジュアルにスクロール バーが表示される場合があります。 プレビュー中にカード ビジュアルで発行または作成されたレポートのみが影響を受けます。
カードを前の列と行番号に戻すには、2025 年 11 月 Power BI Desktop でこれらの設定を更新し、レポートを発行するか、Web でレポートを編集します。
カードの容量が増えるのはなぜですか?
プレビュー期間中、既定の設定ではカードの余白が少なくなっていました。 2025年11月のリリース後、カードには余白と余白設定のオプションが追加されました。 新しい既定値は 12px です。
これらの設定を検索して調整するには、書式ウィンドウで 「パディング」を検索し、必要に応じて調整します。 場合によっては、 個々のパディング を切り替えることで、以前のパディング設定が復元される場合があります。
埋め込みは、カスタム テーマ ファイルで設定することも、独自のカスタム テーマ ファイルに追加して、レポート内のすべてのカードに適用することもできます。
{
"$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
}]
}
}
}
}
詳細については、「 Power BI レポートのテーマ」を参照してください。
参照ラベルのないカードに参照ラベル領域があるのはなぜですか?
プレビュー中、分割線がオフになっているとき、参照ラベルは引き出し領域の一部でした。 2025 年 11 月以降、 参照ラベル には独自の領域があります。 領域が少なくとも 1 つのカードで使用されると、他のカードはその領域を使用してカード間の一貫性を維持します。
参照ラベルが吹き出しのテキストを隠しているのはなぜですか?
プレビュー期間中、 参照ラベル は吹き出し領域の一部でした。 2025 年 11 月以降、 参照ラベル には独自の領域があります。 また、既定でカードの 50% を使用するようになりました。
カード領域のサイズを調整するには、[ カード] に移動し、[コントロールに 適用] 設定 が [すべて] に設定されていることを確認し、[ レイアウト] で [吹き出しのサイズ ] %を調整します。
カード参照ラベルに背景色が追加されているのはなぜですか?
プレビュー中は、参照ラベルに分割線がある場合にのみ背景色が表示されます。 ディバイダーは、カード内の参照ラベルに独自の領域を与え、背景を適用しました。 2025 年 11 月のリリース後、参照ラベルには常に区切り線の有無に関係なく独自の領域があり、既定の背景が使用されます。
背景をオフにするには、ラベルのレイアウトを参照>書式設定ウィンドウの背景に移動し、設定をオフにします。
この設定は、カスタム テーマ ファイルで設定することも、独自のカスタム テーマ ファイルに追加して、レポート内のすべてのカードに適用することもできます。
{
"$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
}]
}
}
}
}
詳細については、「 Power BI レポートのテーマ」を参照してください。
フォーマット ウィンドウに画像の設定が表示されないのはなぜですか?
プレビュー中、吹き出しイメージは書式設定ウィンドウの [イメージ ] セクションを使用して追加され、テキストの横の吹き出し領域に表示されます。 2025 年 11 月以降、以前に追加したイメージは引き出し領域に保持され、設定は書式設定ウィンドウの [Callout>Image ] セクションに移動しました。 書式設定ウィンドウの [イメージ ] セクションを設定すると、独自の領域を持つ新しいイメージがカードに追加されるようになりました。
画像が拡大されているのはなぜですか?
プレビュー期間中、イメージのサイズの既定の設定には、2025 年 11 月の更新プログラムによって修正されたバグがいくつか含まれています。 初期設定に応じて、画像が "拡大" されているか、以前とは異なる場合があります。
イメージを修正するには、[書式] ウィンドウで、吹き出し>イメージのフィット設定をフィットまたは中央に調整し、同じ書式設定セクションのサイズとイメージ領域のサイズコントロールを確認します。 この設定は新しい場所にあり、最上位レベルの イメージ セクションがカード イメージ用になりました。
カテゴリヘッダーの画像が消えたのはなぜですか?
[カテゴリ ヘッダーの設定] に移動し、[画像の追加] をオンに戻します。 画像は引き続きそこに残っているはずです。
発行されたレポートの新しいカード ビジュアルがデスクトップの外観と異なるのはなぜですか?
Desktop とサービスの違いは、2 つのシナリオで発生する可能性があります。
- カードがプレビュー段階だった 2025 年 11 月より前のバージョンのデスクトップを使用しています。 サービスに公開されると、新しいカード ビジュアルの一般公開バージョンにアップグレードされました。 Power BI Desktop を更新するか、発行後に Web でレポートを編集してスタイルを調整します。
- あなたは 2025 年 11 月バージョンの Power BI Desktop を使用しており、一般利用可能なカードの更新はあなたのサービスリージョンにありません。 サービス リージョンが更新されると、カードは同じように見えます。 この動作は、2025 年 11 月下旬のいくつかのリージョンでのみ発生する必要があります。
プレビューからの既定の動作の変更
カード ビジュアルの既定の動作は、プレビュー動作とは異なります。 一般公開以降の更新では、レイアウトの一貫性、視覚的な配置、および全体的なユーザー エクスペリエンスを強化するための変更が行われました。
- 吹き出しイメージの配置: プレビュー中は、整列された吹き出しイメージが吹き出しラベルのテキストに制限され、吹き出しコンテナーの一部が空のままになる場合があります。 これで、画像が吹き出しコンテナーに整列します。
- 背景画像の適合: プレビュー中は、背景画像が繰り返して表示され、コンテナーを満たすことがある可能性があります。 これで 画像のフィット オプションが、フィット、ストレッチ、塗りつぶし、中央の他の視覚的画像オプションと整合するようになりました。
- 参照ラベルの外側のパディング: プレビュー中、参照ラベル には外側のパディング設定がありました。この設定は、要素を区切り線の周囲に押し出して、吹き出し領域に意図せず影響を与えました。 これで、 外部パディング 設定が 参照ラベルから削除されました。
- スペースに合わせる (オートグリッドから名前が変更): プレビュー中、ビジュアルでは、指定された列数に一致する空の列が残ります。 「スペースにフィット」を追加すると、既存のカードに基づいて視覚的なコンテナを満たすようにカードを配置します。 この設定をオフにして、前の動作に戻すことができます。
書式の設定
- (新しい) カード ビジュアルは、カード ビジュアルとして一般提供されています。 プレビュー フェーズ中にカード ビジュアルを使用した場合は、一般提供および以降の更新で導入された機能強化を反映した動作や書式設定の変更に気付く場合があります。
- 新しいカード ビジュアルには、更新された既定のスタイル設定が含まれています。 新しく作成されたカードは、従来のカードとプレビュー中に作成されたカードとは異なる場合があり、既存のビジュアルは変更されません。
- カード ビジュアルを書式設定するときに、一部の書式設定が別の場所または新しい場所にあるか、設定の名前が変更されていることに気付く場合があります。
- 以前のバージョンのカード ビジュアルでは、 吹き出し イメージは イメージ カードの一部として使用されていました。 この画像は、書式ウィンドウの吹き出しセクションにあります。
- 特定の レイアウト配置 は、プレビュー フェーズ中にカード ビジュアルを使用した既存のレポートに影響する可能性があります。 この効果は、一般提供リリースの一部として、レイアウト、スタイル設定、画像処理の機能強化など、すべてのカード コンポーネントに対して行われた更新が原因です。
- 以前にイメージ カード レイアウトに依存していた場合は、[書式] ウィンドウを使用して、吹き出しイメージの設定にアクセスして構成することで、ビジュアルを適宜更新します。
関連するコンテンツ
Power BI - Power BI でのビジュアライゼーションのトラブルシューティング