mailinapp
Documentation menu

ツリーマップブロック

値に応じた大きさのタイルを、くさび形に切り分けるのではなく、矩形に詰め込んで配置します — これは円グラフと同じ、カテゴリーごとに1つの値を入力する形式で、角度ではなく面積(「squarified」と呼ばれる、正方形に近い形に整えるレイアウト方式)で配置しているだけです。円グラフやドーナツグラフが答える「全体に対する割合」という同じ問いに対する、異なる視覚的な回答です。

仕組み

手入力した各行は1つのタイルになります。タイルの面積は、保持されているすべてのタイルの合計に対する、その値の比率に比例します。ツリーマップのタイルは、データモデルとしては円グラフのスライスと同一です: カテゴリーごとに1つの値、全体に対する割合という点は同じで、形状だけが異なります。そのため、このブロックは円グラフの入力用の列・色の割り当てロジック・統合の挙動をそのまま再利用しており、同じロジックを2つ目のチャートタイプのために複製してはいません。

この共通の系譜により、統合のルールも円グラフとまったく同じです: 8個を超えるカテゴリーでは、レイアウトが読み取れないほど断片化する代わりに、値が最小のタイルがまとめて1つの合成された「その他」のタイルに統合されます。統合を免れたタイルは、値によって並べ替えられるのではなく、元の入力順序をそのまま保ちます。これにより、色の割り当てが安定して予測可能な状態を保ちます。「その他」が存在する場合、常に最後に並びます。ラベルが空欄、または値がゼロ以下である行は、完全にスキップされます。ツリーマップのタイルは、全体に対するゼロや負の割合を表せないためです。

画像の下にある常に表示されるデータ表は、円グラフと同じ形です: カテゴリー・値・パーセントの列で、タイルごとに1行(統合された「その他」の行が存在する場合はそれも含みます)です。この表には、タイルの面積が表している正確なパーセンテージが、選択可能なテキストとして示されます。表の上にある凡例には、すべてのタイルが同じパーセンテージの数値とともに一覧表示され、系列数に応じて表示が制限されることなく常にレンダリングされます。ツリーマップ自身のタイトルは、棒グラフ・折れ線グラフの単独系列がブロックのタイトルを借用できるような形で、個々のタイルの名前になることはできません。

設定可能なフィールド:

  • チャートタイトル — チャートの上に表示される、任意の見出しテキストです。
  • データ — 行のリストです: カテゴリーラベル、数値の値、そして任意のタイルごとの色の上書きです。
  • カードの背景色、パディング、境界線、角の丸み。
  • タイトルの色・サイズと凡例の色・サイズ — 見出しと、画像の下にある凡例・データ表のテキストのスタイルです。

まだ行が1つも入力されていない場合、またはすべての行のラベルが空欄か値がゼロ以下である場合、ブロックは画像の描画をスキップします。タイトルとカードの枠だけをレンダリングし、代わりに「このチャートを表示するには、データを少なくとも1行追加してください」という簡単な通知を表示します。

例

チャネル別のトラフィックシェア — オーガニック、広告、リファラル、ダイレクト、ソーシャル — をタイルとして月次のマーケティングまとめに入れることで、パーセンテージの列を読まなくても、各流入元の相対的な大きさがすぐに把握できます。予算配分のメールでは、部門やプロジェクトごとの支出をタイル化して、今四半期に実際にお金がどこに流れたかを示せます。サポートチームは、チケット件数をカテゴリー(請求、バグ、オンボーディング、機能リクエスト)ごとにタイル化することで、関係者にサポート負荷がどこに集中しているかを素早く把握させることができます。

静的フォールバックの見え方

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Traffic share by channel</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="320"
       alt="Treemap: Organic 40 (40%), Paid 25 (25%), Referral 15 (15%), Direct 12 (12%), Social 8 (8%)" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Category</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Value</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Percent</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Organic</td>
      <td style="padding:4px 8px">40</td>
      <td style="padding:4px 8px">40%</td>
    </tr>
  </table>
</div>

alt属性には、すべてのタイルの値と全体に対する割合が書き出されています。その下の表は、統合された「その他」のタイルも含めて、同じ数値を選択可能なHTMLとして繰り返します。

関連ページ