DioDocs for Excel
DioDocs for Excel
SpreadJSのスパークライン
ファイル操作 > SpreadJS ファイルのインポートとエクスポート > JSON ファイルのインポートとエクスポート > SpreadJSのスパークライン

SpreadJSは、MS Excelがサポートする標準的なスパークラインに加え、カスケードスパークラインをサポートしています。DioDocs for Excel は、カスケードスパークラインを含む SpreadJS ファイルの JSON I/O、HTML、画像、PDF形式へのエクスポートに対応しています。このトピックでは、SpreadJS 独自のスパークラインについてと、DioDocs for Excel でそれを作成する方法について説明します。

カスケードスパークライン

カスケードスパークラインは、一般的に年間を通じた売上高、総利益、純税などの値を分析するために使用されます。これは、金融、販売、法務、建設などの機関で広く使用されています。例えば、カスケードスパークラインを使用して、「セールスマンの費用と支払い」を比較できます。

DioDocs for Excel では、CASCADESPARKLINE 関数を使用して、カスケードスパークラインを作成できます。

構文

=CASCADESPARKLINE(pointsRange, pointIndex, labelsRange, minimum, maximum, colorPositive, colorNegative, vertical, itemTypeRange, colorTotal)

パラメータ

名前 説明
pointsRange（必須） すべての値を保持するセル範囲を表す参照。「B2:B8」など。
pointIndex（必須） データ点のインデックスを表す数値または参照。pointIndexは1以上の値である必要があります。「1」、「D2」など。
LabelsRange（オプション） すべてのラベルを保持するセル範囲を表す参照。「A2:A8」など。デフォルトは「ラベルなし」です。
minimum（オプション） 表示領域の最小値を表す数値または参照。デフォルト値は集計値（各データ点の値の集計）内の最小値となります。「-2000」など。最小値を設定する場合は、デフォルトの最小値より小さい値とする必要があります。そうでない場合は、デフォルトの最小値が使用されます。
maximum（オプション） 表示領域の最大値を表す数値または参照。デフォルト値は集計値（各データ点の値の集計）内の最大値となります。「6000」など。最大値を設定する場合は、デフォルトの最大値より大きい値とする必要があります。そうでない場合は、デフォルトの最大値が使用されます。
colorPositive（オプション） 最初または最後の正のスパークラインボックス（正の値であるデータ点を表すボックス）の色を表す文字列。デフォルト値は「#8CBF64」です。最初または最後のボックスが正の値を表す場合は、このボックスの色がcolorPositiveの色となります。その中間に位置する正のボックスは、colorPositiveよりやや薄い色で表示されます。
colorNegative（オプション） 最初または最後の負のスパークラインボックス（負の値であるデータ点を表すボックス）の色を表す文字列。デフォルト値は「#D6604D」です。最初または最後のボックスが負の値を表す場合は、このボックスの色がcolorNegativeの色となります。その中間に位置する負のボックスは、colorNegativeよりやや薄い色で表示されます。
vertical（オプション） ボックスの向きを垂直方向にするか水平方向にするかを表すブール値。デフォルト値はfalseです。1つのスパークラインは、1グループの数式によって構成されます。したがって、グループ内のすべての数式に対し、verticalの値をtrueまたはfalseに統一する必要があります。
itemTypeRange（オプション） データ範囲のすべてのアイテムタイプを表す配列または参照。値は{"-", "+", "="}、または{"+", "-", "="}の値を参照する"A1:A7"である必要があります。「+」は正の変化、「-」は負の変化、「=」は列の合計を示します。
colorTotal （オプション） itemTypeRangeが存在しない場合は最後のスパークラインボックスの色を表す文字列、またはitemTypeRangeが存在する場合は結果のスパークラインボックスの色を表す文字列。

次のサンプルコードは、関数を使用してカスケードスパークラインを追加する方法を示しています。

C#
コードのコピー 
//カスケードスパークラインを追加します

for (int i = 1; i < 8; i++) 
{ 
    worksheet.Range[i, 2].Formula = "=CASCADESPARKLINE(B2:B8, ROW() - 1, A2:A8, , , \"#8CBF64\", \"#D6604D\", FALSE)"; 
}
メモ: MS Excel は CASCADESPARKLINE 関数をサポートしていないため、Excel ファイルにエクスポートすると、数式は "#NAME?" になります。しかし、そのファイルを DioDocs for Excel にインポートすると、数式は正しく表示されます。

 

折れ線スパークライン

折れ線スパークラインは、費用やデータの傾向を示し、変動や変化を強調します。

構文

= LINESPARKLINE(data,dataOrientation,[dateAxisData],[dateAxisOrientation],[setting])

パラメータ

名前 説明
data スパークラインデータを表す範囲参照。例: “A1:C3”。
dataOrientation スパークラインデータの向きを表す数値。以下のいずれか：               
  • 垂直: 0 (デフォルト値)
  • 水平: 1
dateAxisData スパークラインの日付軸データを表す範囲参照。例: “D1:F3”。dateAxisOrientationがない場合、dateAxisDataは無効です。
dateAxisOrientation

スパークラインの日付軸の向きを表す数値。以下のいずれか：      

  • 垂直: 0 (デフォルト値)
  • 水平: 1
setting JSON形式の文字列。形式: 全称 (略称) [デフォルト値]: 説明

settingパラメータは、スパークラインの設定を行うための以下のケースセンシティブなプロパティを提供します。

パラメータ名 説明
showFirst(sf)[False] 最初のデータポイントがスパークラインで異なる形式で表示されるかどうかを確認します。
showHigh(sh)[False] 最高値のデータポイントがスパークラインで異なる形式で表示されるかどうかを確認します。
showLast(slast)[False] 最後のデータポイントがスパークラインで異なる形式で表示されるかどうかを確認します。
showLow(slow)[False] 最低値のデータポイントがスパークラインで異なる形式で表示されるかどうかを確認します。
showNegative(sn)[False] 負のデータポイントがスパークラインで異なる形式で表示されるかどうかを確認します。
showMarkers(sm)[False] スパークラインのデータマーカーが表示されるかどうかを確認します。
axisColor(ac)[#000000] 軸の色。
firstMarkerColor(fmc)[#95B3D7] スパークラインの最初のデータポイントの色。
highMarkerColor(hmc)[#0000FF] スパークラインの最高値のデータポイントの色。
lastMarkerColor(lastmc)[#95B3D7] スパークラインの最後のデータポイントの色
lowMarkerColor(lowmc)[#0000FF] スパークラインの最低値のデータポイントの色。
markersColor(mc)[#244062] スパークラインのデータマーカーの色。
negativeColor(nc)[#A52A2A] スパークラインの負のデータポイントの色。
seriesColor(sc)[#244062] スパークラインの色。
lineWeight(lw)[1.0] スパークラインの線の太さを示します。線の太さはポイント単位で測定され、0以上である必要があります。
displayXAxis(dxa)[False] スパークラインの水平軸が表示されるかどうかを示します。
displayEmptyCellsAs(deca)[0] 空のセルをどのように表示するかを示します。
  • gaps: 0
    データ系列の空白値に対して間隔を空け、セグメント化された線を生成します。
  • zero: 1
    データ系列の空白値をゼロ値として扱い、ゼロ値のデータポイントに対して線がゼロに落ちるようにします
  • connect: 2
    データ系列の空白値に間隔を残さず、接続要素で埋めます。
displayHidden(dh)[False] 非表示のセルのデータがスパークラインに表示されるかどうかを示します。
manualMax(mmax)[0] スパークラインの縦軸の最大値を示します。maxAxisTypeが ‘custom(2)’でない場合、軸はゼロに設定されます。
manualMin(mmin)[0] スパークラインの縦軸の最小値を示します。minAxisTypeが‘custom(2)’でない場合、軸はゼロに設定されます。
maxAxisType(maxat)[0] 縦軸の最大値がどのように計算されるかを示します。
  • individual: 0
    スパークラインの縦軸の最小値または最大値が自動的に計算され、表示されるようにします。
  • custom: 2
    スパークラインの縦軸の最小値または最大値がmanualMin属性またはmanualMax属性によって指定されます。
minAxisType(minat)[0] 縦軸の最小値がどのように計算されるかを示します。maxAxisTypeと同様です。
rightToLeft(rtl)[False] スパークライングループ内の各スパークラインが右から左に表示されるかどうかを示します。

関数を使用して折れ線スパークラインを追加するには、以下のサンプルコードを参照してください。

C#
コードのコピー 
// Create a new workbook.
var workbook = new Workbook();

// Get active sheet.
var worksheet = workbook.ActiveSheet;

// Add values to the table.
worksheet.Range["A1"].Value = "Sales by Country";
worksheet.Range["A2:F5"].Value = new object[,]
{
{"Countries",2016,2017,2018,2019,2020},
{"China",243000,291000,465000,282000,213000},
{"India",448000,358000,332000,489000,302000},
{"UnitedStates",439000,276000,413000,396000,392000}
};
worksheet.Range["G2"].Value = "SparkLine";

// Add line sparkline formula.
worksheet.Range["G3:G5"].Formula = "=LINESPARKLINE(B3:F3,1,,,\"{showMarkers:TRUE,lineWeight:1.5,markersColor:#7030a0}\")";

worksheet.Range["A1:G1"].Merge();
worksheet.Range["A1"].Interior.Color = System.Drawing.Color.Purple;
worksheet.Range["A1"].Font.Color = System.Drawing.Color.White;
worksheet.Range["A1"].HorizontalAlignment = HorizontalAlignment.Center;
worksheet.Range["A1:G5"].Borders.LineStyle = BorderLineStyle.Thin;

worksheet.Range["B3:F5"].NumberFormat = "$#,##0";
worksheet.Range["A1:G2"].Font.Bold = true;
worksheet.Range["A1"].Font.Size = 15;
worksheet.Range["A2:G5"].Font.Size = 13;

worksheet.Range["A:F"].AutoFit();
worksheet.Range["1:5"].RowHeight = 25;
worksheet.Range["G1"].ColumnWidth = 30;


// Save as a PDF document.
workbook.Save("LineSparkline.pdf");

// Save as a .sjs file.
workbook.Save("LineSparkline.sjs");

縦棒スパークライン

縦棒スパークラインは、縦棒グラフを使用してデータの分布と変化を視覚化します。正のデータポイントは横軸の上に、負のデータポイントは横軸の下に配置されます。

構文

= COLUMNSPARKLINE(data,dataOrientation,[dateAxisData],[dateAxisOrientation],[setting])

パラメータ

名前 説明
data スパークラインデータを表す範囲参照。例: “A1:C3”。
dataOrientation スパークラインデータの向きを表す数値。以下のいずれか：               
  • 垂直: 0 (デフォルト値)
  • 水平: 1
dateAxisData スパークラインの日付軸データを表す範囲参照。例: “D1:F3”。dateAxisOrientationがない場合、dateAxisDataは無効です。
dateAxisOrientation

スパークラインの日付軸の向きを表す数値。以下のいずれか：      

  • 垂直: 0 (デフォルト値)
  • 水平: 1
setting JSON形式の文字列。形式: 全称 (略称) [デフォルト値]: 説明

settingパラメータは、スパークラインの設定を行うための以下のケースセンシティブなプロパティを提供します。

パラメータ名 説明
showFirst(sf)[False] 最初のデータポイントがスパークラインで異なる形式で表示されるかどうかを確認します。
showHigh(sh)[False] 最高値のデータポイントがスパークラインで異なる形式で表示されるかどうかを確認します。
showLast(slast)[False] 最後のデータポイントがスパークラインで異なる形式で表示されるかどうかを確認します。
showLow(slow)[False] 最低値のデータポイントがスパークラインで異なる形式で表示されるかどうかを確認します。
showNegative(sn)[False] 負のデータポイントがスパークラインで異なる形式で表示されるかどうかを確認します。
showMarkers(sm)[False] スパークラインのデータマーカーが表示されるかどうかを確認します。
axisColor(ac)[#000000] 軸の色。
firstMarkerColor(fmc)[#95B3D7] スパークラインの最初のデータポイントの色。
highMarkerColor(hmc)[#0000FF] スパークラインの最高値のデータポイントの色。
lastMarkerColor(lastmc)[#95B3D7] スパークラインの最後のデータポイントの色
lowMarkerColor(lowmc)[#0000FF] スパークラインの最低値のデータポイントの色。
markersColor(mc)[#244062] スパークラインのデータマーカーの色。
negativeColor(nc)[#A52A2A] スパークラインの負のデータポイントの色。
seriesColor(sc)[#244062] スパークラインの色。
lineWeight(lw)[1.0] スパークラインの線の太さを示します。線の太さはポイント単位で測定され、0以上である必要があります。
displayXAxis(dxa)[False] スパークラインの水平軸が表示されるかどうかを示します。
displayEmptyCellsAs(deca)[0] 空のセルをどのように表示するかを示します。
  • gaps: 0
    データ系列の空白値に対して間隔を空け、セグメント化された線を生成します。
  • zero: 1
    データ系列の空白値をゼロ値として扱い、ゼロ値のデータポイントに対して線がゼロに落ちるようにします
  • connect: 2
    データ系列の空白値に間隔を残さず、接続要素で埋めます。
displayHidden(dh)[False] 非表示のセルのデータがスパークラインに表示されるかどうかを示します。
manualMax(mmax)[0] スパークラインの縦軸の最大値を示します。maxAxisTypeが ‘custom(2)’でない場合、軸はゼロに設定されます。
manualMin(mmin)[0] スパークラインの縦軸の最小値を示します。minAxisTypeが‘custom(2)’でない場合、軸はゼロに設定されます。
maxAxisType(maxat)[0] 縦軸の最大値がどのように計算されるかを示します。
  • individual: 0
    スパークラインの縦軸の最小値または最大値が自動的に計算され、表示されるようにします。
  • custom: 2
    スパークラインの縦軸の最小値または最大値がmanualMin属性またはmanualMax属性によって指定されます。
minAxisType(minat)[0] 縦軸の最小値がどのように計算されるかを示します。maxAxisTypeと同様です。
rightToLeft(rtl)[False] スパークライングループ内の各スパークラインが右から左に表示されるかどうかを示します。

関数を使用して縦棒スパークラインを追加するには、以下のサンプルコードを参照してください。

C#
コードのコピー 
// Create a new workbook.
var workbook = new Workbook();

// Get active sheet.
var worksheet = workbook.ActiveSheet;

// Add values to the table.
worksheet.Range["A1"].Value = "Sales Data";
worksheet.Range["A2:F6"].Value = new object[,]
{
{"Salesperson","Jan","Feb","Mar","Apr","May"},
{"Courtney Graves",76000,68250,72000,99750,45500},
{"Crystal Cross",118750,89250,121250,92500,60750},
{"Jodi Hall",75500,56500,65500,62750,77500},
{"Andrew James",76750,108500,88000,55750,106000}
};
worksheet.Range["G2"].Value = "SparkLine";

// Add column sparkline formula.
worksheet.Range["G3:G6"].Formula = "=COLUMNSPARKLINE(B3:F3,1,,,\"{showMarkers:TRUE}\")";

worksheet.Range["A1:G1"].Merge();
worksheet.Range["A1"].Interior.Color = System.Drawing.Color.Purple;
worksheet.Range["A1"].Font.Color = System.Drawing.Color.White;
worksheet.Range["A1"].HorizontalAlignment = HorizontalAlignment.Center;
worksheet.Range["A1:G6"].Borders.LineStyle = BorderLineStyle.Thin;

worksheet.Range["B3:F6"].NumberFormat = "$#,##0";
worksheet.Range["A1:G2"].Font.Bold = true;
worksheet.Range["A1"].Font.Size = 15;
worksheet.Range["A2:G6"].Font.Size = 13;

worksheet.Range["A:F"].AutoFit();
worksheet.Range["1:6"].RowHeight = 25;
worksheet.Range["G1"].ColumnWidth = 30;

// Save as a PDF document.
workbook.Save("ColumnSparkline.pdf");

// Save as a .sjs file.
workbook.Save("ColumnSparkline.sjs");

勝敗スパークライン

勝敗スパークラインは縦棒グラフを使用して正と負の値を視覚的に表現します。正の値 (勝ち) は横軸の上に、負の値 (負け) は横軸の下にあります。このスパークラインは、trueまたはfalse、1または-1などの2つの状態を持つ値をサポートします。たとえば、1は勝ちを表し、-1は負けを表すゲーム結果などです。

構文

= WINLOSSSPARKLINE(data,dataOrientation,[dateAxisData],[dateAxisOrientation],[setting])

パラメータ

名前 説明
data スパークラインデータを表す範囲参照。例: “A1:C3”。
dataOrientation スパークラインデータの向きを表す数値。以下のいずれか：               
  • 垂直: 0 (デフォルト値)
  • 水平: 1
dateAxisData スパークラインの日付軸データを表す範囲参照。例: “D1:F3”。dateAxisOrientationがない場合、dateAxisDataは無効です。
dateAxisOrientation

スパークラインの日付軸の向きを表す数値。以下のいずれか：      

  • 垂直: 0 (デフォルト値)
  • 水平: 1
setting JSON形式の文字列。形式: 全称 (略称) [デフォルト値]: 説明

settingパラメータは、スパークラインの設定を行うための以下のケースセンシティブなプロパティを提供します。

パラメータ名 説明
showFirst(sf)[False] 最初のデータポイントがスパークラインで異なる形式で表示されるかどうかを確認します。
showHigh(sh)[False] 最高値のデータポイントがスパークラインで異なる形式で表示されるかどうかを確認します。
showLast(slast)[False] 最後のデータポイントがスパークラインで異なる形式で表示されるかどうかを確認します。
showLow(slow)[False] 最低値のデータポイントがスパークラインで異なる形式で表示されるかどうかを確認します。
showNegative(sn)[False] 負のデータポイントがスパークラインで異なる形式で表示されるかどうかを確認します。
showMarkers(sm)[False] スパークラインのデータマーカーが表示されるかどうかを確認します。
axisColor(ac)[#000000] 軸の色。
firstMarkerColor(fmc)[#95B3D7] スパークラインの最初のデータポイントの色。
highMarkerColor(hmc)[#0000FF] スパークラインの最高値のデータポイントの色。
lastMarkerColor(lastmc)[#95B3D7] スパークラインの最後のデータポイントの色
lowMarkerColor(lowmc)[#0000FF] スパークラインの最低値のデータポイントの色。
markersColor(mc)[#244062] スパークラインのデータマーカーの色。
negativeColor(nc)[#A52A2A] スパークラインの負のデータポイントの色。
seriesColor(sc)[#244062] スパークラインの色。
lineWeight(lw)[1.0] スパークラインの線の太さを示します。線の太さはポイント単位で測定され、0以上である必要があります。
displayXAxis(dxa)[False] スパークラインの水平軸が表示されるかどうかを示します。
displayEmptyCellsAs(deca)[0] 空のセルをどのように表示するかを示します。
  • gaps: 0
    データ系列の空白値に対して間隔を空け、セグメント化された線を生成します。
  • zero: 1
    データ系列の空白値をゼロ値として扱い、ゼロ値のデータポイントに対して線がゼロに落ちるようにします
  • connect: 2
    データ系列の空白値に間隔を残さず、接続要素で埋めます。
displayHidden(dh)[False] 非表示のセルのデータがスパークラインに表示されるかどうかを示します。
manualMax(mmax)[0] スパークラインの縦軸の最大値を示します。maxAxisTypeが ‘custom(2)’でない場合、軸はゼロに設定されます。
manualMin(mmin)[0] スパークラインの縦軸の最小値を示します。minAxisTypeが‘custom(2)’でない場合、軸はゼロに設定されます。
maxAxisType(maxat)[0] 縦軸の最大値がどのように計算されるかを示します。
  • individual: 0
    スパークラインの縦軸の最小値または最大値が自動的に計算され、表示されるようにします。
  • custom: 2
    スパークラインの縦軸の最小値または最大値がmanualMin属性またはmanualMax属性によって指定されます。
minAxisType(minat)[0] 縦軸の最小値がどのように計算されるかを示します。maxAxisTypeと同様です。
rightToLeft(rtl)[False] スパークライングループ内の各スパークラインが右から左に表示されるかどうかを示します。

関数を使用して勝敗スパークラインを追加するには、以下のサンプルコードを参照してください。

C#
コードのコピー 
// Create a new workbook.
var workbook = new Workbook();

// Get active sheet.
var worksheet = workbook.ActiveSheet;

// Add values to the table.
worksheet.Range["A1"].Value = "Employee Performance";
worksheet.Range["A2:F5"].Value = new object[,]
{
{"Team Member","Wk1","Wk2","Wk3","Wk4","Wk5"},
{"Pamela Nelson",5,1,7,5,8},
{"Gabriel Reed",1,2,4,2,9},
{"Christina Robbins",4,10,8,5,10}
};
worksheet.Range["H2"].Value = "Target (tasks per week):";
worksheet.Range["I2"].Value = 5;
worksheet.Range["G2"].Value = "SparkLine";


// Add win-loss sparkline formula. Use Formula2 as the formula contains a dynamic array formula (B3:F3-$I$2).
worksheet.Range["G3:G5"].Formula2 = "=WINLOSSSPARKLINE(B3:F3-$I$2,1,,,\"{showNegative:TRUE}\")";

worksheet.Range["A1:G1"].Merge();
worksheet.Range["A1"].Interior.Color = System.Drawing.Color.Purple;
worksheet.Range["A1"].Font.Color = System.Drawing.Color.White;
worksheet.Range["A1"].HorizontalAlignment = HorizontalAlignment.Center;
worksheet.Range["A1:G5"].Borders.LineStyle = BorderLineStyle.Thin;

worksheet.Range["A1:G2"].Font.Bold = true;
worksheet.Range["A1"].Font.Size = 15;
worksheet.Range["A2:G5"].Font.Size = 13;
worksheet.Range["H2:I2"].Font.Bold = true;
worksheet.Range["H2:I2"].Font.Size = 13;

worksheet.Range["A:F"].AutoFit();
worksheet.Range["1:5"].RowHeight = 25;
worksheet.Range["G1:H1"].ColumnWidth = 30;

// Save as a PDF document.
workbook.Save("WinLossSparkline.pdf");

// Save as a .sjs file.
workbook.Save("WinLossSparkline.sjs");

メモ:

関連トピック
スパークライン

 

 

© MESCIUS inc. All rights reserved.