mailinapp
Documentation menu

レーダーチャートブロック

複数の軸を使った比較チャートです — 最大3つの系列を、共有された軸の集合上にプロットし、バーや線ではなく、重なり合ったポリゴン(いわゆる「Web」)として描きます。価格・品質・スピード・サポートで評価した製品や、同じ基準の上で比較したプランティアのように、複数の観点で同時にカテゴリーを比較するための形です。

仕組み

手入力した各行が1つの軸になります。円周上のその位置は、純粋に入力した順序だけから決まります(角度は行のインデックスを行数で割った値です)。値によって並べ替えられたり、ソートされたりすることは一切ありません。最大3つの系列が、それぞれの値をすべての軸の上にプロットし、1つの0〜最大値のスケールを共有します: これは、棒グラフや折れ線グラフが既に使っている「1つの共有された値の軸」というモデルと同じものを、直線に沿ってではなく放射状に配置しただけです。そのため、レーダーの行のリストは、棒グラフ・折れ線グラフとまったく同じ入力用の列を再利用しています — レーダーの軸は、データモデルとしては棒グラフのカテゴリーと同一です。

ポリゴンが意味のある形になるには、少なくとも3つの頂点が必要です — 2点では線しか描けず、1点では何も描けません。そのため、レーダーはこのブロック群の中で、上限だけでなく下限も持つ唯一のチャートです。入力された軸が3本未満(ゼロを含む)の場合、このブロック群の他の場所で空のチャートに表示されるのと同じ「データを追加してください」というプレースホルダーが表示されます。反対側では、レーダーの上限は8軸です。それを超えると、軸の線が密集し、軸のラベルが重なり始めます — これは、このブロック群の他のすべてのチャートタイプが、8個のカテゴリー・スライス・系列で課している「マークが多すぎる」という上限と同じものです。

画像の下にある常に表示されるデータ表には、すべての軸が行として一覧表示され、有効な系列ごとに1つの列があります — これは、棒グラフ・折れ線グラフの表が既に使っている、カテゴリー×系列という同じ形です。凡例は、系列が2つ以上使われている場合にのみ表示されます。単一の系列の識別は、既にブロック自身のタイトルによって示されており、これは棒グラフ・折れ線グラフが従っている慣例と同じです。

系列の識別は、名前を付けたかどうかによって決まります。系列1は常に有効で、名前を付けなければブロック自身のタイトルにフォールバックしますが、系列2と系列3は、ラベルフィールドに名前を入力した時点でのみ表示されます。系列名のない、半分だけ入力された値の列が、ラベルのない幻の系列として表示されることはありません。

設定可能なフィールド:

  • チャートタイトル — チャートの上に表示される、任意の見出しテキストです。
  • データ(3行以上) — 行のリストです: 各行に軸のカテゴリーラベルと、最大3つの数値系列の値を入力します。
  • 系列1/2/3の名前と系列1/2/3の色 — 系列1は無条件にレンダリングされ、系列2と系列3は名前を付けた時点でのみレンダリングされます。
  • カードの背景色、パディング、境界線、角の丸み。
  • タイトルの色・サイズと凡例の色・サイズ — 見出しと、画像の下にある凡例・データ表のテキストのスタイルです。

例

価格・機能の深さ・サポートの対応力・セットアップの容易さといった共通の基準で2つの製品ティアを比較する際に、1つのレーダーチャート上で重なり合う2つの系列として示すことで、営業やマーケティングのメールに、機能比較表の代わりとなる1枚のビジュアルを用意できます。社内の運用まとめでは、いくつかのベンダーや業務委託先を、同じ基準(コスト・品質・信頼性・コミュニケーション)で評価し、更新の判断をひと目で正当化できます。複数の評価軸(使いやすさ・価値・サポート・信頼性・デザイン)を持つ顧客調査を行っているプロダクトチームは、各軸の平均スコアを1つの系列としてグラフ化し、前四半期のスコアを2つ目の系列にすることで、変化を示すこともできます。

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

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Vendor scorecard</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="360" height="360"
       alt="Radar chart: Speed (Vendor A 8); Reliability (Vendor A 6); Design (Vendor A 9); Price (Vendor A 5); Support (Vendor A 7)" />
  <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">Vendor A</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Speed</td>
      <td style="padding:4px 8px">8</td>
    </tr>
  </table>
</div>

名前の付いた系列が1つだけの場合、凡例は省略されます(タイトルが既にその名前を示しているためです)。ただし、データ表にはすべての軸と値が引き続き一覧表示されます。

関連ページ