ロリポップスパークライン

ロリポップスパークラインは、データセットの絶対分散と相対分散を表示できる効果的なデータ可視化の手法です。SpreadJSでロリポップスパークラインを作成するには、LOLLIPOPVARISPARKLINE 関数を使用します。

ロリポップスパークラインは、棒チャートと同じように情報を伝えることができますが、棒チャートの長方形を線に変えることで表示スペースを減らし、またデータポイントを強調してシンプルなチャートを表示します。そのため、大量のデータを取り扱う際に、ロリポップチャートを使用すると、より簡潔に表示できます。

lollipop-sparkline-labels

上記の図は、ロリポップスパークラインとその要素を示します。

要素	悦明
参照	すべてのデータは参照値に対する相対的なオフセットと示しています。
ロリポップ	ロリポップの長さは分散のサイズを表します。
最小値	ロリポップスパークラインが描画できる最小値を表します。
最大値	ロリポップスパークラインが描画できる最大値を表します。
ラベル	実際のデータの値を表します。
矢印	値が最大値より大きいか、最小値より小さい場合にのみ表示されます。矢印の外観は、現在の分散が正か負かによって異なり、垂直方向または水平方向に表示されます。水平表示: 分散が正の場合: セルの右側に矢印が表示されます。分散が負の場合: セルの左側に矢印が表示されます。垂直表示: 分散が正の場合: セルの上部に矢印が表示されます。分散が負の場合: セルの下部に矢印が表示されます。
目盛単位	ユーザーが設定できる基本単位。
正の値の色	分散値が参照より大きい場合に、ロリポップバーの塗りつぶしの色を指定します。
負の値の色	分散値が参照より小さい場合に、ロリポップバーの塗りつぶしの色を指定します。

ロリポップスパークライン数式には次の引数があります。

引数	型	デフォルト値	説明
plannedValue ［必須］	数値または参照		期待値の範囲のデータセットを指定します。
actualValue ［必須］	数値または参照		実際の値の範囲のデータセットを指定します。
index ［必須］	数値または参照		plannedValue と actualValue のデータのインデックスを指定します。プロットが水平の場合は行インデックスを示します。プロットが垂直の場合は列インデックスを示します。 0 から指定できます。
absolute ［オプション］	ブール	false	ロリポップミニチャートが絶対分散を表示するか、相対分散を表示するかを指定します。 false に設定すると、分散値は相互に影響しません。 true に設定すると、分散は厳密に比率に従って描画します。そのため、分散は相互に影響せず、参照、最大値または最小値のパラメータは動作しません。
reference ［オプション］	数値または参照	0	参照線の位置を指定します。
mini ［オプション］	数値または参照	-1	スパークラインの最小値を指定します。
maxi ［オプション］	数値または参照	1	スパークラインの最大値を指定します。
tickunit ［オプション］	数値または参照	0	目盛単位を指定します。
legend ［オプション］	ブール	FALSE	データラベルを表示するかどうかを指定します。
colorPositive ［オプション］	文字列	「緑」	分散値が参照より大きい場合に、ロリポップバーの塗りつぶしの色を指定します。
colorNegative ［オプション］	文字列	「赤」	分散値が参照より小さい場合に、ロリポップバーの塗りつぶしの色を指定します。
lollipopHeaderColor ［オプション］	文字列	「黒」	ロリポップのヘッダーの塗りつぶし色を指定します。
vertical ［オプション］	ブール	FALSE	スパークラインを垂直方向に表示するかどうかを指定します。

ロリポップスパークラインは次の関数を使用します。

=LOLLIPOPVARISPARKLINE(plannedValue,actualValue,index,absolute,reference,mini,maxi,tickunit,legend,colorPositive,colorNegative,lollipopHeaderColor,vertical);

使用例

例えば、次のシナリオを想定します。

ある組織が経済レポートを作成する際に、複数の地区の計画利益に対する利益差異を分析し、現実利益と期待利益のギャップを反映するようにします。

ロリポッスパークラインを使用すると、値が最大値より大きい場合や最小値より小さい、期待値を超えている場合にはチャートに矢印が表示されます。

lollipop

var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
var sheet = spread.getActiveSheet();
sheet.name('Lollipop variance sparkline');
sheet.setRowCount(20);
sheet.setColumnCount(40);
sheet.suspendPaint();
sheet.addSpan(0, 0, 1, 5);
sheet.setValue(0, 0, "地域別売上データ分析");
sheet.getCell(0, 0).backColor("#196a99");
sheet.setArray(1, 0, [
    ["地区", "売上目標", "売上実績", "分散", "分散 %"],
    ["アジア", 4500, 3500],
    ["ヨーロッパ", 3758, 3920],
    ["北アメリカ", 4525, 5002],
    ["南アメリカ", 3200, 3480],
    ["オセアニア", 1540, 1800],
    ["アフリカ", 430, 430],
]);
for (let i = 2; i < 8; i++) {
    sheet.setFormula(i, 3, '=LOLLIPOPVARISPARKLINE($B$3:$B$8,$C$3:$C$8,' + (i - 2) + ',true,,,,200,true,"#cecece","#cecece","#ffa501")');
    sheet.setFormula(i, 4, '=LOLLIPOPVARISPARKLINE($B$3:$B$8,$C$3:$C$8,' + (i - 2) + ',false,0,-0.2,0.2,0.1,true,"green","red","skyblue")');

}
widthList = [100, 100, 100, 300, 300];
for (let i = 0; i < widthList.length; i++) {
    sheet.setColumnWidth(i, widthList[i]);
}
heightList = [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50];
for (let i = 0; i < heightList.length; i++) {
    sheet.setRowHeight(i, heightList[i]);
}
sheet.getRange('A1:E13').hAlign(1).vAlign(1);
sheet.getRange('A1:E1').font('bold normal 15px normal');
sheet.getRange('A1:A13').font('bold normal 15px normal');
sheet.getRange(2, 3, 6, 1).setBorder(new GC.Spread.Sheets.LineBorder("#fff", GC.Spread.Sheets.LineStyle.empty), {
    inside: true
});
sheet.resumePaint();

デザイナの使用

デザイナを使用してロリポップスパークラインを設定するには、［挿入］ > ［スパークライン］タブグループ内にある［ロリポップスパークライン］ボタンを選択します。

lollipop-designer

関数パラメータを編集するには、［ロリポップスパークラインの設定］ダイアログを使用します。

lollipop-designer2