> ## 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.

# スパークライングラフ

## はじめに

﻿ スパークライングラフは基本的には普通の折れ線グラフと同じものです。違いは、a）軸を含まないため、シンプルで必要な情報のみで簡潔にデータ内の増減を表す点と、b）内蔵ゲージを含み、データチャートで変化の大きさを表す点です。たとえば、次のスクリーンショットのスパークライングラフでは、COGS値が最初の\$6.68Kから74.35%下がっている様子が示されています。

<Frame>
  <img alt="spark_line_example.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/KRKoASQJgRuO8wHw/images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7L.png?fit=max&auto=format&n=KRKoASQJgRuO8wHw&q=85&s=a8e8d6699bbae95f9d02fba60675e215" width="405" height="376" data-path="images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7L.png" />
</Frame>

デフォルトではゲージは、チャートに含まれる最初のデータ項目と最後のデータ項目との変化の度合いを示しますが、適宜この設定を変えることで、最後2つのデータ項目間で変化の大きさを示すこともできます。変化の大きさを割合（%）と値のどちらで表すか、緑色と赤色のどちらで表すか、グラフを塗りつぶす色を何にするかなど、スパークライングラフにおける別の側面を変更することもできます。これらの設定はすべて、そのグラフに対応した \[チャートの設定] で変更できます。

他のほとんどのチャートタイプと同じように、スパークライングラフではホバーテキストラベルを使って各データポイントの具体的データを示すことができます。そのため、軸がなくても、マウスを動かしてデータポイント上を通ることで、ユーザーはその値を確認できます。ホバーテキストラベルの詳細については「 [チャートのデータラベルとホバーテキストをフォーマットする](/s/article/360043429693 "チャートのデータラベルとホバーテキストをフォーマットする") 」を参照してください。

## スパークライングラフを作成する

スパークライングラフには、DataSetのデータ列または行が2つのみ必要です。このうち1つはカテゴリ（通常は日付または時刻）、もう1つは値です。他のほとんどの折れ線グラフと同じように、横軸はカテゴリ、縦軸は値を表します（ただしスパークラインチャートはシンプルな画面構成となっているため、これらの情報は表示されません）。Analyzerでスパークラインを作成するには、カテゴリの列を \[X軸] フィールド、値の列を \[Y軸] フィールドにドラッグします。

値、カテゴリ、系列データの詳細については「 [チャートデータについて](/s/article/360043428693 "チャートデータについて") 」を参照してください。

Analyzerで、スパークライングラフのデータを含む列を選択します。データ列の選択の詳細については 「 [DataSetの列をチャートに適用する](/s/article/360043428713 "DataSetの列をチャートに適用する") 」を参照してください。

Analyzerでチャートをフォーマットする方法の詳細については 「 [KPIカード作成パート2：Analyzer](/s/article/ "KPIカード作成パート2：カードビルダー") 」を参照してください。

## スパークライングラフをカスタマイズする

スパークライングラフの外観は、\[ **チャートの設定** ] を編集するとカスタマイズできます。チャート設定のすべての詳細については「 [チャートの設定](/s/article/ "チャートの設定") 」を参照してください。 スパークライングラフ固有のプロパティには以下が含まれます。サムネイル画像をクリックすると、拡大画像が表示されます。

<table border="1" cellpadding="1" cellspacing="1"><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></td><td colSpan="1" rowSpan="1"><p> グラフの背景を塗りつぶす色を指定します。 \[ <b> デフォルト </b> ] を選択すると、背景色は使われません。 </p></td><td colSpan="1" rowSpan="1"><p><a target="_blank" title="/@api/deki/files/5428/sparkline_background_fill.png"><img alt="sparkline_background_fill.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/KRKoASQJgRuO8wHw/images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7J.png?fit=max&auto=format&n=KRKoASQJgRuO8wHw&q=85&s=da3576746e77b591b4f968af80a90a9a" width="50" data-path="images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7J.png" /></a></p></td></tr><tr><td colSpan="1" rowSpan="1"><p> \[値のオプション] から \[非表示] </p></td><td colSpan="1" rowSpan="1"><p> グラフ内のサマリーの値を表示しなくなります （これは、グラフの内蔵するゲージに <em> 最初に </em> 表示される数値となります。たとえばこの記事の冒頭で紹介したグラフのスクリーンショットで、これに相当する値は6.68Kとなります）。 </p></td><td colSpan="1" rowSpan="1"><p> - </p></td></tr><tr><td colSpan="1" rowSpan="1"><p> \[値のオプション] から \[値] </p></td><td colSpan="1" rowSpan="1"><p> グラフのサマリーの値を取得した方法を示します。このプロパティに対しては、以下のオプションからいずれかを選択できます。 </p><table className="mt-responsive-table"><tbody><tr><td className="mt-noheading" colSpan="1" rowSpan="1"><p> 最初の値 </p></td><td className="mt-noheading" colSpan="1" rowSpan="1"><p> サマリーの値はライン上の最初の値となります。これはデフォルトのオプションです。 </p></td></tr><tr><td className="mt-noheading" colSpan="1" rowSpan="1"><p> 最後の値 </p></td><td className="mt-noheading" colSpan="1" rowSpan="1"><p> サマリーの値はライン上の最後の値となります。 </p></td></tr><tr><td className="mt-noheading" colSpan="1" rowSpan="1"><p> 合計 </p></td><td className="mt-noheading" colSpan="1" rowSpan="1"><p> サマリーの値はライン上の値すべての合計となります。 </p></td></tr><tr><td className="mt-noheading" colSpan="1" rowSpan="1"><p> 平均 </p></td><td className="mt-noheading" colSpan="1" rowSpan="1"><p> サマリーの値はライン上の値すべての 平均となります。 </p></td></tr><tr><td className="mt-noheading" colSpan="1" rowSpan="1"><p> 最小 </p></td><td className="mt-noheading" colSpan="1" rowSpan="1"><p> サマリーの値はライン上すべての値の最小値となります。 </p></td></tr><tr><td className="mt-noheading" colSpan="1" rowSpan="1"><p> 最大 </p></td><td className="mt-noheading" colSpan="1" rowSpan="1"><p> サマリーの値はライン上すべての値の最大値となります。 </p></td></tr><tr><td className="mt-noheading" colSpan="1" rowSpan="1"><p> カウント </p></td><td className="mt-noheading" colSpan="1" rowSpan="1"><p> サマリーの値はライン上すべての値の個数となります。 </p></td></tr></tbody></table><p /></td><td colSpan="1" rowSpan="1"><p> - </p></td></tr><tr><td colSpan="1" rowSpan="1"><p> \[値のオプション] から \[大きさ] </p></td><td colSpan="1" rowSpan="1"><p> グラフ内のサマリーの値の大きさを指定します。\[ <b> 中 </b> ]（デフォルト）または\[ <b> 小 </b> ]を選択できます。 </p></td><td colSpan="1" rowSpan="1"><p> - </p></td></tr><tr><td colSpan="1" rowSpan="1"><p> \[値のオプション] から \[値のフォーマット] </p></td><td colSpan="1" rowSpan="1"><p> グラフのサマリーの値に対応する一般的な数値形式が決まります。オプションには\[ <b><b> 数字 </b></b> ]（特別なフォーマットを含まない）、\[ <b><b> 通貨 </b></b> ]（通貨記号が付加される）、\[ <b><b> 割合 </b></b> ]（パーセント記号が付加される）が含まれます。 </p></td><td colSpan="1" rowSpan="1"><p> - </p></td></tr><tr><td colSpan="1" rowSpan="1"><p> \[値のオプション] から \[値を以下で分割：] </p></td><td colSpan="1" rowSpan="1"><p> ゲージの値を分割する場合、分割に使う数を指します。このオプションは、とても大きい値を通数で割って省略して表示する際に役立ちます。たとえば、パネルの値が百万ドル単位で示されている場合、百万で分割するよう選択できます。するとパネルの値を理解しやすい1桁の数にすることができます。 \[ <b><b> 割合 </b></b> ]（%）での分割を選択すると、パネルの値には100が掛けられます。 </p></td><td colSpan="1" rowSpan="1"><p> - </p></td></tr><tr><td colSpan="1" rowSpan="1"><p> \[値のオプション] から \[小数位] </p></td><td colSpan="1" rowSpan="1"><p> サマリーの値で使う少数位が決まります。\[ <b><b> デフォルト </b></b> ]、\[ <b><b> なし </b></b> ]、または小数点以下の桁数（「0.0」 ～ 「0.00000」） のオプションから選択できます。デフォルトでは、Domo はパネル値に最適な小数点以下の桁数を自動的に決定します。 \[ <b><b> なし </b></b> ] を選択すると、値は整数に切り上げられます。 </p></td><td colSpan="1" rowSpan="1"><p> - </p></td></tr><tr><td colSpan="1" rowSpan="1"><p> \[値のオプション] から \[マイナスの数] </p></td><td colSpan="1" rowSpan="1"><p> マイナスの数値のフォーマットを決定します。 </p><p><b><b> -100 </b></b> を選択した場合、マイナスの数の値にはマイナス記号が付加されます。 <b><b> (100) </b></b> を選択した場合、マイナスの数の値はカッコ（()）に入ります。 </p></td><td colSpan="1" rowSpan="1"><p> - </p></td></tr><tr><td colSpan="1" rowSpan="1"><p> \[変化値のオプション] から \[非表示] </p></td><td colSpan="1" rowSpan="1"><p> グラフ内の変化の 値を表示しなくなります （これは、グラフの内蔵するゲージに <em> 2番目に </em> 表示される数値となります。たとえばこの記事の冒頭で紹介したグラフのスクリーンショットで、これに相当する値は74.35%となります）。 </p></td><td colSpan="1" rowSpan="1"><p> - </p></td></tr><tr><td colSpan="1" rowSpan="1"><p> \[変化値のオプション] から \[値] </p></td><td colSpan="1" rowSpan="1"><p> 変化値が割合（%）というデフォルト値か、値どうしの差か、を指定します。 </p></td><td colSpan="1" rowSpan="1"><p> - </p></td></tr><tr><td colSpan="1" rowSpan="1"><p> \[変化値のオプション] から \[データ] </p></td><td colSpan="1" rowSpan="1"><p> 変化値をチャートの最初の値と最後の値から算出するか、チャートの最後2つの値から算出するかを指定します。 </p></td><td colSpan="1" rowSpan="1"><p> - </p></td></tr><tr><td colSpan="1" rowSpan="1"><p> \[変化値のオプション] から \[大きさ] </p></td><td colSpan="1" rowSpan="1"><p> グラフ内の変化値の大きさを指定します。 \[ <b> 中 </b> ] （デフォルト）または \[ <b> 小 </b> ] を選択できます。 </p></td><td colSpan="1" rowSpan="1"><p> - </p></td></tr><tr><td colSpan="1" rowSpan="1"><p> \[変化値の大きさ] から \[方向インジケータ] </p></td><td colSpan="1" rowSpan="1"><p> 変化値の変化を示すにあたり、矢印（デフォルト）、曲線矢印、三角形のどれを使うかを指定します。これら3つの例を右に示します。 </p></td><td colSpan="1" rowSpan="1"><p><a target="_blank" title="/@api/deki/files/5431/sparkline_arrow1.png"><img alt="sparkline_arrow1.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/KRKoASQJgRuO8wHw/images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7A.png?fit=max&auto=format&n=KRKoASQJgRuO8wHw&q=85&s=f0962d92e844ec28199b0d038a5a40ca" width="50" data-path="images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7A.png" /></a></p><p><a target="_blank" title="/@api/deki/files/5430/sparkline_arrow2.png"><img alt="sparkline_arrow2.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/KRKoASQJgRuO8wHw/images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7M.png?fit=max&auto=format&n=KRKoASQJgRuO8wHw&q=85&s=b5e107276f11fc1ec4d4be890d8c3451" width="50" data-path="images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7M.png" /></a></p><p><a target="_blank" title="/@api/deki/files/5429/sparkline_arrow3.png"><img alt="sparkline_arrow3.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/KRKoASQJgRuO8wHw/images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7K.png?fit=max&auto=format&n=KRKoASQJgRuO8wHw&q=85&s=6f75e5c99b34906462448acf971dacbe" width="50" data-path="images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7K.png" /></a></p></td></tr><tr><td colSpan="1" rowSpan="1"><p> \[変化値] から \[色の方向を逆にする] </p></td><td colSpan="1" rowSpan="1"><p> デフォルトでは変化値が プラスの場合、数値は緑で表示され、マイナスの場合、数値は赤で表示されます。\[ <b> 色の方向を逆にする </b> ] プロパティを設定すると、このデフォルトの動作を切り換えることができます。これは低い数値の方が良いことを示すゲージで役立ちます（職場の事故件数の推移を記録したパネルなど）。 </p></td><td colSpan="1" rowSpan="1"><p> - </p></td></tr><tr><td colSpan="1" rowSpan="1"><p> \[変化値のオプション] から \[値のフォーマット] </p></td><td colSpan="1" rowSpan="1"><p> グラフの変化 値の、一般的な数値形式を決定します。オプションには \[ <b><b> 数字 </b></b> ] （特別なフォーマットを含まない）、 \[ <b><b> 通貨 </b></b> ] （通貨記号が付加される）、 \[ <b><b> 割合 </b></b> ] （パーセント記号が付加される）が含まれます。 </p><Note> **注記：** \[ **数** ] オプションと \[ **通貨** ]  オプションは、 **\[値オプションを変更する]、\[値]** の順に選択し、\[ **変化値** ] に設定した場合 *のみ* 有効となります。</Note></td><td colSpan="1" rowSpan="1"><p> - </p></td></tr><tr><td colSpan="1" rowSpan="1"><p> \[変化値のオプション] から \[ホバーテキストのフォーマット] </p></td><td colSpan="1" rowSpan="1"><p> グラフのホバーテキスト（グラフ内のデータポイントにマウスポインタを置くと表示されるテキスト）の数値形式を決定します。オプションには \[ <b><b> 数字 </b></b> ] （特別なフォーマットを含まない）、 \[ <b><b> 通貨 </b></b> ] （通貨記号が付加される）、 \[ <b><b> 割合 </b></b> ] （パーセント記号が付加される）が含まれます。 <br /><br /> ホバーテキストの詳細については「 <a href="/s/article/360043429693" target="_blank" title="チャートのデータラベルとホバーテキストをフォーマットする"> チャートのデータラベルとホバーテキストをフォーマットする </a> 」を参照してください。 </p></td><td colSpan="1" rowSpan="1"><p> - </p></td></tr><tr><td colSpan="1" rowSpan="1"><p> \[変化値のオプション] から \[ホバーテキストの小数位] </p></td><td colSpan="1" rowSpan="1"><p> グラフのホバーテキスト（グラフ内のデータポイントにマウスポインタを置くと表示されるテキスト）に表示される値の小数点以下の桁数を決定します。 <br /><br /> ホバーテキストの詳細については 「 <a href="/s/article/360043429693" target="_blank" title="チャートのデータラベルとホバーテキストをフォーマットする"> チャートのデータラベルとホバーテキストをフォーマットする </a> 」を参照してください。 </p></td><td colSpan="1" rowSpan="1"><p> - </p></td></tr><tr><td colSpan="1" rowSpan="1"><p> \[変化値のオプション] から \[正の値の色] </p></td><td colSpan="1" rowSpan="1"><p> グラフ内の変化の大きさが正の場合に使う色を指定します。 </p></td><td colSpan="1" rowSpan="1"><p> - </p></td></tr><tr><td colSpan="1" rowSpan="1"><p> \[変化値のオプション] から \[負の値の色] </p></td><td colSpan="1" rowSpan="1"><p> グラフ内の変化の大きさが負の場合に使う色を指定します。 </p></td><td colSpan="1" rowSpan="1"><p> - </p></td></tr><tr><td colSpan="1" rowSpan="1"><p> \[折れ線グラフオプション] から \[スタイル] </p></td><td colSpan="1" rowSpan="1"><p> グラフの線を折れ線 （\[ <b> プレーン </b> ]）と \[曲線] のどちらかに指定します。 \[ <b> プレーン </b> ] がデフォルトです。 </p></td><td colSpan="1" rowSpan="1"><p> - </p></td></tr><tr><td colSpan="1" rowSpan="1"><p> \[折れ線グラフオプション] から \[太さ] </p></td><td colSpan="1" rowSpan="1"><p> グラフの線を \[細い]（デフォルト）、\[中]、\[太い] のどれかに指定します。右の例は \[ <b> 太い </b> ] を選択した場合のスパークライングラフです。 </p></td><td colSpan="1" rowSpan="1"><p><a target="_blank" title="/@api/deki/files/5433/sparkline_thick.png"><img alt="sparkline_thick.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/KRKoASQJgRuO8wHw/images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7N.png?fit=max&auto=format&n=KRKoASQJgRuO8wHw&q=85&s=39e3c87063c0e0d526f52829a3c1f075" width="50" data-path="images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7N.png" /></a></p></td></tr><tr><td colSpan="1" rowSpan="1"><p> \[折れ線グラフオプション] から \[エリア塗りつぶしを非表示] </p></td><td colSpan="1" rowSpan="1"><p> グラフ内のエリアの塗りつぶしを表示しません。右の例はこの設定でのスパークライングラフです。 </p></td><td colSpan="1" rowSpan="1"><p><a target="_blank" title="/@api/deki/files/5432/sparkline_no_fill.png"><img alt="sparkline_no_fill.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/KRKoASQJgRuO8wHw/images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7B.png?fit=max&auto=format&n=KRKoASQJgRuO8wHw&q=85&s=0859f1634daff6105f9917069348b41e" width="50" data-path="images/kb/ka05w00000123nA-00N5w00000Ri7BU-0EM5w000005vP7B.png" /></a></p></td></tr></tbody></table>

日本語
