メインコンテンツまでスキップ
waffle.svg
Domo Knowledge Base - 日本人

スパークライングラフ

Version 3

はじめに

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

spark_line_example.png

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

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

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

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

値、カテゴリ、系列データの詳細については「チャートデータについて」を参照してください。 

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

Analyzerでチャートをフォーマットする方法の詳細については 「 KPIカード作成パート2:Analyzer」を参照してください。

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

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

プロパティ

説明

[一般] から [背景塗りつぶし]

グラフの背景を塗りつぶす色を指定します。 [デフォルト] を選択すると、背景色は使われません。 

sparkline_background_fill.png

[値のオプション] から [非表示]

グラフ内のサマリーの値を表示しなくなります (これは、グラフの内蔵するゲージに 最初に 表示される数値となります。たとえばこの記事の冒頭で紹介したグラフのスクリーンショットで、これに相当する値は6.68Kとなります)。

-

[値のオプション] から [値]

グラフのサマリーの値を取得した方法を示します。このプロパティに対しては、以下のオプションからいずれかを選択できます。

最初の値

サマリーの値はライン上の最初の値となります。これはデフォルトのオプションです。

最後の値

サマリーの値はライン上の最後の値となります。

合計

サマリーの値はライン上の値すべての合計となります。

平均

サマリーの値はライン上の値すべての 平均となります。

最小

サマリーの値はライン上すべての値の最小値となります。

最大

サマリーの値はライン上すべての値の最大値となります。

カウント

サマリーの値はライン上すべての値の個数となります。

 

-

[値のオプション] から [大きさ]

グラフ内のサマリーの値の大きさを指定します。[](デフォルト)または[]を選択できます。

-

[値のオプション] から [値のフォーマット]

グラフのサマリーの値に対応する一般的な数値形式が決まります。オプションには[数字](特別なフォーマットを含まない)、[通貨](通貨記号が付加される)、[割合](パーセント記号が付加される)が含まれます。

-

[値のオプション] から [値を以下で分割:]

ゲージの値を分割する場合、分割に使う数を指します。このオプションは、とても大きい値を通数で割って省略して表示する際に役立ちます。たとえば、パネルの値が百万ドル単位で示されている場合、百万で分割するよう選択できます。するとパネルの値を理解しやすい1桁の数にすることができます。 [割合](%)での分割を選択すると、パネルの値には100が掛けられます。

-

[値のオプション] から [小数位]

サマリーの値で使う少数位が決まります。[デフォルト]、[なし]、または小数点以下の桁数(「0.0」 ~ 「0.00000」) のオプションから選択できます。デフォルトでは、Domo はパネル値に最適な小数点以下の桁数を自動的に決定します。 [なし] を選択すると、値は整数に切り上げられます。

-

[値のオプション] から [マイナスの数]

マイナスの数値のフォーマットを決定します。

-100を選択した場合、マイナスの数の値にはマイナス記号が付加されます。 (100)を選択した場合、マイナスの数の値はカッコ(())に入ります。

-

[変化値のオプション] から [非表示]

グラフ内の変化の 値を表示しなくなります (これは、グラフの内蔵するゲージに 2番目に 表示される数値となります。たとえばこの記事の冒頭で紹介したグラフのスクリーンショットで、これに相当する値は74.35%となります)。

-

[変化値のオプション] から [値]

変化値が割合(%)というデフォルト値か、値どうしの差か、を指定します。 

-

[変化値のオプション] から [データ]

変化値をチャートの最初の値と最後の値から算出するか、チャートの最後2つの値から算出するかを指定します。 

-

[変化値のオプション] から [大きさ]

 グラフ内の変化値の大きさを指定します。 [] (デフォルト)または [] を選択できます。

-

[変化値の大きさ] から [方向インジケータ]

変化値の変化を示すにあたり、矢印(デフォルト)、曲線矢印、三角形のどれを使うかを指定します。これら3つの例を右に示します。

sparkline_arrow1.png

sparkline_arrow2.png

sparkline_arrow3.png

[変化値] から [色の方向を逆にする]

デフォルトでは変化値が プラスの場合、数値は緑で表示され、マイナスの場合、数値は赤で表示されます。[色の方向を逆にする] プロパティを設定すると、このデフォルトの動作を切り換えることができます。これは低い数値の方が良いことを示すゲージで役立ちます(職場の事故件数の推移を記録したパネルなど)。 

-

[変化値のオプション] から [値のフォーマット]

グラフの変化 値の、一般的な数値形式を決定します。オプションには [数字] (特別なフォーマットを含まない)、 [通貨] (通貨記号が付加される)、 [割合] (パーセント記号が付加される)が含まれます。

注記:  [] オプションと [通貨]  オプションは、[値オプションを変更する]、[値] の順に選択し、[変化値] に設定した場合のみ有効となります。

-

[変化値のオプション] から [ホバーテキストのフォーマット]

グラフのホバーテキスト(グラフ内のデータポイントにマウスポインタを置くと表示されるテキスト)の数値形式を決定します。オプションには [数字] (特別なフォーマットを含まない)、 [通貨] (通貨記号が付加される)、 [割合] (パーセント記号が付加される)が含まれます。 

ホバーテキストの詳細については「チャートのデータラベルとホバーテキストをフォーマットする」を参照してください。

-

[変化値のオプション] から [ホバーテキストの小数位]

グラフのホバーテキスト(グラフ内のデータポイントにマウスポインタを置くと表示されるテキスト)に表示される値の小数点以下の桁数を決定します。 

ホバーテキストの詳細については 「チャートのデータラベルとホバーテキストをフォーマットする」を参照してください。

-

[変化値のオプション] から [正の値の色]

グラフ内の変化の大きさが正の場合に使う色を指定します。

-

[変化値のオプション] から [負の値の色]

グラフ内の変化の大きさが負の場合に使う色を指定します。

-

[折れ線グラフオプション] から [スタイル]

グラフの線を折れ線 ([プレーン])と [曲線] のどちらかに指定します。 [プレーン] がデフォルトです。

-

[折れ線グラフオプション] から [太さ]

グラフの線を [細い](デフォルト)、[中]、[太い] のどれかに指定します。右の例は [太い] を選択した場合のスパークライングラフです。

sparkline_thick.png

[折れ線グラフオプション] から [エリア塗りつぶしを非表示]

グラフ内のエリアの塗りつぶしを表示しません。右の例はこの設定でのスパークライングラフです。

sparkline_no_fill.png