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

폭포 차트

폭포 차트는 SpreadJS에서 연속적인 양수 및 음수 값이 누적 합계에 어떻게 영향을 미치는지 시각적으로 보여줍니다. 각 기여 요소를 세분화하여 표시하므로, 순이익 변화, 예산 편차, 판매 실적, 재고 추세 분석에 유용합니다.

SpreadJS는 색상 팔레트, 막대 너비, 범례, 연결선(색상, 두께, 대시 스타일) 등 다양한 사용자 정의 옵션을 제공합니다. 추가 속성인 showTotal, totalLabel, orientation 등을 통해 차트 레이아웃을 보다 세밀하게 제어할 수 있습니다.

아래는 폭포 차트 데이터 예제입니다.

image

고유 설정

다음 표는 폭포 차트 전용 속성을 요약한 것입니다.

속성

설명

미리보기

showTotal

마지막 합계 막대를 차트에 표시할지 여부를 제어합니다.

true로 설정하면 마지막 합계 열이 표시되고, false로 설정하면 숨겨집니다.

image

totalLabel

합계 열에 표시할 텍스트 레이블을 지정합니다(기본값: "Total").

image

orientation

차트 방향을 설정합니다. "vertical"(기본값) 또는 "horizontal"을 지정할 수 있습니다.

image

connectingLineStyle

막대 간 연결선 스타일을 정의합니다.

다음과 같은 속성을 사용자 정의할 수 있습니다.

  • stroke (선 색상)

  • strokeWidth (선 두께)

  • strokeDasharray (실선/점선 패턴)

image

코드 사용 예제

다음 샘플은 연간 순이익 분석을 위한 폭포 차트를 생성합니다. 커스텀 차트 구성, 텍스트 스타일링, 툴팁, 애니메이션 효과가 포함되어 있습니다.

// 기본 설정
const sheet = spread.getActiveSheet();
sheet.name("Waterfall Data Chart");
const dataManager = spread.dataManager();

function createProfitsTable(dataManager) {
    const records = [
        ["전년 순이익", 846.5],
        ["제품 매출 증가", 235.8],
        ["가격/믹스 개선", 87.3],
        ["원자재 비용 증가", -162.7],
        ["운영 비용 증가", -95.4],
        ["세제 혜택", 38.6],
    ];
  const columns = ["Category", "Value"];
  return dataManager.addTable("Profits", {
    data: records.map(record => {
      const item = {};
      columns.forEach((column, index) => item[column] = record[index]);
      return item;
    }),
  });
}

const ProfitsTable = createProfitsTable(dataManager);
await ProfitsTable.fetch();

// 폭포 차트 생성
const dataChart = sheet.dataCharts.add('WaterfallChart6', 10, 10, 600, 400);
dataChart.setChartConfig({
  tableName: 'Profits',
  plots: [{
    type: GC.Spread.Sheets.DataCharts.DataChartType.waterfall,
    encodings: {
      values: [{ field: 'Value', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
      category: { field: 'Category' },
    },
    config: {
      waterfall: {
        totalLabel: '금년 순이익',
        connectingLineStyle: {
          stroke: { type: 'CssColor', color: 'red' },
          strokeWidth: 2,
        },        
      },
      text: [{
        template: '{valueField.value}',
        format: { value: '0.00' },
        overlappingLabels: 'Hide',
        position: GC.Spread.Sheets.DataCharts.TextPosition.center,
        textStyle: {
          fontFamily: 'Calibri',
          fontSize: 10,
          fontWeight: 'Lighter',
          fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
          color: '#333333',
        },
      }],
      tooltip: [{
        style: {
          fill: { type: 'CssColor', color: '#ffffff' },
          stroke: { type: 'CssColor', color: '#e0e0e0' },
          strokeWidth: 1,
        },
        textStyle: {
          fontFamily: 'Calibri',
          fontSize: 12,
          fontWeight: 'Lighter',
          fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
          color: '#333333',
        },
      }],
      hoverAnimation: {
        duration: 400,
        easing: GC.Spread.Sheets.DataCharts.AnimationEasing.linear,
        scale: 1.5,
      },
      updateAnimation: {
        startDelay: 200,
        duration: 1000,
        easing: GC.Spread.Sheets.DataCharts.AnimationEasing.linear,
      },
    },
  }],
    config: {
    header: {
      title: 'Profit Bridge: 연간 순이익 분석',
      padding: {
        left: 10,
        right: 10,
        top: 10,
        bottom: 20,
      },
   style: {
        fill: { type: 'CssColor', color: '#f2f2f2' },
    },
      textStyle: {
        color: 'black',
        fontSize: 18,
        fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
        fontWeight: 'Bold',
        alignment: GC.Spread.Sheets.DataCharts.HAlign.left,        
      },
    },
  },
});

demo.893922.gif