[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

폭포 차트

폭포 차트는 일련의 양수 및 음수 값이 초기 값에 어떤 영향을 미치는지를 시각적으로 보여주는 도구입니다. 폭포 차트에서는 왼쪽에서 오른쪽으로 흐르는 형태로 값이 표시되며, 각 단계 또는 요소가 결과에 어떻게 기여하는지를 개별 열 또는 단계로 나타냅니다.

SpreadJS는 폭포 차트를 지원하며, 이는 순차적으로 도입된 양수 또는 음수 값의 누적 영향을 이해하는 데 유용합니다. 일반적으로 재무, 프로젝트 관리 및 기타 비즈니스 관련 시나리오에서 시작 값을 구성 요소로 나누어 보여주는 데 사용됩니다.

이 차트는 일반적으로 초기 값을 나타내는 막대에서 시작하며, 이후 양수 및 음수 변화를 나타내는 막대가 추가됩니다. 양수 값은 초기 값을 기준으로 위로 상승하는 막대로 표시되고, 음수 값은 초기 값을 기준으로 아래로 하락하는 막대로 표시됩니다. 마지막 막대는 최종 합계 또는 최종 결과를 나타냅니다.

예시: 한 직원의 월별 급여를 나타내는 간단한 폭포 차트를 고려해보세요. 기본 급여에서 시작하여, 각 월의 급여를 더하거나 빼서 최종 소득을 표시하는 방식입니다. series의 subtotals 속성을 사용하여 특정 포인트 인덱스를 합계로 설정할 수 있습니다.

또한 showConnectorLines 속성을 설정하여 각 열의 끝과 다음 열의 시작을 연결하는 연결선을 표시할 수 있으며, 이를 통해 데이터 흐름을 시각적으로 표현할 수 있습니다.

image


다음은 SpreadJS에서 월별 급여를 분석하기 위해 폭포 차트를 생성하는 방법을 보여주는 코드 샘플입니다.

var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
var sheet = spread.getActiveSheet();
var dataArray = [
    ['Start', 800],
    ['January', 1000],
    ['February', 1200],
    ['March', 500],
    ['April', -800],
    ['May', -400],
    ['June', 300],
    ['July', -700],
    ['August', -1000],
    ['September', 700],
    ['October', 1200],
    ['November', 2000],
    ['December', 2400],
    ['End', 7200]
];
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 = "Monthly Income";
title.fontSize = 16;
chart.title(title);
let series = chart.series().get(0);
series.showConnectorLines = true;
series.subtotals = [13];  
chart.series().set(0, series);

그러나 폭포 차트에는 다음과 같은 몇 가지 제한 사항이 있습니다:

  • 방향을 전환할 수 없으며, 하나의 유효한 시리즈만 지원합니다.

  • 오류 막대 및 추세선을 설정할 수 없습니다.

  • 폭포 차트의 연결선 스타일은 시리즈의 테두리 스타일과 동일합니다.

  • 다른 차트 유형과 결합할 수 없습니다.

사용자 지정 폭포 차트

사용자 지정 폭포 차트란, 기본 표현을 넘어 특정 요구 사항에 맞게 맞춤 구성되거나 수정된 폭포 차트를 말합니다. showValue 속성을 true로 설정하여 데이터 열 항목을 클릭했을 때 해당 값을 표시하도록 UI 동작을 포맷팅하는 등의 추가 기능을 통해 사용자 지정 폭포 차트를 만들 수 있습니다. 또한 backColor 또는 fontSize와 같은 속성을 사용하여 차트의 외형을 수정할 수 있습니다.

아래 이미지는 데이터 열 항목과 관련된 값을 표시하고, 범례의 배경색도 수정한 예시를 보여줍니다.

image


다음 샘플 코드는 사용자 지정 폭포 차트를 구현하는 방법을 보여줍니다.

Ask ChatGPT

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 = "Monthly Income";
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)",
    }
});