ウォーターフォールチャート

ウォーターフォールチャートは、初期値が一連の正の値または負の値によってどのような影響を受けたかを表す視覚化ツールです。ウォーターフォールチャートには、プロットされた値が滝のように左から右に浮かんで表示され、最終値に寄与する各要因（正または負の値）が異なる浮動棒で表示されます。

SpreadJSでは、ウォーターフォールチャートがサポートされます。このチャートを使用すると、順次導入された正の値または負の値の累積効果を理解できます。通常、ウォーターフォールチャートは、財務、プロジェクト管理、その他のビジネス関連のに、開始時点と終了時点の間で、値がどのように増減したかを示すためによく使用されます。

ウォーターフォールチャートには、最初の棒が初期値を表し、後続の棒が追加されて正の変化と負の変化を表します。通常、正の値は初期値を上回る棒として表示され、負の値は初期値を下回る棒として表されます。最後の棒は、値の最終的な集計または最終値を表します。

例：店舗の年間収支を示すウォーターフォールチャートを作成する場合があるとします。年初の運用資金を初期値として指定し、月ごとの収支を加算または減算することで最終収支を示します。

また、各列の終端をその次の列の始端に接続する接続線を表示するには、showConnectorLines プロパティを使用します。

waterfall_chart1

次のサンプルコードは、スプレッドシートでウォーターフォールチャートを作成して、月ごとの収支を分析する方法を示します。

var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }); 
var sheet = spread.getActiveSheet(); 
var dataArray = [ 
    [“開始”, 2000], 
    [“1月”, 1000], 
    [“2月”, 1200], 
    [“3月”, 500], 
    [“4月”, -800], 
    [“5月”, -400], 
    [“6月”, 300], 
    [“7月”, -700], 
    [“8月”, -1000], 
    [“9月”, 700], 
    [“10月”, 1200], 
    [“11月”, 2000], 
    [“12月”, 2400], 
    [“合計”, 8400] 
]; 
sheet.setArray(0, 0, dataArray); 

//基本的なウォーターフォール チャート 
let chart = sheet.charts.add("baseWaterfallChart", GC.Spread.Sheets.Charts.ChartType.waterfall, 300, 0, 700, 450, "A1:B14"); 
let title = chart.title(); 
title.text = "年間収支"; 
title.fontSize = 16; 
chart.title(title); 
let series = chart.series().get(0); 
series.showConnectorLines = true; 
series.subtotals = [13];   
chart.series().set(0, series);

ただし、ウォーターフォールチャートには、次のような制限があります。

方向を切り替えることはできず、有効な系列を 1 つだけプロットできます。
誤差範囲と近似曲線を設定することができせん。
ウォーターフォールチャートの接続線のスタイルは、系列の境界線のスタイルと同じです。
ウォーターフォールチャットは、他のチャートの種類と組み合わせて使用することはできません。

カスタムウォーターフォールチャートの作成

カスタムウォーターフォールチャートとは、標準的な表現を超えた特定のニーズや要件を満たすために調整または変更されたウォーターフォールチャートです。SpreadJS では、いくつかの追加機能を使用して、カスタムウォーターフォールチャートを作成できます。たとえば、ShowValue プロパティをtrue に設定して、データ列項目をクリックした後に対応する値を表示するように UI 動作をカスタマイズします。また、チャットの外観を変更するには、backColor や fontSize などのプロパティを使用できます。

次の図は、凡例の背景色が変更されたデータ列項目に関連付けられた値を示しています。

waterfall_chart2

次のサンプルコードは、カスタムウォーターフォールチャートを作成する方法を示します。

let chart = sheet.charts.add("customWaterfallChart", GC.Spread.Sheets.Charts.ChartType.waterfall, 400, 0, 700, 450, "A1:B14");
let chartArea = chart.chartArea();
chartArea.fontSize = 14;
chart.chartArea(chartArea);
let dataLabels = chart.dataLabels();
dataLabels.showValue = true;
dataLabels.color = 'rgb(64,60,61)';
dataLabels.position = GC.Spread.Sheets.Charts.DataLabelPosition.center;
chart.dataLabels(dataLabels);
let legend = chart.legend();
legend.position = GC.Spread.Sheets.Charts.LegendPosition.bottom;
chart.legend(legend);
let title = chart.title();
title.text = "年間収支";
title.fontSize = 16;
chart.title(title);
let series = chart.series().get(0);
series.showConnectorLines = true;
series.gapWidth = 0.2;
series.subtotals = [0, 13];
chart.series().set(0, series);
chart.formatOvers({
    0: {
        backColor: "rgb(61,198,147)",
    },
    1: {
        backColor: "rgb(225,128,99)",
    },
    2: {
        backColor: "rgb(91,188,214)",
    }
});