> ## Documentation Index
> Fetch the complete documentation index at: https://domoinc-openapi-sync-dataflows.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 面グラフ

export const InlineImage = ({src, alt = '', height = '1.6em'}) => {
  return <img noZoom src={src} alt={alt} style={{
    display: 'inline',
    verticalAlign: 'start',
    height: height,
    margin: '0'
  }} />;
};

面グラフは複数折れ線グラフで、一番上の線とカテゴリー軸の間の領域が色付きで表示されます。Domoには、主に以下の3つのタイプの面グラフがあります。

* 標準的な面グラフ（Domoでは単に「面」グラフと呼ばれます）。すべての系列は同じ軸から開始され、それぞれ重なって表示されます。凡例またはグラフ内でその系列にマウスポインターを合わせると、個々の系列を識別できます。このタイプの面グラフは、各系列が同じ基準線から開始されるため、個々の系列の値をすばやく識別するのに役立ちます。このグラフを作成する方法については、「面グラフ」を参照してください。
* 積上げ面グラフ。系列が互いに重なって表示されます。すべての系列が同じ基準線を共有しているわけではないため、このタイプの面グラフは、個々の量の識別よりも傾向の比較に適しています。このグラフを作成する方法については、「
  [積上げ面グラフ](/s/article/360043428033 "積上げ面グラフ") 」を参照してください。
* ストリームグラフ。系列が中央に配置されており、
  [ストリームファネルグラフ](/s/article/360043429513 "ストリームファネルグラフ") の外観と似ていますが、縦向きではなく横向きです。ストリームグラフの系列は、同じ基準線を共有しておらず、重なっていません。このため、ステージ間の変化を示す点では、標準的な面グラフと積上げ面グラフよりも優れています。

標準的な面グラフと積上げ面グラフは、縦/横、直線/曲線/階段など、様々なサブタイプにさらに細分化できます。

以下の表は、Domoで利用可能な面グラフのタイプを示しています。サムネイル画像をクリックすると、拡大画像が表示されます。

#### 標準的な（オーバーレイ）面グラフ

標準的な面グラフでは、すべての系列は同じ軸から開始され、それぞれ重なって表示されます。デフォルトの状態では、一部の系列のデータは通常非表示になっているため、これらのグラフはあまり役に立ちません。ただし、グラフまたは凡例の系列にマウスポインターを合わせると、その系列のデータのみが表示されます。

標準的な面グラフの作成については、「 [面オーバーレイグラフ](/s/article/360043428473 "面オーバーレイグラフ") 」を参照してください。

<table className="mt-responsive-table"><thead><tr><th colSpan="1" rowSpan="1"><p> グラフタイプ </p></th><th colSpan="1" rowSpan="1"><p> 説明 </p></th><th colSpan="1" rowSpan="1"><p> 例 </p></th></tr></thead><tbody><tr><td colSpan="1" rowSpan="1"><p> 面グラフ </p><p><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPE7.png" /></p></td><td colSpan="1" rowSpan="1"><p> 面グラフでは、カテゴリーはX軸に、値はY軸に表示され、線は曲線ではなく直線です。ほかの標準的な面グラフと同様に、すべての系列は基準線から開始されるため、系列が重なって表示されます。ただし、グラフまたは凡例の系列アイテムにマウスポインターを合わせると、個々の系列が表示されます。 </p><p> 右の最初の例は、デフォルトの状態の面グラフを示しています。7つの系列がありますが、重なっているためグラフに表示されるのは3つのみです。2番目の例では、ユーザーは <b> LinkedIn </b> 系列にマウスポインターを合わせているため、この系列のみがグラフに表示されています。 </p></td><td colSpan="1" rowSpan="1"><p><a target="_blank" title="/@api/deki/files/3392/area_overlay_graph_kpi_example.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEH.png" /></a></p><p><a target="_blank" title="/@api/deki/files/3390/area_overlay_graph_kpi_example_2.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPE2.png" /></a></p></td></tr><tr><td colSpan="1" rowSpan="1"><p> 横面グラフ </p><p><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEt.png" /></p></td><td colSpan="1" rowSpan="1"><p> 横面グラフは、カテゴリーがY軸に表示され、値がX軸に表示されることを除いて、面グラフと同じです。 </p><p> 右の最初の例は、デフォルトの状態の横面グラフを示しています。7つの系列がありますが、重なっているためグラフに表示されるのは3つのみです。2番目の例では、ユーザーは <b> LinkedIn </b> 系列にマウスポインターを合わせているため、この系列のみがグラフに表示されています。 </p></td><td colSpan="1" rowSpan="1"><p><a target="_blank" title="/@api/deki/files/3391/horizontal_area_graph_kpi_example.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEL.png" /></a></p><p><a target="_blank" title="/@api/deki/files/3393/horizontal_area_graph_kpi_example_2.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPE0.png" /></a></p></td></tr><tr><td colSpan="1" rowSpan="1"><p> 曲線面グラフ </p><p><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEZ.png" /></p></td><td colSpan="1" rowSpan="1"><p> 曲線面グラフでは、カテゴリーはX軸に、値はY軸に表示され、線は曲線です。ほかの標準的な面グラフと同様に、すべての系列は基準線から開始されるため、系列が重なって表示されます。ただし、グラフまたは凡例の系列アイテムにマウスポインターを合わせると、個々の系列が表示されます。 </p><p> 右の最初の例は、デフォルトの状態の曲線面グラフを示しています。7つの系列がありますが、重なっているためグラフに表示されるのは3つのみです。2番目の例では、ユーザーは <b> LinkedIn </b> 系列にマウスポインターを合わせているため、この系列のみがグラフに表示されています。 </p></td><td colSpan="1" rowSpan="1"><p><a target="_blank" title="/@api/deki/files/3389/vertical_area_curved_kpi_example.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEX.png" /></a></p><p><a target="_blank" title="/@api/deki/files/3388/vertical_area_curved_kpi_example_2.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPDx.png" /></a></p></td></tr><tr><td colSpan="1" rowSpan="1"><p> 横曲線面グラフ </p><p><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEk.png" /></p></td><td colSpan="1" rowSpan="1"><p> 横曲線面グラフは、カテゴリーがY軸に表示され、値がX軸に表示されることを除いて、曲線面グラフと同じです。 </p><p> 右の最初の例は、デフォルトの状態の横曲線面グラフを示しています。7つの系列がありますが、重なっているためグラフに表示されるのは3つのみです。2番目の例では、ユーザーは <b> LinkedIn </b> 系列にマウスポインターを合わせているため、この系列のみがグラフに表示されています。 </p></td><td colSpan="1" rowSpan="1"><p><a target="_blank" title="/@api/deki/files/3387/horizontal_area_curved_kpi_example.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEO.png" /></a></p><p><a target="_blank" title="/@api/deki/files/3386/horizontal_area_curved_kpi_example_2.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEQ.png" /></a></p></td></tr><tr><td colSpan="1" rowSpan="1"><p> 階段面グラフ </p><p><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEl-1.png" /></p></td><td colSpan="1" rowSpan="1"><p> 階段面グラフでは、カテゴリーはX軸に、値はY軸に表示され、線はグラフ全体で「階段」状になっています。ほかの標準的な面グラフと同様に、すべての系列は基準線から開始されるため、系列が重なって表示されます。ただし、グラフまたは凡例の系列アイテムにマウスポインターを合わせると、個々の系列が表示されます。 </p><p> 右の最初の例は、デフォルトの状態の階段面グラフを示しています。7つの系列がありますが、重なっているためグラフに表示されるのは3つのみです。2番目の例では、ユーザーは <b> LinkedIn </b> 系列にマウスポインターを合わせているため、この系列のみがグラフに表示されています。 </p></td><td colSpan="1" rowSpan="1"><p><a target="_blank" title="/@api/deki/files/3383/vertical_area_step_kpi_example.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEm.png" /></a></p><p><a target="_blank" title="/@api/deki/files/3384/vertical_area_step_kpi_exampe_2.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEp.png" /></a></p></td></tr><tr><td colSpan="1" rowSpan="1"><p> 横階段面グラフ </p><p><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPDy.png" /></p></td><td colSpan="1" rowSpan="1"><p> 横階段面グラフは、カテゴリーがY軸に表示され、値がX軸に表示されることを除いて、階段面グラフと同じです。 </p><p> 右の最初の例は、デフォルトの状態の横階段面グラフを示しています。7つの系列がありますが、重なっているためグラフに表示されるのは3つのみです。2番目の例では、ユーザーは <b> LinkedIn </b> 系列にマウスポインターを合わせているため、この系列のみがグラフに表示されています。 </p></td><td colSpan="1" rowSpan="1"><p><a target="_blank" title="/@api/deki/files/3382/horizontal_area_step_kpi_example.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPE4.png" /></a></p><p><a target="_blank" title="/@api/deki/files/3385/horizontal_area_step_kpi_example_2.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEW.png" /></a></p></td></tr></tbody></table>

#### 積上げ面グラフ

積上げ面グラフは、各線の下にあるスペースが別の色で埋められる、複数折れ線グラフです。積上げ縦棒グラフのように、積み重ねられた色付きの「セグメント」を生成します。各セグメントの総面積は、そのカテゴリーのデータアイテムすべての累積値を反映します。これらのグラフはグループの傾向を示し、傾向をデータの系列間で比較する場合に便利です。

積上げ面グラフの作成については、「 [積上げ面グラフ](/s/article/360043428033 "積上げ面グラフ") 」を参照してください。

<table className="mt-responsive-table"><thead><tr><th colSpan="1" rowSpan="1"><p> グラフタイプ </p></th><th colSpan="1" rowSpan="1"><p> 説明 </p></th><th colSpan="1" rowSpan="1"><p> 例 </p></th></tr><tr><td colSpan="1" rowSpan="1"><p> 積上げ面グラフ </p><p><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEY.png" /></p></td><td colSpan="1" rowSpan="1"><p> 積上げ面グラフでは、カテゴリーはX軸に、値はY軸に表示され、線は曲線や階段状ではなく直線です。 </p></td><td colSpan="1" rowSpan="1"><a target="_blank" title="/@api/deki/files/3404/area_graph_kpi_example.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEV.png" /></a></td></tr><tr><td colSpan="1" rowSpan="1"><p> 横積上げ面グラフ </p><p><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPE3.png" /></p></td><td colSpan="1" rowSpan="1"> 横積上げ面グラフは、カテゴリーがY軸に表示され、値がX軸に表示されることを除いて、積上げ面グラフと同じです。 </td><td colSpan="1" rowSpan="1"><a target="_blank" title="/@api/deki/files/3405/horizontal_stacked_area_kpi_example.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPDw.png" /></a></td></tr><tr><td colSpan="1" rowSpan="1"><p> 曲線積上げ面グラフ </p><p><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEK-1.png" /></p></td><td colSpan="1" rowSpan="1"> 縦曲線積上げ面グラフは、線が直線ではなく曲線であることを除いて、通常の積上げ面グラフと同じです。 </td><td colSpan="1" rowSpan="1"><a target="_blank" title="/@api/deki/files/3399/vertical_stacked_area_curved_kpi_example.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPE1.png" /></a></td></tr><tr><td colSpan="1" rowSpan="1"><p> 横曲線積上げ面グラフ </p><p><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEo-1.png" /></p></td><td colSpan="1" rowSpan="1"> 横曲線積上げ面グラフは、線が直線ではなく曲線であることを除いて、通常の横積上げ面グラフと同じです。 </td><td colSpan="1" rowSpan="1"><a target="_blank" title="/@api/deki/files/3397/horizontal_stacked_area_curved_kpi_example.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEI.png" /></a></td></tr><tr><td colSpan="1" rowSpan="1"><p> 階段積上げ面グラフ </p><p><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEJ.png" /></p></td><td colSpan="1" rowSpan="1"> 階段積上げ面グラフは、線が「階段」状であることを除いて、通常の積上げ面グラフと同じです。 </td><td colSpan="1" rowSpan="1"><a target="_blank" title="/@api/deki/files/3395/vertical_stacked_area_step_kpi_example.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEn.png" /></a></td></tr><tr><td colSpan="1" rowSpan="1"><p> 横階段積上げ面グラフ </p><p><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPET-1.png" /></p></td><td colSpan="1" rowSpan="1"> 横階段積上げ面グラフは、線が「階段」状であることを除いて、通常の横積上げ面グラフと同じです。 </td><td colSpan="1" rowSpan="1"><a target="_blank" title="/@api/deki/files/3394/horizontal_stacked_area_step_kpi_example.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEA.png" /></a></td></tr><tr><td colSpan="1" rowSpan="1"><p> 100％積上げ面グラフ </p><p><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEg.png" /></p></td><td colSpan="1" rowSpan="1"> 100％積上げ面グラフでは、円グラフのようにセグメントが100パーセントとして表示されます。標準的な縦バージョンでは、カテゴリーはX軸に、値はY軸に表示され、線は曲線や階段状ではなく直線です。 </td><td colSpan="1" rowSpan="1"><a target="_blank" title="/@api/deki/files/3403/vertical_area_100_percent_stacked_kpi_example.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEG-1.png" /></a></td></tr><tr><td colSpan="1" rowSpan="1"><p> 横100％積上げ面グラフ </p><p><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEe.png" /></p></td><td colSpan="1" rowSpan="1"> このグラフタイプは、カテゴリーがY軸に表示され、値がX軸に表示されることを除いて、100％積上げ面グラフと同じです。 </td><td colSpan="1" rowSpan="1"><a target="_blank" title="/@api/deki/files/3400/horizontal_area_100_percent_stacked_kpi_example.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEC.png" /></a></td></tr><tr><td colSpan="1" rowSpan="1"><p> 100％曲線積上げ面グラフ </p><p><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEs.png" /></p></td><td colSpan="1" rowSpan="1"> このグラフタイプは、線が直線ではなく曲線であることを除いて、標準的な100％積上げ面グラフと同じです。 </td><td colSpan="1" rowSpan="1"><a target="_blank" title="/@api/deki/files/3402/vertical_area_100_percent_stacked_curved_kpi_example.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEq-1.png" /></a></td></tr><tr><td colSpan="1" rowSpan="1"><p> 横100％曲線積み上げ面グラフ </p><p><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEr.png" /></p></td><td colSpan="1" rowSpan="1"> このグラフタイプは、線が直線ではなく曲線であることを除いて、標準的な横100％積上げ面グラフと同じです。 </td><td colSpan="1" rowSpan="1"><a target="_blank" title="/@api/deki/files/3398/horizontal_area_100_percent_stacked_curved_kpi_example.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPE5.png" /></a></td></tr><tr><td colSpan="1" rowSpan="1"><p> 100％階段積上げ面グラフ </p><p><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEU.png" /></p></td><td colSpan="1" rowSpan="1"> このグラフタイプは、線が直線ではなく「階段」状であることを除いて、標準的な100％積上げ面グラフと同じです。 </td><td colSpan="1" rowSpan="1"><a target="_blank" title="/@api/deki/files/3401/vertical_area_100_percent_stacked_step_kpi_example.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEj-1.png" /></a></td></tr><tr><td colSpan="1" rowSpan="1"><p> 横100％階段積み上げ面グラフ </p><p><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPDz.png" /></p></td><td colSpan="1" rowSpan="1"> このグラフタイプは、線が直線ではなく「階段」状であることを除いて、標準的な横100％積上げ面グラフと同じです。 </td><td colSpan="1" rowSpan="1"><a target="_blank" title="/@api/deki/files/3396/horizontal_area_100_percent_stacked_step_kpi_example.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPE6.png" /></a></td></tr></thead></table>

#### ストリームグラフ

Domoのほかのタイプの面グラフとは異なり、ストリームグラフは1種類のみです。このタイプのグラフは、 [ストリームファネルグラフ](/s/article/360043429513 "ストリームファネルグラフ") （Domoでは円グラフに分類）に最もよく似ていますが、縦向きではなく横向きです。

<table className="mt-responsive-table"><thead><tr><th colSpan="1" rowSpan="1"> グラフタイプ </th><th colSpan="1" rowSpan="1"> 説明 </th><th colSpan="1" rowSpan="1"> 例 </th></tr></thead><tbody><tr><td colSpan="1" rowSpan="1"><p> ストリームグラフ </p><p><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPEE-1.png" /></p></td><td colSpan="1" rowSpan="1"> ストリームグラフは横面グラフとファネルグラフの両方の特徴を備えています。ストリームグラフの系列は中央に配置されています。ストリームグラフの系列は、同じ基準線を共有しておらず、重なっていません。このため、ステージ間の変化を示す点では、標準的な面グラフと積上げ面グラフよりも優れています。 </td><td colSpan="1" rowSpan="1"><a target="_blank" title="/@api/deki/files/4295/stream_kpi_example.png"><InlineImage src="/images/kb/ja/ka0Vq000000DY5X-00N5w00000Ri7BU-0EM5w000005vPE8.png" /></a></td></tr></tbody></table>

日本語
