折れ線・エリアグラフブロック

順序のある一連のデータ(週・月・時間経過に伴うファネルの各ステージなど)のトレンドを、線として描画します。塗りつぶしトグルをオンにすると、線の下を色で塗ったエリアとして描画します。最大3系列です。

仕組み

このチャートは、サーバー側で生成された1枚のPNG画像としてレンダリングされます — クライアント側のチャートライブラリもJavaScriptも使いません — その画像のすぐ下には、画像が描く数値をすべて繰り返す、常に表示されるHTMLのデータ表が置かれます。これは、このブロック群のすべてのチャートが守っている、妥協のない組み合わせと同じもので、テキストのみのメールクライアント、画像がブロックされた受信ボックス、画像オフの状態でもトレンドを読み取れるようにしています。

入力形式は棒グラフとまったく同じです: 1つのカテゴリー列(ここでは通常、時間の区分 — 「Week 1」「Mon」「Q1」など — ですが、順序のあるラベルなら何でも構いません)と、最大3つの数値系列列です。系列1は常に有効で、名前を設定しなければチャート自身のタイトルをそのまま系列名として借用します。系列2と系列3は、名前を与えた時点でのみ有効になるため、系列ラベルのない半分だけ入力された値の列が、名前のない幻の線として表示されることはありません。有効な系列はそれぞれ、独自の色を持つ線として描画されます。凡例は、系列が2つ以上有効な場合にのみ表示されます。

塗りつぶしトグルは、折れ線グラフをエリアグラフに変えます: 各線の下の領域が、軸まで低い不透明度で塗られます。これはトグルであって別のブロックではありません。どちらの見え方でも、元になるデータモデル・軸・カテゴリーの形式は完全に同じで、線の描画方法だけが変わるためです。複数の系列を塗りつぶした場合でも、それぞれの系列色を低い不透明度で保つため、重なった領域も視覚的に区別できます。このブロックは2軸を決して使わないため、塗りつぶした複数の系列も常に1つの値スケールを共有します。

ポイントマーカー(各データ値の位置に描かれる小さな塗りの円)は、カテゴリーがおおよそ20個までの間、線の上に描かれます。それを超えると、マーカーは徐々に間引かれ、個別には描画されなくなります。密度が高い状態でマーカーを描くと、線に沿った1つの塗りつぶしのように重なってしまい、個々の点として読み取れなくなるためです。その閾値を超えても、線そのもの・共有の値軸・データ表は引き続きトレンドを伝え続けます — チャートを読み取ることは、実際にはマーカーに一切依存していません。

設定可能なフィールド:

• チャートタイトル — 画像の上に表示されます。系列1のみが有効な場合の、フォールバックの系列名にもなります。
• 塗りつぶし(エリアグラフのバリエーション)トグル。
• データ — 行のリスト(カテゴリー + 系列1/2/3)。棒グラフと同じ列構成です。
• 系列1/2/3の名前と系列1/2/3の色。
• カードの背景色、パディング、境界線、角の丸み。
• タイトルと凡例・データ表のテキストには、それぞれ独立した色・フォントサイズの組み合わせがあります。

折れ線グラフは、行を直接入力する代わりに、連携したデータソースに紐付けることもできます。グループ化フィールドは、それぞれの値をカテゴリー軸上の1つの点にし、最大3つの系列フィールド(それぞれ独自の集計方法を持つ)と組み合わせます。任意のフィルターは受信者のマージタグを参照できるため、同じトレンドを受信者ごとに個別の視点で表示できます。仕組みの詳細(キャンペーンの回答結果モードを含む)については、チャートを実データに紐付けるを参照してください。

例

週次の運用ダイジェストでは、過去8週間の未解決チケット数を単一の線でグラフ化し、その件数でもポイントマーカーがまだ見える状態にすることで、トレンドが改善しているかどうかを即座に読み取れます。売上のまとめでは、四半期にわたる累計売上を塗りつぶしのエリアグラフとして、プロダクトラインごとに1系列(最大3系列)で使うこともできます。読者は個々のトレンドと、視覚的に積み上がっていく塗りの合計の両方を、週を追って見ることができます。定期的なパフォーマンスレポートでは、マージタグのフィルターで受信者ごとに絞り込んだデータソースに直接紐付けることができます — 「あなたのアカウントの今月の利用状況」のように、同じプロジェクトの折れ線グラフが、同じ送信の受信者ごとに異なるトレンドを示すのです。

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

<div style="margin:12px 0;padding:16px;background-color:#ffffff;border-radius:8px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Open tickets</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
       alt="Line chart: Week 1 (Open tickets 42); Week 2 (Open tickets 35); Week 3 (Open tickets 28)"
       style="display:block;max-width:100%;height:auto;margin:8px 0" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Category</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Open tickets</th>
    </tr>
    <tr>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Week 1</td>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">42</td>
    </tr>
  </table>
</div>

alt属性は、すべてのカテゴリー・系列の値の組み合わせをまとめているため、画像を読み込まなくてもトレンドを読み取れます。その下の表は、同じ数値をプレーンなHTMLとして示しています。

関連ページ

• 分析とチャートのブロック
• チャートを実データに紐付ける
• 棒グラフブロック