> ## 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_bar_example.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/KRKoASQJgRuO8wHw/images/kb/ka05w00000123nB-00N5w00000Ri7BU-0EM5w000005vP7D.png?fit=max&auto=format&n=KRKoASQJgRuO8wHw&q=85&s=e02bf4b6aaa932a6a3f1d83000374c48" width="406" height="376" data-path="images/kb/ka05w00000123nB-00N5w00000Ri7BU-0EM5w000005vP7D.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/5435/sparkbar_background_fill.png"><img alt="sparkbar_background_fill.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/KRKoASQJgRuO8wHw/images/kb/ka05w00000123nB-00N5w00000Ri7BU-0EM5w000005vP79.png?fit=max&auto=format&n=KRKoASQJgRuO8wHw&q=85&s=6a3e097f8818de293260c7da219a7240" width="50" data-path="images/kb/ka05w00000123nB-00N5w00000Ri7BU-0EM5w000005vP79.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> パネルの値を分割する場合、分割に使う数を指します。このオプションは、とても大きい値を通数で割って省略して表示する際に役立ちます。たとえば、パネルの値が百万ドル単位で示されている場合、百万で分割するよう選択できます。これにより、パネルの値を理解しやすい一桁の数にできます。\[ <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></tbody></table>

日本語
